Banner Image Won't Resize for Mobile View

Hello, 

Our banner artwork appears fine on our site when viewing on a computer screen, but the mobile view does not resize the banner and cuts off the bulk the image versus resizing for the mobil platform. Any tips on why this is happening, and how resolve it? We've found that the majority of site visitors use mobile, and don't want to reduce the impact of the image.

Thanks in advance.

Can you share link to your site?

Hi tuanphan,

My apologies for not linking it: https://www.thecrossleyidbootcamp.com/

Thanks,

Holly

On 12/14/2019 at 12:51 AM, TheIDBootCamp said:

Hi tuanphan,

My apologies for not linking it: https://www.thecrossleyidbootcamp.com/

Thanks,

Holly

Have you solved yet?

No, we have not solved the issue yet.  We think the image needs to be resized, but aren't sure why that's the case. Thanks. 

I'm having the same problem 😞

@tuanphan any idea how to modify this code snippet to only affect the first banner image on an index homepage?

When I use the snippet as-is, it affects all section background images on the homepage index. I only want the first one changed. Do I have to add the block ID or the hash-tagged section name?

Thanks!

19 minutes ago, Upside said:

@tuanphan any idea how to modify this code snippet to only affect the first banner image on an index homepage?

When I use the snippet as-is, it affects all section background images on the homepage index. I only want the first one changed. Do I have to add the block ID or the hash-tagged section name?

 

Thanks!

Can you share link to your site?

https://meals-on-wheels-ls.squarespace.com/ pw: mowls

The changes in 7.1 have totally screwed me up. Apparently they aren't index pages anymore on certain templates.

3 minutes ago, Upside said:

The changes in 7.1 have totally screwed me up. Apparently they aren't index pages anymore on certain templates.

@media screen and (max-width:640px) {
[data-section-id="5e5d461757cae6512002d1c0"] .section-background img {
    width: 100% !important;
    height: auto !important;
}
}

Perfect, thank you @tuanphan!

On 1/5/2020 at 4:01 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage .section-background img {
    width: 100% !important;
    height: auto !important;
}
}

 

Video banners don't play on mobile, too large too slow to load who knows. I use a backup still image.  Here is an example, if you see the mobile on your phone turned either way it will be a very pleasant surprise to me. 

Look at it  on a laptop first. 

https://www.dcmrblueridge.com/

Hello, I am getting a large space underneath my header photo when using the code above

https://articlesofados.com/

7 hours ago, Lisasumthin said:

Hello, I am getting a large space underneath my header photo when using the code above

 

Can you share link to page in screenshot?

Exactly the same issue. The banner image and the 4 subsequent title images don't resize on mobile. On desktop it looks fine. Here's the link to the website - https://www.wildeversegame.com/

On 4/1/2020 at 4:59 AM, tuanphan said:

Can you share link to page in screenshot?

https://articlesofados.com/

On 4/3/2020 at 2:43 AM, Lisasumthin said:

https://articlesofados.com/

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="5e5c9aff118337590dcf052e"] {
    min-height: 40vh !important;
}
}

17 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="5e5c9aff118337590dcf052e"] {
    min-height: 40vh !important;
}
}

Thank you!! it worked.

Im having the same problem with the Foster template.  The hero banner on my homepage will not resize for mobile.  This is a 7.0 template.  Could someone please help me with the custom CSS code for this to fix it?   safonovaparkcity.com

Thanks!

@tuanphan Can you please help me?  I PM'd you also. Thanks!

@tuanphan

I hope you are well during this time.

I've seen your posts/suggestion for adding to custom css for mobile view, but it's not resizing for me.

Would you be able to tell me what I have to modify for the first parallax image to resize for mobile?

Also I'm trying to resize the page's with the images to 2/3 their height and not the full, but nothing I'm trying is working.

This is my website..

www.rudycatwell.com

On 4/9/2020 at 6:16 AM, RUDECAT said:

@tuanphan

I hope you are well during this time.

 

I've seen your posts/suggestion for adding to custom css for mobile view, but it's not resizing for me.

Would you be able to tell me what I have to modify for the first parallax image to resize for mobile?

Also I'm trying to resize the page's with the images to 2/3 their height and not the full, but nothing I'm trying is working.

 

This is my website..

www.rudycatwell.com

 

 

Where image?

Hi guys, having a similar issue here as the other posters... All banners are scaling properly on my site in mobile, except for one! 

I've read through a million articles and posts on here, played with code and am still having trouble. Would anyone be able to have a look for me and see where I'm going wrong!? I just don't have the tech abilities to understand it.

URLs is: https://gopher-mackerel-pen5.squarespace.com/contact
PW: HIP2020!

There is a lot of code in the Custom CSS panel from previous designer building it, not mine btw. 

Thanks in advance!

Jay.