I have an animation on ipad things go from -200px to 1500px and are hidden in a browser with overflow-x:hidden.
When I look on ipad I can scroll "off screen" and see the hidden items even though the body and html and set to width:100% and height:100%.
How can I fix this in ipad?
You might use media querys for the Ipad Viewport.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
You could try to put the animation in a div that is not wider than the screen. Then apply overflow:hidden; on that div.
Try like this:
html, body {
position:relative;
}
Related
I'm not seeing why max-width: 400px is forcing the image to be 400px on small screens for the following site:
On https://compucademy.net/hypothesis-testing-with-python/
Can anyone explain please, and maybe give me an appropriate #media rule to fix it?
Width is being overridden, for mobile specific you can use
#media screen and (max-width: 768px) {
.... CSS goes here
}
You can also use the "min-width" if its mobile priority application/website.
Hope this help.
I have a website. The content is set to 960px wide and devices that are wider than that see the solid colored body element. I am trying to add a background-image to that body, but I only want it to load on devices that can see the body, so that other devices don't need to waste time loading it if they can't see it.
For example, my viewport meta tag is set to a static 960px (I know it's not recommended), so phones won't be able to see the body because they are automatically scaled to 960px in width.
How can I display the background-image on only devices that are more than 960px wide, using the #media in the CSS?
How can I display the background-image on only devices that are more than 960px wide, using the #media in the CSS?
Do you mean this?
body{
background:url('http://mobilemarketingwatch.com/wp-content/uploads/2016/01/Is-Google-Searching-for-the-Next-Big-Thing1.jpg');
}
#media only screen and (max-width: 960px) {
body{
background:none;
}
}
DEMO
If you resize your browser the body background image will gone.
I'm using CSS #media to adjust my website depending on the screen resolution
Whether i switch to a resolution with the height of 768 or 720 it will still act as if i'm my screen resolution has a height of 720px
.group-container{
min-width:1210px;
max-width:70000px;
width:1210px;
margin-left:2.5%;
height:87%;
margin-top:1%;
}
#media only screen and (max-height: 768px) {
.group-container{
margin-top:150px;
}
}
#media only screen and (max-height: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
For the first media query you should use also a min-height set to 720px and max-height set to 768px
And if you try to use (max-width: ...px) instead?
#media only screen and (max-width: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
This way you won't rely on your height, but the width of the window it's being displayed on. example:
your resolution is 900x1600.
Resizing the height of the window wouldn't have much effect. If you where to use max-width, that way if you resize to 600x1200 for example, it would have more effect.
EDIT: The reason why I think you should use is, the height doesn't really matter when it comes to responsive design. The height might change but it will always be scrollable, so using the height will have little to no effect.
The width of the device DOES matter, the width is important when it comes to responsive design (assuming your website isn't horizontally scrollable). It would be better to create query's based on the width of the display, then to rely on height for that matter.
In my CSS
body{
overflow-y:scroll;
min-width: 1024px;
}
What have I expected? That if screen size is less than 1024px, then there will be gorizontal scrollbar, and elements won't cover each other (1024px - minimal width, with which my site looks pretty as expected).
But when I test it with some resolution testers, it actually turns out that it doesn't change anything.
Why?
You're setting the min-width of the body. That means that the width can't be smaller than your min-width.
You probably want to use media querys.
Like for example:
CSS
#media only screen and (min-width: 1024px) {
body{
overflow-x:scroll; /* horizontal */
/* overflow-y:scroll; */ /* vertical */
}
}
This tells us if the window width is smaller then 1024px, then add an overflow-y:scroll to the body.
For horizontal scroll you shoud use overflow-x:scroll; and not overflow-y.
it adds vertical scroll to the content. here is example if it will help you http://jsfiddle.net/sMtmD/
Is there a way so if a user changes there screen size to less than a certain pixel e.g. 1025px the div will then be scrollable?
I have had a search but I cannot seem to find anything.
Yup
#media only screen and (min-device-width : 1025px) and (max-device-width : 1024px) {
/** STYLES FOR SMALLER SCREENS HERE **/
body { padding:0px; }
}
Im not sure but I feel like it would come automatically as long as scrolling isn't disabled for your div and the position isn't fixed.