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

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Add to Home > Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="5e5c9aff118337590dcf052e"] { min-height: 40vh !important; } }  

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

Posted Images

Recommended Posts

  • 0
17 hours ago, Livia_Sole said:

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!

 Remove your code & add new code

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

 

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

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! 

Image with effect will be a bit difficult. Add this to Design > Custom CSS

/* resize background image with image effect */
@media screen and (max-width:767px) {
	[data-section-id="5f63a4a8e08a007fe04d9814"] {
.section-background-content {
    z-index: 999;
}
.section-background-content .section-background-canvas {
    visibility: hidden;
}
.section-background img {
    visibility: visible !important;
}
& {
    min-height: unset !important;
    height: 40vh !important;
}
}
}

 

Link to post
  • 0
52 minutes ago, ctan9 said:

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>

Add this to Design > Custom CSS

/* resize mobile banner */
@media screen and (max-width:767px) {
body#collection-5f6501a931c8767609f1ba90 #page section:first-child {
    min-height: 20vh;
    height: 30vh;
    margin-top: 10vh;
}
}

image.thumb.png.1768b2367f9063ca2aba827f0f069ad6.png

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

 Remove your code & add new code


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

 

Hi @tuanphan - I'm afraid these don't quite work either. 

I've adapted what you sent and it's marginally better, but still not working on landscape view on mobile and on tablet.

/* Tablet */
@media screen and (max-width:1100px) {
body.homepage #page section:first-child {
    min-height: 80vh !important;
}
}
/* mobile */
@media screen and (max-width:780px) {
body.homepage #page section:first-child {
    min-height: 40vh !important;
}
}

 

You can see what I mean here: http://www.responsinator.com/?url=periodictableofveg.com.

Any suggestions?

 

Link to post
  • 0

Dear @tuanphan

you are a rockstar! Squarespace should hire you.

Have the same trouble. All my banners are cut off on mobile version. Desktop and tablet view is perfectly fine. Banner are on pages: home, private yoga, chakra course, the art yoga. 

Secondly, is it possible to link two text boxes to stay horizontal next to each other on mobile version? On ever page I use a list style. Please find an example attached. 

Text box: "1"  linked to text box: "private yoga" to stay next to each other.

THANK YOU! Sending you the best.

My URL: https://theartyoga.squarespace.com/config/pages 

 

 

Bildschirmfoto 2021-01-14 um 12.59.07.png

Bildschirmfoto 2021-01-14 um 13.00.47.png

Edited by nele
name tag
Link to post
  • 0
On 1/14/2021 at 5:28 AM, Livia_Sole said:

Hi @tuanphan - I'm afraid these don't quite work either. 

I've adapted what you sent and it's marginally better, but still not working on landscape view on mobile and on tablet.

/* Tablet */
@media screen and (max-width:1100px) {
body.homepage #page section:first-child {
    min-height: 80vh !important;
}
}
/* mobile */
@media screen and (max-width:780px) {
body.homepage #page section:first-child {
    min-height: 40vh !important;
}
}

 

You can see what I mean here: http://www.responsinator.com/?url=periodictableofveg.com.

Any suggestions?

 

This code for landscape

/* mobile */
@media screen and (max-width:767px) and (orientation:landscape) {
body.homepage #page section:first-child {
    min-height: 20vh !important;
	margin-top: 5vh;
}
}

You can adjust 20 & 5

Link to post
  • 0
On 1/15/2021 at 11:59 PM, studiodelphine said:

Hi there! Can anyone, maybe @tuanphan, help me figure out how to fix the banner images on my index pages? Basically all of them aren't resizing for mobile 😞 

 

website is nazirasacasa.squarespace.com

PW: NaziraSacasa

Which banner Can you take a screenshot?

Link to post
  • 0
On 1/14/2021 at 1:03 PM, nele said:

Dear @tuanphan

you are a rockstar! Squarespace should hire you.

Have the same trouble. All my banners are cut off on mobile version. Desktop and tablet view is perfectly fine. Banner are on pages: home, private yoga, chakra course, the art yoga. 

Secondly, is it possible to link two text boxes to stay horizontal next to each other on mobile version? On ever page I use a list style. Please find an example attached. 

Text box: "1"  linked to text box: "private yoga" to stay next to each other.

THANK YOU! Sending you the best.

My URL: https://theartyoga.squarespace.com/config/pages 

 

 

Bildschirmfoto 2021-01-14 um 12.59.07.png

Bildschirmfoto 2021-01-14 um 13.00.47.png

 

