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
On 12/25/2020 at 1:47 AM, Jaschahal said:

Hi @tuanphan

Like Didde above I've seen that you've been able to help other with these issues so I'm hoping you can do the same for me. 

Our websites banner size is off on both desktop, and mobile and I can't figure out why. The dimensions are following the suggested width guidelines of between 1500-2500px.

This is the webpage for your reference: https://www.pearlonking.com/shop-skinceuticals

This banner will only be present on this page. I hope you're able to help! Thank you

Hi. I don't see banner? https://www.pearlonking.com/shop-skinceuticals

Link to post
  • 0
On 12/22/2020 at 10:32 PM, Didde said:

Hi @tuanphan

I can see that you've helped many others. I have some difficulty finding the right code, for at webpage im working on. 

When it's used on mobile the banner picture doesn't resize. I have tried some of the code you've written here, but when used, the text on the other pages get smushed together. 

 

The resizing is only needed on one page, but in all 3 languages. Can you help me?

The URL is: 

English: https://www.waytothenations.org/the-story-behind

Italian: https://www.waytothenations.org/la-nostra-storia

Portuguese: https://www.waytothenations.org/nossa-historia

 

Thanks in advance :)

Add to Page Settings > Advanced > Header

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

 

Link to post
  • 0

Wow you rock!   I need to learn more about the "first child" element as I keep seeing it referenced in Square Space CSS.  The image displays so much better now, really appreciate your help the code worked perfectly!   I almost replied to ask about the empty margin space up top, but once I changed margin-top to 0 it was exactly like I wanted!  🙂    Attached a before and after.    Hopefully there's no pitfalls of me changing to a zero margin.

Now I'm going to find some info about the SquareSpace child elements.   Clearly not using them to their full potential!   

resize-banner-final.jpg

Link to post
  • 0
1 hour ago, Summit227 said:

Wow you rock!   I need to learn more about the "first child" element as I keep seeing it referenced in Square Space CSS.  The image displays so much better now, really appreciate your help the code worked perfectly!   I almost replied to ask about the empty margin space up top, but once I changed margin-top to 0 it was exactly like I wanted!  🙂    Attached a before and after.    Hopefully there's no pitfalls of me changing to a zero margin.

Now I'm going to find some info about the SquareSpace child elements.   Clearly not using them to their full potential!   

resize-banner-final.jpg

Each section on the page, top to bottom, has an ordinal number.

#page section:first-child or #page section:nth-child(1)

nth-child(2)

nth-child(3)

or if you want to target many sections, use nth-child(n+2) or nth-child(2n+1) or...

It can also be applied to many other elements, eg items in navigation, icons in social blocks ..

Link to post
  • 0
On 1/4/2021 at 2:56 AM, CarmenM said:

Hi @tuanphanI am having the same issue! My site is http://www.carmenkma.com.

Thank you in advance!

Screen Shot 2021-01-03 at 2.55.52 PM.png

Try adding to Design > custom CSS

/* resize mobile banners */
@media screen and (max-width:767px) {
body.homepage .Parallax-item:nth-child(2) img, body.homepage .Parallax-item:nth-child(3) img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
body.homepage .Parallax-item:nth-child(2), body.homepage .Parallax-item:nth-child(3) {
    height: 200px !important;
}
body.homepage .Parallax-item:nth-child(2) figure, body.homepage .Parallax-item:nth-child(3) figure {
    transform: unset !important;
    bottom: 0 !important;
    top: 0 !important;
}
section#gallery, section#gallery-2 {
    min-height: unset;
    height: 200px;
}
}

 

Link to post
  • 0
35 minutes ago, Tascha1992 said:

Hello, I'm still having issues with the site and the banner not adjusting to use on mobile devices etc. Hope you can help me out. 😊

http://www.goldenmaid.net/

You mean 2 dogs image on cover page?

Link to post
  • 0

Hey, Exactly the same problem here.

A solution on the first page helped resize the image but left the huge white space underneath as the original poster mentioned. None of the many others i've tried have had any resizing effect.

 

It would also be good if the 3 company logo images a little further down resized so they stayed in a line but this is less crucial.

 

www.blackwatermedia.co.uk

 

Very much appreciated, driving me crazy

Link to post
  • 0
