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

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 362
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

Posted Images

Recommended Posts

  • 1

I tried using some of the coding you guys provided above but nothing worked... can someone help me with my banner? ( i have multiple photos on the banner) website is fwe.ca

 

 

 

image.png.5b8f0c1a905532062efc7e3d8d8b979b.png

 

image.png

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

 

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

--- Happy New Year

Link to post
  • 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 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 detail answer. / How to Setup Password & Share URL

--- Happy New Year

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 detail answer. / How to Setup Password & Share URL

--- Happy New Year

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

Create an account or sign in to comment

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


×
×
  • Create New...