I've got a fixed menu - http://mylandscapes.splintderteal.com/
menu isn't scrolling horizontally - problem occurs when page is zoomed in or viewed on a mobile
how can I fix that?
position: fixed as the name says fixes the position in the window. If it does not respect vertical scrolling, it of course does not respect horizontal scrolling too. You should use media queries:
#media screen and (max-width: 980px)
{
#header
{
position: absolute;
}
}
That's just a hint. You may need to customize or extend this code. But it gives you a starting point.
You can easily achieve your desired through CSS3 Media Queries in your css..
Actually you didn't use Media Queries that's why your menu is not adjusting according to screen sizes....
And for how to use CSS3 Media Queries read the mentioned below articles they are really helpful.
Media Queries for Standard Devices
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
Related
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'm using the following code in order to show certain element only in big screens:
.forkit, .forkit-curtain {
display: none;
}
#media only screen and (min-width: 1400px) {
.forkit, .forkit-curtain {
display: block;
}
}
But when the screen is 1300px the element is shown and only is hidden when the width is 1250px so the media query min-width 1400px works also for screen sizes a bit lower what is a bad behaviour.
I don't know why the media query is getting a bad screen size. What is happening?
Thanks
i suspect the difference is not 50px but something closer to 20px. What's more, I suspect that it does not react the same way for all browsers. Try comparing the break points for Chrome and for Firefox. If they are off about 20px, the difference is because:
IE, Firefox and Opera follow the W3C spec of including the scrollbar width in the media query, where Webkit browsers do not.
So when you ask the browser to trigger at 1400px, it will trigger at approx 1383px in most browsers.
You can't force the browsers to treat it the same at the moment, so the best option is to modify your layout so that it is not so tightly tied to the widths in your media queries (add extra margin). With such a layout, when it triggers a few pixels early or late, it won't make as much of a difference.
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).
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.