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

Banner Image Won't Resize for Mobile View

Recommended Posts

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

Share this post


Link to post

Add to Home > Design > Custom CSS

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

 


COVID-19: Free priority support for all users (29/03 - 30/04).

You can tag me (@tuanphan) or send to my email.

 

Share this post


Link to post

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

Share this post


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

 


COVID-19: Free priority support for all users (29/03 - 30/04).

You can tag me (@tuanphan) or send to my email.

 

Share this post


Link to post
Posted (edited)

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

Edited by Upside

Share this post


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

 


COVID-19: Free priority support for all users (29/03 - 30/04).

You can tag me (@tuanphan) or send to my email.

 

Share this post


Link to post
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

Share this post


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