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

Banner Image Won't Resize for Mobile View


TheIDBootCamp

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 comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1

@tiffa Add to Design > Custom CSS

/* resize mobile banner */
@media screen and (max-width:640px) {
.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
.homepage .Parallax-item:first-child figure {
    transform: unset !important;
}
section#nicetomeetyou {
    min-height: unset !important;
    height: 250px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1

@tuanphan thank you! It worked to resize image but now there is a big gap where my text at top of home page is...still fine on desktop but text not showing on mobile and the CMR on the upper left is cut off in the left margin. I attached a screen shot of the mobile view and what the normal desktop looks like. 

Thanks again! 

 

C5BF1304-E9CB-4C98-B739-CAA160E1CE1E.jpeg

D355273C-65DD-4EA7-B8E3-5D48B736697E.jpeg

Link to comment
  • 1
22 hours ago, socialanxietydoctor said:

Hi @tuanphan,

I am having the same issue where my background image looks fine on desktop, but is cutoff on mobile. Tried to use code you posted earlier, but it left a big gray space between the picture and text. Any code to fix this? URL is www.socialanxietydoctor.com

Dr Cabin banner? Add to Design > Custom CSS

/* resize home top mobile banner */
@media screen and (max-width:767px) {
[data-section-id="60ce060627e9d9469bf70cc3"] {
    min-height: unset !important;
    height: 60vh;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...