Change Css While Screen Width Larger Than 1365

dedekvaa · July 9, 2017

Hello guys, I need some help here. I don't know how to do it.

I already try to mix PHP, JS, and CSS, then JS with CSS.

But it doesn't work.

Nah, here is I want to ask.

I want to make a responsive page. But ...

If the user's screen > 1365, it will make the wrapper fix width to 1000px.

How can I do that?

Thank you.

Krydos · July 9, 2017

Try something like this

<style>
  @media only screen and (min-device-width: 1365) {
    .wrapper {
      width: 1000px !important;
    }
  }
</style>

dedekvaa · July 9, 2017

Sigh, I don't understand why it is wrong.
Here is my code.

html {
  height: 100%;
}
body {
  font-family: "Ubuntu";
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color:#F7E9C6;
}

#wrapper {
  width:77.46%;
  background-color: #FFF;
  padding:0;
  box-shadow: 3px 3px 3px 3px grey;
  flex: 1 0 auto;
  padding-bottom: 1em;
}

@media only screen and (min-device-width: 1366) {
  #wrapper {
    width: 1000px !important;
  }
}
#slideshow img {
  height:auto;
  max-width:100%;
}

.kotak {
  border:1px solid #000;
  border-radius: 5px;
  padding:5px;
  margin-bottom: 1em;
}

.kotak img {
  width:157.5px;
  height:46px;
}

.footer {
  margin-top:1em;
  font-size: 0.9em;
  flex-shrink: 0;
  background-color: #282828;
  color:#FFF;
  padding:1rem;
  text-align: center;
}

Whats wrong tho? BTW, I will use it for >= 1366 width screen or > 1365.

While I look for my code at view-source, the

@media only screen and (min-device-width: 1366) {
#wrapper {
width: 1000px !important;
}
}

doesn't show up. Why is that?

Or I should use your code at my <head></head> tag?

Edited July 9, 2017 by dedekvaa

Krydos · July 10, 2017

Yes, all <style></style> tags should go before </head>.

When I'm having issues with css like this I make a simpler page with just a few of the elements and if it works I copy/paste a few more elements from the main page until I find out what is causing the issue. For instance I had an issue like this a couple weeks where the outside container wouldn't shrink in a responsive way like it was supposed to. It turns out there was an element within the outer container that wasn't scaling properly and would stay 600px wide or whatever when it was supposed to be 400px. Take it apart and put it together bit by bit. It's just good troubleshooting techniques.

Sign In

Change Css While Screen Width Larger Than 1365

Recommended Posts

dedekvaa

Krydos

dedekvaa

Krydos

Create an account or sign in to comment

Create an account

Sign in

HelioHost

Donate

Forums

Activity