Dear @tuanphan 🙂 can you maybe help? Tried all codes you suggested for other pages with the same issue.

Link to post
  • 0
On 1/14/2021 at 7:03 PM, nele said:

Dear @tuanphan

you are a rockstar! Squarespace should hire you.

Have the same trouble. All my banners are cut off on mobile version. Desktop and tablet view is perfectly fine. Banner are on pages: home, private yoga, chakra course, the art yoga. 

Secondly, is it possible to link two text boxes to stay horizontal next to each other on mobile version? On ever page I use a list style. Please find an example attached. 

Text box: "1"  linked to text box: "private yoga" to stay next to each other.

THANK YOU! Sending you the best.

My URL: https://theartyoga.squarespace.com/config/pages 

 

 

Bildschirmfoto 2021-01-14 um 12.59.07.png

Bildschirmfoto 2021-01-14 um 13.00.47.png

With Homepage, add to Home > Design > Custom CSS

/* resize mobile banners */
@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section[id*="en/shooting-01"] {
    min-height: unset !important;
}
body.homepage .Parallax-item:first-child figure {
    transform: unset !important;
    top: 0 !important;
    bottom: 0 !important;
}
}

With Private Yoga, add to Private Yoga Page Settings > Advanced > Header

<style>
  @media screen and (max-width:640px) {
  .Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
    section[id*="en/shooting-03"] {
    min-height: unset !important;
}
  }
</style>

With Online Yoga, add to Online Yoga Page Header

<style>
  @media screen and (max-width:640px) {
  .Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
    section[id*="en/shooting-05"] {
    min-height: unset !important;
}
  }
</style>

Do similar for other pages

Disable Ajax (Home > Design > Site Styles > Ajax Loading) if the code doesn't work.

Edited by tuanphan
Link to post
  • 0
4 hours ago, tuanphan said:

Do similar for other pages

@tuanphan you are a rockstar! THANK you so much!!

Is there a possibility to increase white space between Header and Banner? On Homepage its perfect. On other pages Banner is stuck to the Header. 

Sending best 🙂

 

Bildschirmfoto 2021-01-20 um 13.46.34.png

Bildschirmfoto 2021-01-20 um 13.47.00.png

Link to post
  • 0
On 1/20/2021 at 7:48 PM, nele said:

@tuanphan you are a rockstar! THANK you so much!!

Is there a possibility to increase white space between Header and Banner? On Homepage its perfect. On other pages Banner is stuck to the Header. 

Sending best 🙂

 

Bildschirmfoto 2021-01-20 um 13.46.34.png

Bildschirmfoto 2021-01-20 um 13.47.00.png

Sorry for delay. I'm overloaded.

Add to Design > Custom CSS. Do similar for other pages

@media screen and (max-width:640px) {
section[id*="shooting-07"]>div {
    padding-top: 0 !important;
}

}

 

Link to post
  • 0
On 1/5/2020 at 7: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;
}
}

 

@tuanphan, I'm having the same issue where my banner images are cropped in mobile view, and using this code does resize them but also creates a big gray block of space under the photo in the mobile view--I believe to accommodate the overlay text. Do you have any suggestions for how to circumvent this so there's no gray block? This pertains to both banner images on the homepage. The banner images at the top of the pages under the About section are also cropping in mobile view. I don't understand why the template doesn't automatically account for this ... Thanks for your help!

 https://squid-prism-xj44.squarespace.com/

The password to view the site is EdAnnex

 

Homepage banner without code.PNG

Homepage banner w code.PNG

2nd homepage image.PNG

Link to post
  • 0

I am having the same issues with my page. All gallery images contained on the index page are cropped when viewed on mobile. Have tried copy pasting the different css codes without any results.

Using the Mojave template.

capitaltimbercompany.ca/about-us

Thanks in advance!

 

image.thumb.png.6e04353f7c98d6756df074c672f4924b.png

IMG_AB85E54409BA-1.jpeg

Edited by capitaltimberco
missing important info
Link to post
  • 0

I'm also having this issue. None of our header images are resizing for mobile. I've tried to add the code listed in this feed but it's not working. I'm still new to code and such so I hope I'm doing it right. Should I just add it to the list of other code already in css or delete what is there and place the new code? 

I'm confused! bbcnorman.com

Untitled.png

Untitled1.png

Link to post
  • 0
On 1/27/2021 at 7:55 AM, CestlaVT said:

