Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Banner Image Won't Resize for Mobile View


TheIDBootCamp
Go to solution Solved by tuanphan,

Question

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.

IMG_5025.PNG

Screen Shot 2019-12-13 at 11.16.48 AM.png

Link to post
  • Answers 252
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

Remove your code & use this code @media screen and (max-width: 767px) { .homepage #page section:first-child { min-height: unset; height: 30vh; } }   This is a

Posted Images

Recommended Posts

  • 0

Add to Home > Design > Custom CSS

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

@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!

Link to post
  • 0
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?

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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

Edited by Upside
Link to post
  • 0
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;
}
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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;
}
}

 

This Worked for me, except I have a video that shows resized in editing but now has a grey dead space. And video will not not show on actual mobile site. Is there a fix for this? http://TheBrandonAnthony.com

Link to post
  • 0
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?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
On 4/3/2020 at 2:43 AM, Lisasumthin said:

Add to Home > Design > Custom CSS

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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.

 

Link to post
  • 0

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!

 

Edited by BLamprou
Added info
Link to post
  • 0

@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

PNG image.png

Screen Shot 2020-04-08 at 3.45.58 PM.png

Link to post
  • 0
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?

image.thumb.png.1eca10bb4eb63ff8314580885f8cf058.png

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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.

 

Link to post
  • 0
9 hours ago, RAD_Design said:

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.

 

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:640px) {
  .banner-thumbnail-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
  }
</style>

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...