I'm currently working on a website and I have one particular issue with responsiveness.
The website looked very good and resized appropriately when I changed the size of the browser window from maximum to minimum. However I did get an issue on mobile devices where the website was cut off at the right and the title text was overflowing. I managed to reproduce the issue in the browser as well by making the window as small as possible and then zooming in until I got a horizontal scroll bar. Scrolling all the way to the right then revealed the issue.
I tried to fix it for mobile devices by including the following code in my CSS:
#media(max-width: 700px) {
html,body {
width: 150%;
height: 200%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
}
It did solve the overflow issue but now after initial loading the page on mobile is zoomed in and I have to double tap to reset the zoom. I was unable to find a solution for this issue to reset the zoom automatically.
Also shrinking the browser window on PC with this code in place cuts off the website at the right side when the media query is executed.
Here is the code together with a way to look at the issues. If you want to see the original issue you only need to delete the media query from the top of the CSS file.
https://codepen.io/lapierre-bernard-david/pen/NWqZMqd
I'm very new to web development so I'm pretty sure what I came up with is more of a hack than an actual solution. I'd be very happy about any advice.
As I've seen many people with a similar issue, I did include the often suggested viewport header of course, and I have no fixed width anywhere in my code.
Related
I'm very new to HTML/CSS and trying to practice by making some basic sites.
The desktop version of my site looks good, and when I inspect it in Chrome the mobile version looks good, but when I actually use a mobile device, the images aren't stretching to resize for the viewport. By trying to fix it I keep breaking it further, so I'd really appreciate some help.
I tried to search for this problem but the solutions I found told me to use background-size: cover which is what I'm already doing. I tried to change the body to body {width: 100vw; height: 100vh;} and also the advice here about taking out the height: 90vh and leaving background cover and width, but that reduced it to the size of the div line, which is too small. I feel that this solution here with media queries is close but I can't figure it out.
Here is the repo and here is the GitHub page where you can view it. Thank you in advance!
Desktop:
Inspector:
Mobile:
try to put background-position:center center;
anyway be careful with a fixed background, it causes huge problems with mobile devices performance
As far as can tell it's impossible to use the max-height media query usefully because of Chrome 67 on iOS.
The issue is that as the users scroll up and down Chrome adds and removes the address bar. As it does this it changes the max-height which means that if you're using a max-height media query to change the height of something than anything below the something will jump when the users scrolls up or down.
For example I have an image that's 300x500 but on a short screen I wanted to make sure it didn't fill the screen so I have something like this
#media (max-height: 700px) {
img {
max-height: 400px;
}
}
Effectively "if the screen is short make the image short too"
But what happens on Chrome iOS is that on iPhone X as it adds and removes the address bar it triggers the media query
If there's a few images on the page and the user is near the bottom as they scroll up and down the page will jump half a screen or more.
Note that Safari on iOS doesn't have this issue even though it also makes the address bar appear and disappear.
I can choose some other max-height to trigger on but of course the same thing could happen on any phone of any height so it's looking like using max-height to trigger things is hopelessly broken?
Is there a way to achieve what I'm trying to do?
turns out this is a bug in iOS WkWebView and/or Chrome iOS. The bug is tracked here so if they manage to fix it then I guess the problem is solved.
https://bugs.chromium.org/p/chromium/issues/detail?id=720048
I've been developing a large single page application and in the process have run across a series of rendering artifacts, all of which are specific to chrome. My version of chrome is the most up to date as of this post: Version 39.0.2171.95 (64-bit). Both of these only happen on my macbook pro retina monitor, if I move the window either partially or fully to another monitor, the part that is on that monitor no longer shows the artifact (after chrome repaints) Such a first world problem I know...
My gut is telling me that if I tweak a certain CSS property or go about something slightly different, I can avoid these issues, but everything I've tried has failed. So I look to you wise members of the stack community, gather 'round and hearken to my tales:
First Artifact: Simple hide show fails hard in a seemingly random but highly reproducible way.
Check these three images, one is not like the other!
Each little icon at the top hides or shows a different div. They're all equivalent, just show a different number of those traffic related icons. The middle one will not show up only when i first click the left one (one with all the cars). I think it has to do with the fact that the one with all the cars has a scroll bar. If I then go into chrome inspector and like check or uncheck pretty much any property about it, chrome repaints it just fine. Again this all works on a different monitor/literally any other browser (including ie8) so it's not some dumb coding bug.
Second Artifact: When I scroll, a fixed div at the bottom of my page gets cut and moves with the page.
Notice that the blue bar gets cut! The blue bar has CSS as follows:
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
border: 1px solid #777777;
background-color: #e5f1f8;
z-index: 15;
It doesn't even get cut right where there is some sort of divider in the html. There is no element at at the line of the cut, the only nearby element is the white box (and there's no like padding or margin from that white box.. it's literally getting cut randomly in space)
Any help would be appreciated. This is a huge pain when all we have to demo is our retina screens.
Just had someone else on SO with issues getting elements to render correctly on Chrome with a Retina display too: How can I remove the single pixel space between these elements on retina displays?
It looks like Chrome on a Retina display may have some rendering engine issues when it comes to rendering page elements. You can confirm whether its an Engine issue by seeing if the same issue occurs in the latest version of Opera, as it uses the same Blink rendering engine as Chrome (separate fork from Webkit that Safari uses).
If its an engine issue, you may be limited in your options to fix the issue until Google releases a fix. Otherwise there may be a mad genius on here who can work around the problem.
Best of luck :)
As for the position fixed bar try editing the css to this
position: fixed;
bottom: 0px;
width:100%; /* or whatever your width is */
height:50px; /* or whatever your height is */
border: 1px solid #777777;
background-color: #e5f1f8;
z-index: 15;
As for the display problem, if it works fine on other webkit browsers that usually indicate that there is an issue with the browser itself and you can't do anything about it except maybe make a rule for the screen size that is having the display issue, to show the website or app in a different style or maybe zoom in or out?
Anyways best of luck with your problem
I have a problem that I believe is a quick solution... I simply can't figure it out myself, however, and a quick run through search didn't help me either.
Basically, the only real issue I'm having I'd like to address is the logo (SERVICE FIRST) not shrinking down to fit inside of the width of the site in a mobile form. While the rest of the site responds fairly nicely (as nice as it usually gets) to the responsive web design, the header image doesn't so much as twitch, meaning it runs "off" the edge of the page.
My site is at www.test.servicefirstsvc.com
If you view it on a mobile device, or simply shrink your web broswer window to a phone size, you'll see the problem. Any help? I can paste relevant portions of the responsive CSS if needed.
Just give the img tag a max-width: 100%; via CSS.
You should add a height: auto; as well because of some weird issues with the Safari browser not paying attention to the aspect ratio of the image.
I'm building a site for a client and i've come across an issue where in a webkit browser the images dont fully load. so chrome and safari, on mac and ipad.
http://coatesconstruction.co.uk
I've done some research previously and i found an article suggesting that webkit browsers open multiple connections up per image to download them and i wondered if this couldnt be the issue.
one of the aims with this site was to make the right column fluid, such that if the user resized the browser the image showing grew, which has meant the backend is saving images at 1600px wide and im using width: 100% to make them autosize to the left column.
This means the images are pretty massive on the server, is it anything to do with the size which is stopping chrome and safari from showing them?
It does load the entire image.
You have messed up somewhere in the CSS code and that's why the entire image doesn't show up on Webkit browsers.
Try setting div#col1's height to 656px (or what ever height you want!) and you will see the entire image.
um, the images are loading fine, the issue is that you're cropping them :)
.col1, .col2, .col3 {
overflow: hidden;
}
Since all your images have position:absolute set, they won't force the parent container to get any larger, so your parent is stuck at 124px high.
.leftmenu .col1 {
height: 765px;
}