I worked on small personal site and integrated custom footer widgets. On desktop all is fine, but when load on smartphone, site can be scrolled by finger if move to left. To show better with image from smartphone directly.
How should be (without option to scroll left and right)
and how is now (when swipe with finger to left) is showing white screen. Looks bad.
So my question is how to make the same like here for ex. This is URL where issue is persisted.
Margin-left is 150px in footer, even on small devices, pushing content out of view. Perhaps try the following:
#media only screen and (max-width: 400px) {#footer-sidebar{margin-left:15px!important} }
Seems like this solved my issue:
#media only screen and (max-width: 600px) {
#footer-sidebar1 {float:left!important;
}
#footer-sidebar2 {float:left!important;
}
#footer-sidebar3 {float:left!important;
}
#footer-sidebar {
margin-left:60px!important;
}
}
Related
I am having a problem with Chrome on android mobile phones where an element on my webpage that is 100% width and height is going beyond the viewport?
It seems to work no problem on Android Browser, Firefox for Android, Chrome, Firefox and IE on desktop.
Link to my website: https://www.codesmite.com
If you shrink the page to a mobile size you will see the sidebar menu hides away off screen and a menu button appears to bring it back. When you click the menu button the sidebar transitions across to 100% width and height and the content transitions off the screen to the right. I have overflow:hidden so the content should not be stretching it wrapper but instead leaving the viewport, which works.
For some reason on Chrome for Android the 100% height of the element reaches all the way to the bottom of the page (It isn't fixed anymore, if you scroll down the menu items disappear). The width also stretches beyond the viewport width to the edge of all the overflowing content?
I can't work out what is causing this?
On your <div id='content'> you have
#media only screen and (max-width: 749px), screen and (max-height: 549px)
global.min.css:1#header:target~#content {
left: 100%;
Delete left: 100%; and will work;
Or add CSS: div#content{display:none;} when you open menu, both works for me.
The easiest and most compatible way I know to stretch a static background image and cover the entire screen is:
html { min-height: 100%; }
body
{
background: url('https://i.imgur.com/YSRXO72.jpg') no-repeat center fixed;
background-size: cover;
}
The html { min-height: 100%; } is just in case there is only little content in the html body, this makes sure the background is still stretched over the entire screen.
This works perfectly fine in almost any situation, however if there is more content in the page than fits on the screen, Chrome on Android seems to stretch the background image to cover the entire page rather than the screen.
Live example: https://jsfiddle.net/7cnuytk2/
(note that I also put the -webkit -moz and -o background size settings there for compatibility, but it also works without)
I deliberately took a test background image here with N/E/S/W markers, you should always see 'center' in the center and either the top+bottom or left+right edges.
The background is properly stretched in all cases, except Chrome on Android which stretches it too much. If there is less content in the html part, e.g. just one <h1>test</h1> or something, it works fine on Chrome as well.
Any ideas? Is this a bug in Chrome? Can I work around this without falling back to all sorts of dirty javascript hackery?
In my recent project I am using element that are using percentage heights. It works well on most browsers, however, it creates unwanted behaviour in Chrome Mobile.
In a nutshell - when a user scrolls up, the address bar becomes visible. This changes the height of the screen, which forces the elements to resize. As this happens after the scroll ends, the user sees a "jump" after the scroll stops.
Is there any way to avoid this behaviour and still use elements sized with the viewport percentage?
Yes. You can fix this problem with css. Just use #media queries like that:
#media only screen
and (min-device-width: 320px) //here is your condition for the screen
and (max-device-width: 568px){
.class{
height: 80%;
}
}
You can have as many media-queries as you need. Please note that you may need to edit the min-device-width or/and max-device-width to your needs. Depends on the device.
So I'm setting up something extremely simple: a webpage with two containers and one sign-up form. The containers are otherwise empty, except for a background image set and configured with CSS. I'm trying to get this webpage to respond differently based on screen sizes with media queries, and for my desktop, it works fine; when I resize the page to (for example) anything below 720px, the background images in the containers adjust accordingly and predictably. Here's where the problem begins: it doesn't respond on my mobile device.
I'm using the Galaxy S3 as my starting point. Its resolution is 720x1280px. But it seems as though the media query is having no effect on the mobile browser.
Here's how it appears on desktops and laptops:
#header {
width:100%;
height:100%;
background-color:#000000;
background:url(".../header.jpg") no-repeat fixed;
background-size:contain;
background-position:center;
}
Here's the media query configured for the Samsung Galaxy S3:
#media only screen and (max-height: 720px) and (-webkit-device-pixel-ratio: 2) {
#header {
width:100%;
height:100%;
background-color:#000000;
background:url(".../header.jpg") no-repeat fixed;
background-size:500px auto;
}
}
I have already added the viewport tag to my <head> but I'm still not getting the desired response from my coding. Am I doing something wrong? Should I try for another device as a benchmark?
Max-height is going to correlate with 1280px, not 720px. The default orientation of the Galaxy S3, at least in Chrome, is going to be portrait. Set max-width:720px.
I never use the keyword "only" as I had trouble getting it to work back when media queries were newer. Try a query like this:
#media screen and (max-width: 720px) and (-webkit-device-pixel-ratio: 2) {
}
Or keep it simple and do:
#media screen and (max-width: 720px){
}
BTW it's best practice not to use max-width that often. You want to start styling your smallest screen and use min-width to move up to larger screens.
And it's possible due to the pixel density that Galaxy is reporting a much smaller screen-width. It says 360px here: http://www.mydevice.io
CSS:
body{
margin:0 auto;
background-image:url("someURL"),
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
}
This works fine in modern browsers, the image stays the same when scrolling. On an android tablet however the image doesn't update right away. The image only updates about half a second after you release (move your finger away) and in the mean while the gap is just white.
Is there away to fix this issue or is it just how certain browsers behave?
It is known bug, you can find details here:
http://code.google.com/p/android/issues/detail?id=3301