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

  • 0
7 hours ago, Time24go said:

Try adding to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-5c05149d575d1f312eb16a23 {
section.Intro.Intro--has-image p, section.Intro.Intro--has-image h3:nth-last-child(3) {
    display: none;
}
}
}

 

Link to post
  • 0

Thank you, tuanphan for your reply and help. I've added in the code but it did not make a difference. I've also tried adding !important to the end of the code but there was no change.

Link to post
  • 0

Hello Taunphan, Maybe you can help me with my issue.

I have the same issue where ALL my images do not resize to mobile mode. When I tried one of the codes in this thread, it helped but created a big gap in between the rest of the content on my home page, etc. Also on my about and projects section. Every spacing does not scale properly with the images.

I also have a problem with the gallery images on my projects. They are not responsive to the mobile mode either. 

I tried everything. Hopefully you can help 🤞

 

my website www.hkid.ca

 

Capture.JPG

error.JPG

error2.JPG

Edited by HaniKrich
Link to post
  • 0

@tuanphan

I'm having the same problem. The banner on this page — https://thehenleygroup.com/covid-news — looks fine in desktop, but on mobile it is too long, and doesn't keep to the same size on this page: https://www.thehenleygroup.com/solutions

Can you help? What CSS should I use to keep the banner short on https://thehenleygroup.com/covid-news like it is on https://www.thehenleygroup.com/solutions. Thank you!

 

 

Link to post
  • 0
19 hours ago, jeady013 said:

I tried the code you gave me but the banner images still aren't equally proportioned during my mobile view. Is there a different code I could try? 

url: https://www.intlschooloftheprophets.com

I see you solved with this code?

@media screen and (max-width: 780px) {
    .homepage section:first-child {
        min-height:unset !important;
        height: 80vh
    }
}

I think 767 is better

Link to post
  • 0
On 6/24/2020 at 5:53 AM, ROleary said:

Hi! I need help getting the mobile banner to appear wider as it's cutting off some of the lettering. 

Any help would be appreciated!

rolearybooks.com

Thanks!

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-5ea9f04b8645947705e66c45 {
.Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: 35vh !important;
}
.Parallax-item:first-child {
    height: 35vh !important;
}
.Parallax-item:first-child figure {
    bottom: 0 !important;
    transform: unset !important;
}
section#home {
    height: 35vh !important;
    min-height: auto !important;
}
}
}

 

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

hi @tuanphan  I can't seem to get my mobile banner to resize.  The banner on desktop fits fine but the letters get chopped off. 

https://www.corinnetouseyphotography.com/

thank you!

 

 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage div#page-thumb img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
.homepage div#banner-area-wrapper {
    height: 25vh;
}
}

 

Link to post
  • 0
5 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:640px) {
.homepage div#page-thumb img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
.homepage div#banner-area-wrapper {
    height: 25vh;
}
}

 

You are wonderful! Thank you so much, that worked!

Link to post
  • 0
18 hours ago, tuanphan said:

@media screen and (max-width:640px) { body#collection-5ea9f04b8645947705e66c45 { .Parallax-item:first-child img { width: 100% !important; left: 0 !important; height: 35vh !important; } .Parallax-item:first-child { height: 35vh !important; } .Parallax-item:first-child figure { bottom: 0 !important; transform: unset !important; } section#home { height: 35vh !important; min-height: auto !important; } } }

It worked perfectly! Thank you so much 🙂

Link to post
  • 0
On 6/22/2020 at 1:03 PM, EBCE said:

I've got the exact same issue with the gallery slideshow reel i set up on my page. any help would be appreciated!

 

 

https://ebce.ca/casa

Capture.PNG

Capture1.PNG

@tuanphan hey sorry to bother you but do you think you could help me out with the code? site is ebce.ca

Link to post
  • 0
16 hours ago, EBCE said:

@tuanphan hey sorry to bother you but do you think you could help me out with the code? site is ebce.ca

The link doesn't exist

Link to post
  • 0

@tuanphan I am having the same issue with my banner not resizing for mobile, website is drfloydrx.com banner at the top (tea) is not resizing but most importantly, at the very bottom on the newsletter sign up banner is not resizing. ive tried this code, not working

 

@media screen and (max-width:640px) {
.homepage .section-background img {
    width: 100% !important;
    height: auto !important;
}
}
Link to post
  • 0
5 hours ago, caz100 said:

Hi I am also having trouble resizing my banner image for a mobile. 
I have used some of the CSS here and is does make the image fit, but then I am left with a big white space underneath it!

any help would be great. Thanks

my site https://www.rocstudio.co.uk

 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage {
.Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
.Parallax-item:first-child {
    height: 35vh !important;
}
.Parallax-item:first-child figure {
    bottom: 0 !important;
    transform: unset !important;
    height: 35vh;
}
section#new-page {
    height: 35vh !important;
    min-height: auto !important;
} 
 section#new-page .spacer-block {
    display: none;
} 
}
}

 

Link to post
  • 0

hello @tuanphan - apologies but I'm having the same issue as all the people above. I would really appreciate it if you could help me out. I just want to force the banner video on the homepage to appear at 100% width on mobile (no cropping). 

Link and password below:

https://endive-swordfish-kjf7.squarespace.com

password: temppassword2020

Thank you in advance!!

Edited by samasplen
Link to post
  • 0
On 6/29/2020 at 4:24 PM, samasplen said:

hello @tuanphan - apologies but I'm having the same issue as all the people above. I would really appreciate it if you could help me out. I just want to force the banner video on the homepage to appear at 100% width on mobile (no cropping). 

Link and password below:

https://endive-swordfish-kjf7.squarespace.com

password: temppassword2020

Thank you in advance!!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage #page section:first-child {
	min-height: 40vh !important;
}
}

 

Link to post
  • 0
11 hours ago, MHOLLAND said:

Hello! 

I too am having this issue where the banner looks great on desktop but then is cut off on mobile.

I have tried all of the above Custom CSS. This website has a banner that is image/video on every page.

 

Try adding to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
    #page section:first-child {
    	min-height: 30vh !important;
      	height: 40vh !important;
    }
  }

you can adjust 40vh

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