Disable CSS for responsive design

Question

I have the following CSS setup up on my site. I'd like for it to be disabled when a browser width gets narrower than 900 px, but to remain enabled when a browser width is greater than 900. Any suggestions on how I can do this?

Thanks!

.image-slide-title {
  display: block !important;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 1;
  z-index: 2000;
  font-family: "open sans";
  font-size: 100%;
  font-weight: 100;
  margin-bottom: 100px;
  line-height: 1.8;
  color: #333
}

write a media query and just write reset css into the same for all the elements. Do not forget to mark those important as only then the reset behavoiur in your case would work — Akshay Khandelwal
– Akshay Khandelwal, Commented Oct 3, 2013 at 17:34
It's not that I don't want to help you, but this is one of the first things you see if you do some basic research on responsive web design. Google is your friend, and so are other search engines. — RaptorDotCpp
– RaptorDotCpp, Commented Oct 3, 2013 at 17:35
Thanks guys. @RaptorDotCpp Lol, I tried searching but I didn't find anything I can understand. Figured someone here would be happy to help with a simple suggestion. — G Weg
– G Weg, Commented Oct 3, 2013 at 17:50

Romain · Accepted Answer · 2013-10-03 17:40:53Z

2

Don't forget to add the html tag for smaller devices:

HTML

put the following meta inside your page head

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

CSS

.image-slide-title {
          display: block !important;
          height: 100%;
          width: 100%;
          position: absolute;
          top: 1;
          z-index: 2000;
          font-family: "open sans";
          font-size: 100%;
          font-weight: 100;
          margin-bottom: 100px;
          line-height: 1.8;
          color: #333
        }

     @media screen and (max-width: 900px) {
          .image-slide-title {
             /* do what you want here */
             display: none !important;
          }
      }

Honestly, if you can remove the important tag, it will be much more simpler to manage the responsive effect

answered Oct 3, 2013 at 17:40

Romain

1,9582 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Romain Over a year ago

Also, if you want to create a responsive design for all devices, you can find many online website that will help you: responsinator.com Note: most website aren't emulators, so the result might be different depending on the device (blackberry IOS sucks)

Esteban · Accepted Answer · 2013-10-03 17:42:30Z

2

I believe you're looking for media queries.

@media (max-width: 899px) {
    .image-slide-title {
        display: none !important;
    }
}

Don't forget to do this on your html:

<!DOCTYPE html>
<html lang="en">
<head>
        <meta name="viewport" content="width=device-width" />

edited Oct 3, 2013 at 17:42

answered Oct 3, 2013 at 17:37

Esteban

3,1273 gold badges34 silver badges52 bronze badges

Comments

Cam · Accepted Answer · 2013-10-03 17:44:35Z

0

My recommendation is to create a secondary css page for your mobile.

<link rel="stylesheet" media="screen and (min-width: 901px)" href="style.css" />
<link rel="stylesheet" media="screen and (max-width: 900px)" href="mobile-style.css" />

Then in that stylesheet have the settings specific to that.

answered Oct 3, 2013 at 17:44

Cam

1,90211 silver badges25 bronze badges

1 Comment

G Weg Over a year ago

Thanks, Cam! Appreciate it.

Hasan Tezcan · Accepted Answer · 2021-12-31 15:26:05Z

0

Just you need to add media query


@media screen and (max-width: 1200px) {
  .div-name {
    width: max-content !important;
  }
}

This usage avoid to rescale your flex system and you achieve a solid structure does not effect screen resizing

answered Dec 31, 2021 at 15:26

Hasan Tezcan

1,2622 gold badges17 silver badges27 bronze badges

Collectives™ on Stack Overflow

Disable CSS for responsive design

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related