Hi guys, I’am new at coding and I wanted to know if someone can point me in the right direction. I’m building this website www.athletique.shop, and it looks fine when viewed on a pc, but the images looks huge when viewed in mobile. I know I have to make images responsive but I can’t figure out how to make images which are inline coded responsive. Could someone please help me. I’d like to add width:100%; but, I can’t figure out how to get to it. Firebug says it’s an element.style and the HTML clearly shows it. I’d like to put it in an external CSS. Thanks in advance.
It’s a known problem on mobile when you use background-attachment:fixed and background-size:cover together. They seem to think the viewport is the whole page height (not viewport height) and thus when you ‘cover’ the image is stretched as big as the whole document and not just the viewport.
If you only wanted one fixed background image there is an easy fix but if you want multiple backgrounds then the only fix would be to use background-attachment:scroll and to code the position using js (someone else has a method here biut I feel it is a bit basic and needs to be debounced to avoid harming performance). Of course with multiple images that could be quite complex.
I usually just turn off the fixed positioning for mobile (using background-attachment:scroll instead of fixed) and supply that rule via a device media query (one of the rare occasions I use a device-width query rather than a max-width/min-width query).
e.g.
@media screen and (max-device-width : 1024px) {
.pts-parallax{background-attachment:scroll}
}
Unfortunately they are the only CSS options at the moment. Hopefully the bug/behaviour will eventually get fixed but I wouldn’t hold my breath as it has been around for a long time now. There are some JS plugins that will allow that type of fixed background on mobiles but have not tested them.
I looked through your page builder CSS and the rule is not anywhere to be seen. It is not being applied either by looking at devtools so you have either misplaced it or mis-typed it.
The code was not supposed to make it work like the desktop but to make the image a normal scrolling image of the correct size because as I mentioned it can’t be done for mobile in the same way as desktop.
The media query rule needs to follow after your original rule and I can confirm that it will produce the desired result if you put it in the right place.
Here is a live screenshot of your site once I inject the code live into your side through devtools (this is an iphone connected to the mac via the safari developer tools). This is the actual iphone 5s screenshot.
Wow. I don’t see it like that on my end. The image is supposed to stay put but, if you say it can’t be done the same way as a pc, then it’s fine. But, I just don’t don’t see it like that, and I’m afraid viewers won’t either…
That’s because you haven’t added the code I gave you correctly:slight_smile: It only looks like that for me as I have injected my css locally into your page. I’m not sure you understood that part
If you have added it then point to the live file and line number and I will check if there’s a problem with it.
[quote=“gohomeplustv, post:3, topic:293516”] @media screen and (max-device-width : 1024px) {
.pts-parallax{background-attachment:scroll}
}
[/quote]wow…Thank you very much. It scrolls along but it’s ok. there’s also another pagebuilder for the platform itself. I’m using a premium theme… However, thank you very much.
Yes its working now and that’s how it was supposed to look.
There simply is no other choice unless you go the scripting route.
Fixed background attachments are too costly (in terms of performance) for the browsers to implement. Hopefully they will find a solution in the future but if you google you can see the problem has been evident for about 5 years.