dedekvaa Posted July 9, 2017 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Krydos Posted July 9, 2017 Share Posted July 9, 2017 Try something like this <style> @media only screen and (min-device-width: 1365) { .wrapper { width: 1000px !important; } } </style> Quote Link to comment Share on other sites More sharing options...
dedekvaa Posted July 9, 2017 Author Share Posted July 9, 2017 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Krydos Posted July 10, 2017 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.