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

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 294
  • 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
On 6/12/2020 at 9:28 PM, jeady013 said:

I need help with my banner images as well site : https://www.intlschooloftheprophets.com

Add to Home > Design > Custom CSS

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

 

On 6/12/2020 at 10:18 PM, Time24go said:

Haven’t solved mine as of yet.

 

Can you share link to your site?

 

On 6/11/2020 at 5:05 AM, dmurphy00000 said:

Hi I'm having similar troubles.

 

I've set up a banner slideshow and the images wont resize to fit properly when viewed on mobile. Do you know how I could change that?

Thank you!!

 

my site-https://rhombus-fiddle-yn69.squarespace.com/

 

Add to Home > Design > Custom CSS

@media screen and (max-width: 767px) {
[data-section-id="5eda548d491eb942da7365f7"] .gallery-fullscreen-slideshow[data-width="full-bleed"] {
        height:40vh !important;
    }
}

 

Edited by tuanphan

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

-- I'm seriously sick. Off some time.

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

 

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

-- I'm seriously sick. Off some time.

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

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

-- I'm seriously sick. Off some time.

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

 

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

-- I'm seriously sick. Off some time.

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

 

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

-- I'm seriously sick. Off some time.

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

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

 

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

 

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

-- I'm seriously sick. Off some time.

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

 

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

-- I'm seriously sick. Off some time.

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