@tuanphan, I'm having the same issue where my banner images are cropped in mobile view, and using this code does resize them but also creates a big gray block of space under the photo in the mobile view--I believe to accommodate the overlay text. Do you have any suggestions for how to circumvent this so there's no gray block? This pertains to both banner images on the homepage. The banner images at the top of the pages under the About section are also cropping in mobile view. I don't understand why the template doesn't automatically account for this ... Thanks for your help!

 https://squid-prism-xj44.squarespace.com/

The password to view the site is EdAnnex

 

Homepage banner without code.PNG

Homepage banner w code.PNG

2nd homepage image.PNG

Remove your code

@media screen and (max-width: 640px) {
    .homepage .section-background img {
        width:100% !important;
        height: auto !important
    }
}

Add new code

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

 

Link to post
  • 0
On 1/28/2021 at 1:15 PM, capitaltimberco said:

I am having the same issues with my page. All gallery images contained on the index page are cropped when viewed on mobile. Have tried copy pasting the different css codes without any results.

Using the Mojave template.

capitaltimbercompany.ca/about-us

Thanks in advance!

 

image.thumb.png.6e04353f7c98d6756df074c672f4924b.png

IMG_AB85E54409BA-1.jpeg

Add to Design > Custom CSS

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

 

Link to post
  • 0
On 1/29/2021 at 8:18 AM, hilaryparr said:

I'm also having this issue. None of our header images are resizing for mobile. I've tried to add the code listed in this feed but it's not working. I'm still new to code and such so I hope I'm doing it right. Should I just add it to the list of other code already in css or delete what is there and place the new code? 

I'm confused! bbcnorman.com

Untitled.png

Untitled1.png

Hi. You mean slider? Add to Design > Custom CSS

/* resize mobile slide */
@media screen and (max-width:767px) {
body.homepage .gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

 

Link to post
  • 0

Hello - I'm having the same issue as everyone else - are you able to help me with the code please?

The page is https://www.weareomm.com/omm-academy

Showing perfectly on desktop, but cuts one of us out on mobile. 

www.weareomm.com_omm-academy.png

IMG_2390.PNG

Link to post
  • 0
On 2/3/2021 at 6:33 PM, SarahCheese said:

Hello - I'm having the same issue as everyone else - are you able to help me with the code please?

The page is https://www.weareomm.com/omm-academy

Showing perfectly on desktop, but cuts one of us out on mobile. 

www.weareomm.com_omm-academy.png

IMG_2390.PNG

Add to Design > Custom CSS

/* resize mobile banner */
@media screen and (max-width:767px) {
body#collection-600c1456d3c69c50b9c6c8ff #page {
section:first-child {
    min-height: 10vh !important;
    height: 30vh;
}
section:first-child * {
    font-size: 30px;
}
a.sqs-block-button-element--medium.sqs-block-button-element {
    font-size: 16px !important;
    padding: 10px 20px;
    position: relative;
    top: -30px;
}
}
}

image.thumb.png.828d5ceca3680d9164b4567ee60daff5.png

Link to post
  • 0
On 2/3/2021 at 1:52 AM, tuanphan said:

Add to Design > Custom CSS


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

 

Thank you!!!

I just tried this today and it fixed the the first image on the "About" page but as I scroll down the other images are still cropped as well as the images on my other pages. Any additional help would be greatly appreciated!

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

Thank you!!!

I just tried this today and it fixed the the first image on the "About" page but as I scroll down the other images are still cropped as well as the images on my other pages. Any additional help would be greatly appreciated!

Above code work for 1 image only.

Which image/which page do you want to solve?

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

Above code work for 1 image only.

Which image/which page do you want to solve?

Thanks!

On the "About us" page there are 2 more images as you scroll down.

On the "Arboriculture" page the sliding gallery at the top of the page is cropped as well as on the "saw-milling" and "contact" page.

Thanks for all the help!

arb.thumb.PNG.bd718779039b6b62b250f3b57267be87.PNG

boules.PNG

contact.PNG

owners.PNG

sawmill.PNG

Edited by capitaltimberco
Link to post
  • 0

Site URL: http://charlielangton.com

Hi @tuanphan,

I have been having the same problem os most people here. I have tried 10 codes posted here before but none fix the problem on my website. Could someone please help? I already deleted most of the footer with my boyfriend's infos thinking it would fix it, but it didn't, sadly. This white blank space is really bothering us.

Thank you very much in advance,

Erika

Screenshot 2021-02-09 at 10.50.18.png

Screenshot 2021-02-09 at 10.50.35.png

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