Jump to content

Banner Image Won't Resize for Mobile View

By TheIDBootCamp, in Fonts, colors and images

Go to solution Solved by tuanphan,

Recommended Posts

tuanphan Level 17

tuanphan

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Replies 509
  • Views 64.8k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan
tuanphan

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

tuanphan
tuanphan

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

tuanphan
tuanphan

Remove your code @media screen and (max-width: 640px) { .homepage .section-background img { width:100% !important; height: auto !important } } Add new code /* resize

Posted Images

tuanphan Level 17

tuanphan

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Livia_Sole Level 4

Livia_Sole

Posted
Posted
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 comment
nele Level 1

nele

Posted
Posted (edited)

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 comment
cararuetz Level 1

cararuetz

Posted
Posted

@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 comment
tuanphan Level 17

tuanphan

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
tuanphan Level 17

tuanphan

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
nele Level 1

nele

Posted
Posted
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 comment
tuanphan Level 17

tuanphan

Posted
Posted (edited)
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
tuanphan Level 17

tuanphan

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

}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
CestlaVT Level 1

CestlaVT

Posted
Posted
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 comment
capitaltimberco Level 1

capitaltimberco

Posted
Posted (edited)

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 comment
hilaryparr Level 1

hilaryparr

Posted
Posted

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 comment
tuanphan Level 17

tuanphan

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
tuanphan Level 17

tuanphan

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
tuanphan Level 17

tuanphan

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
tuanphan Level 17

tuanphan

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
capitaltimberco Level 1

capitaltimberco

Posted
Posted
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 comment
tuanphan Level 17

tuanphan

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
capitaltimberco Level 1

capitaltimberco

Posted
Posted (edited)
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 comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources