This question may already have an answer here:
I’ve had two websites now that have been causing me problems. In each site the header stretches 100vh. Each has a background image on the header. My most recent one looks like this. https://imgur.com/a/IOrMGcD But when I switch to an ipad pro witch is the same width it looks like this https://imgur.com/a/tpYRyc9 What’s going on?? I can’t keep running into this issue when I have an image that stretches 100vh. Am I gonna have to account for height?
No it doesn’t.
I believe I already gave you the reason in a previous thread (or maybe it was someone else) but you can’t use background attachment fixed on mobiles or iPads when also combined with background-size cover.
The way these devices construct their viewports means that the fixed attachment covers the whole document and not just the viewport.
The only way to cover a viewport with a fixed positioned image is to use an element that is itself position fixed and then the background attachment doesn’t need to be fixed and background size cover will work
It’s not a solution for multiple fixed images but for cases where there is only one to deal with.
So I took your code and changed it up a little to fit what I was doing and it still is funky?
https://jsfiddle.net/cz90g57a/ type embedded/result at the end of the url to open it up in full screen
then open up devtools and shrink it to an ipad. All the text still gets shrunk to the top while there’s a huge gap at the bottom.
I don’t see a background image in that example? The code you added of mine is redundant in that example.
It looks exactly the same in an ipad as on the desktop window open to the same size!!
You need to choose an image that is suitable for a full screen display and one that can be cropped and made to fit when using background-size:cover. You can’t have an image magically fit all screen shapes while maintaining aspect ratio unless it gets cropped in one direction as is the case when you use the cover value.
Here is a very old example just to show the sort of image you should be using and how it adapts for desktop and for mobile with no problem.
http://www.pmob.co.uk/temp2/template1/index.html
That is a very old demo (ie8+) and not the way I would code it these days but it does show you how the image works well at all sizes no matter the device.
Here’s a codepen using modern methods for a 100% high image.
If you are trying to make an image of words stretch to fill the viewport then you are out of luck as that is not a viable technique.
We also seem to be going over the same ground as this recent thread.
Sorry I don’t know how to put that image on js fiddle cause it’s not in my directory. The only other way I know is copying its link address from pexels.com where I got it a while back. Except I can’t find it. If you look at it on imgur https://imgur.com/a/wxQoJhK you’ll see that it’s more wide than it is tall. I’m also designing my header layout around this image. You’ll see the blue door and the ham nav fills up the left side while the text fills up the right side. What I think is ultimately the problem is that I’m designing my layout around the design of this image. It’s a wide image and when I’m viewing it on an Ipad pro or a device that’s screen is higher than it is wide. Its gonna end up ruining my layout because the layout is designed around that image. Idk what do you think?
I think what I’m gonna do is crop out a smaller piece of that same image(the orange part on the right so the door is no longer part of the design) and change the background image url to the newly cropped image when everything starts to get distorted. I had another site you helped me with where I had the homepage header image stretch to a height: 100vh; and did background-attachment: fixed;
Anyway I’ts finally online. and the images look terrible on mobile(There all zoomed in and blurry) And since you and I both have an Iphone maybe you could help me out with it. I’m just now learning about webkit due to the fact that there’s a lot of styling problems that didn’t come up on my desktop(and I’m using chrome on both desktop and mobile). I posted the original question on stack overflow but didn’t get much help there, as you’ll see here’s the link https://stackoverflow.com/questions/56399257/why-doesnt-my-website-look-the-same-on-the-mobile-chrome-browser-as-the-desktop/56399798?noredirect=1#comment99401756_56399798
I assume that you are here seeking help with a problem because you do not know what you are doing.
Your first goal should be to prove that the code that is posted by someone here (or on Stack Overflow) works as claimed. After you have proven to yourself that it does, then go about “changing it up” to suit your page. If you are unable to incorporate the tested code into your page, explain what happens and leave the bad code on your site for us to see so we can explain what is wrong (either with your code or with our understanding of your intent).
If you post a working page on your site, do not arbitrarily make changes to it while we are working with you. It has to be a back and forth conversation so we can understand the errors and their cause and hopefully explain them in a way that you will understand and accept.
Stay focussed. Solve one problem at a time.
Use CodePen, write a “working page” and include it in your post, or create a complete, working test page on your site that demonstrates the issue and post the URL to that page.
Personally, I will not fetch images from imgur because of the quantity of data mining and advertising “opportunities” that they freely use. I suggest that you find a different image hosting service.
… and there’s your problem in a nutshell 
The web is not an image.
It has no canvas size.
It has no dimensions.
It has all dimensions.
It can be never ending in both directions.
You shouldn’t be making a website based on an image but making a website based on your content and then present it in the best way possible.
You can draw what you like but it may not be feasible for the web. Design and coding must go hand in hand which is where a lot of graphic designers jumped in on the bandwagon sometime ago but came unstuck because they didn’t understand the medium they were working in.
Use images and design methodologies that work for all situations and not just for a picture frame.
Yah I’ll probably just scrap it. Just sucks cause I’m rushing to finish it so I can put it in my portfolio and hopefully get a job asap. I need the money. Could you help me with this other site I was talking about. It’s the first one I’ve ever put online and I’m only now dealing with cross browser issues, though I figured it would look fine on the mobile version of chrome since I built it on chrome. Except I have these Issues.
1.) Button is being pushed out of parent div as well as input styles have changed https://imgur.com/a/ZFjyK6J (I was recommended webkit-appearance: none but this adds a left and right border to my inputs in desktop mode??)
2.)input elements are shown larger here https://imgur.com/a/SiyDCI1
3.)image is really distorted here https://imgur.com/a/5SO3IS9
4.)here’s my github https://github.com/spabsa/kaneConcrete
Also just wanna thank you for your help again Paul, your the only person that’s been a consistent help in my journey as a self taught dev
That’s because you have set a max-height on quote-info and browsers render text and elements at different height so you should always avoid setting a fixed height or max-height. You would get the same issues in all devices and desktop if the user specified a greater font-size than you expected.
Always let contact dictate the height and avoid all these issues in one fell swoop.
.quote-info {
/*max-height: 445px; remove me please */
}
Didn’t notice anything strange in that first section on my iphone.
When styling buttons you need to negate all the defaults or just go with the flow.
You can make sure no defaults are present using the following (non standard css) for certain browsers and then make sure you style everything else.
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
Then you need to style explicitly.
display type (block or inline-block depending on use)
border
padding
margin
width and height if required
line-height
font-size
color
background color
text-alignment
white-space
outline color
border-radius
box-shadow
transition
box-model (box-sizing:border-box is preferred)
hover, focus and active styles
Once you do that then chances are they will look much the same everywhere but of course there are no guarantees with form controls.
You have given the email address a width of 100% and with borders and padding that will be too big to fit. use the box-sizing:border-box property/value to restrict the width to 100% and have padding and borders contained within.
I use the box-sizing border box by default for everything. However you need to do that right at the start and build everything using it.
You can’t use background-attachment fixed and background-size:cover on mobile devices (and ipads) due to the way they have constructed their viewports (as I already mentioned). What happens is that the image gets stretched over the whole height of the document and not the viewport and that’s why its blurred.
I usually remove that background-attachment:fixed for touch devices. Use js to detect touch and then add a class than you can use to modify the css for touch so that it doesn’t get a fixed image but a scrolling one instead.
I used jquery like this:
// detect touch
if ("ontouchstart" in document.documentElement) {
$('html').addClass('no-hover');
$('html').removeClass('has-hover');
} else {
$('html').addClass('has-hover');
}
You can the use that class to modify the styles for touch devices.
See here for a similar vanilla js version.
There is no other fix that i know of unless you have just one single image to deal with as in that demo I showed you earlier. Where you have multiple fixed images for that pseudo parallax effect then there is no solution for touch/mobile devices
Hope that helps
I usually remove that background-attachment:fixed for touch devices.
So I only have to remove background-attachment? Cause When I take off both the image moves position so it would be nice if it was just the one.
also on question 2. Would the solution just be adding the * {box-sizing: border-box;} at the top of the css?
If you remove background attachment fixed then the image will scroll with the document as per normal.
If you just remove the cover value then the image will remain fixed but it will not scale to fit the allocated space properly so you may only see part of the image depending on what the image is and it’s natural size.
As I said above it’s best just to have a non fixed image for mobile and avoid the problem as cover will then work properly. Therefore just remove the fixed value.
It all depends on how you have coded the rest of your site. If you have explicitly sized elements to fit then you may have to go through and change them to the new model.
See the css tricks article for the full implementation details as you need to include pseudo before and after elements explicitly.
I added * {box-sizing: border-box;} to the css. It didn’t change anything in my desktop version of the site. I have yet to see what it looks like on mobile though. 3 more questions though.
1.) Would it be better to just use media queries to remove the background attachment instead of JS?
2.) The red underline is slightly off on mobile version https://imgur.com/a/IyVPOjq
3.) looking at www.kaneconcrete.com in IE gives me even more styling errors. Where can I find a list of css prefixes for this? Is there a way I can avoid using prefixes altogether? The only two styling issues are the textareas have a vertical scroll bar and are a bit bigger. the links keep there underlines. Would I use -ms text-decoration: none or something like that. I just need a reliable source like w3 schools where I can view these browser specific properties
That’s not true as I can see that the inputs now match length on desktop as well. They were slightly out before.
Yes but you’d also affect desktops because you’d need to cater for the largest iPads which are wider than some desktops.
I’m on a mobile at the moment so I can’t look at the code but if you can explain what slightly out means to you then I’ll take a look when I get back.
What makes you think prefixes are the answer to your problems ?
Prefixes were never meant to be in production code and you should avoid using them. There are one or two useful prefixes around but mainly useful for animation and transitions. You don’t really want to go looking for them until you are sure you have coded correctly. I believe there is a list of -webkit prefixes on the Safari reference site but I wouldn’t waste your time going down that route…
Most of your discrepancies will be logic errors or expecting things to be the same cross browser or relying on fragile constructs to achieve a desired look.
I’ll look at the red line issue when I get back to a computer and see what it’s supposed to look like.
That’s because (yet again :)() you are using a magic number to create the gray line. You have used a margin-top of 54px which is magic number:
.footer .inner:before {
display: inline-block;
content: '';
width: 29%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
}
The red line is placed with this code:
.footer h1 span:after {
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
Therefore you are hoping that all browsers will render text, fonts, font-style, leading, half-leading, glyphs and line-spacing exactly the same so that your magic number of 54px is constant. That will never happen.
You should place the gray line in the same way that you did with the red line and base it on the h1 itself and place it absolutely at the bottom:0;
This is rough code but you must make it particular to your case.
h1{position:relative}
h1:before{
content:"";
position:absolute;
bottom:0;
left:0;
right:0;
border-bottom:2px solid green;
}
For some reason you keep setting everything to inline-block and that is why the footer columns do not stretch.
Remove or change them.
.footer div{display:block}
In IE you need to set overflow:auto; to textareas and then you can explicitly apply a height if you need them consistent.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.