Responsive Images

HTML & CSS
1

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.

Here’s the code:

<div class="pts-container   pts-parallax" style=" background-image:url('/modules/pspagebuilder/views/img/centerblue.png') ; margin:0px 0; padding:270px 0">        
            <div class="pts-inner container">
2

Hi,

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.

3

Thank you very much, however, no matter where I place this code, it doesn’t work. Any other suggestions?.. TY

4

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.

360×640 155 KB

As you can see the bottle image is normal size but scrolls along withe the document which is the best you can expect.

Here is a screenshot of the code I injected via developer tools on the mac.

1023×661 154 KB

Hope that helps but the above confirms that the code I offered will do what I said it would :slight_smile:

5

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…

6

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 :slight_smile:

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.

7

O.K. Let me try again. where exactly do I place?. TY

8

Att the end of the css file.

9

then, I tried that. But, I;ll try again, and get back. TY

10

Hi, can you look now?. TY

11

Where have you added it?

It is not at the end of pagebuilder css. Line 947 finishes with this:

.widget-tags a:hover {
  border-color: rgba(201, 153, 71, 0.2);
  color: #e43636;
}
12

O.K there are two pagebuilders. Let me look.

13

No, there’s only one.

View source shows me it here:

<link rel="stylesheet" href="/themes/pf_strollik/css/modules/pspagebuilder/views/css/pagebuilder.css" type="text/css" media="all" />

The code has not been added to that file. You must be adding it to the wrong file or a local file that has not been uploaded.

14

[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.

1 Like
15

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.

I’m off to bed now :slight_smile:

1 Like
16

Thank you for all your help. Good night…

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.