2 hours ago, daneview said:

Hey, Exactly the same problem here.

A solution on the first page helped resize the image but left the huge white space underneath as the original poster mentioned. None of the many others i've tried have had any resizing effect.

 

It would also be good if the 3 company logo images a little further down resized so they stayed in a line but this is less crucial.

 

www.blackwatermedia.co.uk

 

Very much appreciated, driving me crazy

You mean Black Water Media UK banner? Add this to Design > Custom CSS

/* resize home mobile banner */
@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 10vh;
}
}

 

Link to post
  • 0
40 minutes ago, ktepper said:

Hi,
 

Is this still possible in 7.2 on a NOT home page? My issue is this page: 

https://www.qcodemedia.com/new-home-flow

Want the image to be full width like on desktop. 

Screen Shot 2021-01-05 at 4.01.25 PM.png

You want text overlay image, or under image? If overlay, it will be very small.

image.thumb.png.11a4880f26098aef98c6b0eea82f0a04.png

Link to post
  • 0
16 minutes ago, CarmenM said:

@tuanphan You are amazing!!! Thank you. I completely removed them since it was still overlaying.

Have you solved yet? If no, you can share url + describe problem again. I will check again.

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

You mean Black Water Media UK banner? Add this to Design > Custom CSS


/* resize home mobile banner */
@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 10vh;
}
}

 

you're a star. thank you!

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

You want text overlay image, or under image? If overlay, it will be very small.

image.thumb.png.11a4880f26098aef98c6b0eea82f0a04.png

I want it overlayed on the image. I guess i'm just confused that when I don't have the text, it resizes the banner image correctly. (attached image) and I'd like to lay the text over the correctly resized image banner.
 

Is there a reason it will become small? vs just stay the same size and be over the wider version of the image banner?

Thank you!!

 

IMG_5328.PNG

IMG_5329.PNG

Link to post
  • 0
On 1/6/2021 at 10:42 PM, ktepper said:

I want it overlayed on the image. I guess i'm just confused that when I don't have the text, it resizes the banner image correctly. (attached image) and I'd like to lay the text over the correctly resized image banner.
 

Is there a reason it will become small? vs just stay the same size and be over the wider version of the image banner?

Thank you!!

 

IMG_5328.PNG

IMG_5329.PNG

I think text under banner will be better.

Or, if you can add 2 banners and design for mobile/desktop, I can also give code to show 1 on desktop, show 1 on mobile

Link to post
  • 0
On 1/11/2021 at 1:46 PM, ctan9 said:

Hello @tuanphan.  I tried the code above but still can't get the banner to resize accurately on mobile. Can you help? Here's my url https://www.calebhetan.com/bose-sleepbuds. Thank you!

 

On 1/11/2021 at 1:46 PM, ctan9 said:

Hello @tuanphan.  I tried the code above but still can't get the banner to resize accurately on mobile. Can you help? Here's my url https://www.calebhetan.com/bose-sleepbuds. Thank you!

Which code did you add?

Link to post
  • 0
On 1/5/2021 at 10:41 PM, tuanphan said:

You mean Black Water Media UK banner? Add this to Design > Custom CSS


/* resize home mobile banner */
@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 10vh;
}
}

 

Hi @tuanphan 

Site URL: https://www.periodictableofveg.com/

I'm having an ongoing issue with the size of my homepage image. I have tried different bits of custom CSS and each seems to generate problems.

My homepage banner image cuts off on some mobile devices and on all tablet devices. I've tried two things:

OPTION 1 (this still has issues on some mobile and tablet devices)

@media screen and (max-width:1200px) {

[data-section-id="5feb9cc97360c774c5ed4562"] {

    min-height: 40vh !important;

}

}

 

OPTION 2 (makes the design responsive, but creates a massive white gap on mobile)

 

@media screen and (max-width:640px) {

[data-section-id="5feb9cc97360c774c5ed4562"] .section-background img {

    width: 100% !important;

    height: auto !important;

}

}

 

Can you help?

Thanks!

Link to post
  • 0

Hi i am having this issue with my headline image on homepage. All fine on computer but on mobile image does not resize. 

Website here: 

https://www.cararuetz.com

 

Thanks! 

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

 

Which code did you add?

I added a code block over the section and added this. 

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

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