Question: How does one use css #media to target all screens below 1024x600?
I need to tell all small monitor screens to use overflow-x:scroll.
Context: I had to use the following CSS rule on both the HTML and BODY tags:
overflow-x:hidden !important;
(Otherwise certain animations cause ugly horizontal scrollbars to appear on the page.)
But now, when viewing my site using smaller screens, it would be nice if the user could scroll the page horizontally.
I'll keep looking for a css snippet that does this, but I'm posting this because the site just went live and it's about to get hit with tons of traffic, so I need something quick.
I found answers pretty quickly (http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml), but I still need to figure out how to test this online.
/* CSS that's applied when the viewing area's width is 800px or less */
#media screen and (max-width: 800px){
html{
overflow-x:auto !important;
}
body{
overflow-x:auto !important;
}
}
Where does one go to test if this actually works, because testsize.com doesn't show the scrollbars (and I'm not sure if it's their limitation or my own).
Related
Site URL: http://www.midwestcleancomedy.com
Please advise on the best way to present my question and the info you need as I'm a beginner. Here's a codepen I created that just has my custom CSS at the top, and the parent theme CSS which starts at line 252
I've cleared my cache, enlisted WP designers, and they were unable to pinpoint what is going on. Some of my early custom CSS worked, but most of it is being ignored, even if it's at the bottom of my stylesheet with !important as a last resort.
Since this happens many places, I feel like once I find the issue it will hopefully lead to solving others. It's now affecting nearly every change I want to make.
Current issue: Making my site responsive at the mobile width,
#media (min-width:320px) and (max-width: 479px) {
. container .et_header_style_left #logo {
max-width: 80% !important;
float: left;
}
}
Just trying to get the logo on the left and the menu icon on the right, same line, but nothing I try seems to change the logo width or the menu's left padding: 175px.
I had someone look at my style sheet, and it was a mess. I don't know exactly what they did, but they said there were formatting errors everywhere. #media issues abounded. Sorry I can't be much more specific, but basically I had to start a brand new style sheet and make much better notes. Thanks to everyone who responded.
I'm desperately trying to make my site mobile friendly. To complicate things considerably, while I'm familiar with HTML, I'm also a CSS noob.
I wish to force my floating sidebar to stack for smaller resolutions (iPhone, tablets, etc.). If not, I would be willing to hide the darn thing.
I'm positive that I saw info on how to do this, but can't relocate it by searching "sidebar stack on browser resize", "hide sidebar on browser resize" or any variation thereof.
This is a test page I'm using to experiment with.
Use a media query. When the document is smaller than 750px wide:
#media screen and (max-width: 750px) {
aside { display: none; }
article { width: 100%; }
}
You can also find a list of snippets for standard devices here.
If you want mobile friendly UI, you can use Bootstrap's navbar. Here is an example.
I have the below media query
#media only screen and (max-width: 800px) {
.class-something {
padding: 30px;
}
}
The above rule doesn't get applied for resolution 800px width. If i give the max-width as 830px(anything above this), it gets applied.
I am using web developer firefox plugin to check the app in different resolutions.
Why is it not applying the rule when i give the exact resolution? Is it a problem with the plugin i am using to test? Has anyone experienced this problem before?
Seems that in firefox the toolbars width affects the viewport width.
Disable toolbars in firefox for testing, in my case I had to disable nav and bookmarks, but when enabled nav toolbar again (to type another url) the issue wasn't present and resizing the window works as expected.
I'm having an issue with media queries. I'm using the Responsive View Tool in Firefox to view my site at 480px. But it seems to be firing at 430px and not 480px. I've no idea why.
/*
* Gird layout for devices above 480px.
*/
#media screen and (min-width: 480px) {
html {
background: red;
}
}
I have no other code or media queries so I'm wondering if this is some type of bug.
Screenshot:
You won't believe this, and I am posting this incase anyone happens to have the same problem.
At some point I had made my browser text smaller using (CMD and - on the Mac). It was breaking in the correct width but because my font size was smaller it was throwing me off. It was actually breaking in the correct place, but the Responsive Viewer wasn't displaying the width based on my font size.
If you inspect the computed witdh of the html element after setting the responsive tool to 480 you will get a value of 465. set overflow: hidden; on the html element then check again and you get 480.
Firefox takes the width of the scrollbars into account when calculating viewport width, as opposed to Chrome which overlays the scrollbars.
check your zoom, if you have zoomed in, width will be off. ctrl+0 to reset zoom to default 100%
I realy need your help as this is driving me nuts.
On my website www.markett.nl I have 2 divs floating next to eachother.
All the browsers seem to load nicely, accapt when I view the website on the iPad the div is pushed downwards as if its wide is to large.
I have read it mayby has to do with some css padding issues, but I believe padding is not used on these div elements. I use firebug for insight in css but cant solve my problem.
I've uploaded 2 images so you can see what the probem is:
Image 1 as is loads on most browsers.
Image2 will show the problem.
You have #media queries in your CSS file for responsive layout. Find this in your CSS (around line 2640):
#media (max-width: 800px) {
/* Simplify the basic layout */
#main #content {
margin: 0 7.6%;
width: auto;
}
and remove the margin attribute from that rule. Also you don't have to test on iPad the result - you can simply change the width of your browser window.
You're using media queries to do different things depending on the width of the viewport.
If you load your site in any browser (I'm testing with Firefox, for example) and reduce the width of the window enough, the same problem happens.
To fix it, follow Zoltan Toth's instructions.