Jump to content

Banner Image Won't Resize for Mobile View

Go to solution Solved by tuanphan,

Recommended Posts

1 hour ago, tuanphan said:

I remember I answerd this problem on another post.

Add to Blog Page Settings > Advanced > Header

(If you use Personal Plan > Edit Blog Page > Add Code Block > Paste below code)


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

 

Thanks tuanphan.  I'm not sure why I didn't see the answer before.  I did not get a notification.  In any event, thank you for answering here.  I just applied it and it works.  Thanks so much

Link to comment
  • 2 weeks later...
5 hours ago, FWEVancouver said:

I tried using some of the coding you guys provided above but nothing worked... can someone help me with my banner? ( i have multiple photos on the banner) website is fwe.ca

Can you share site url? We can check easier

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
11 hours ago, vale__s said:

Hey guys, was wondering if you could help me figure this out as well. I'm trying to edit mobile view for the first image on this section of my website https://www.valentinastuppia.com/portraits-fashion/women-belong-in-the-kitchen so that it displays in its full size instead of being cropped.

Thank you in advance!

Edit Page > Add Code Block > paste below code

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

 

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

Hi @tuanphan thank you so much for the code, it worked perfectly!

Would you be able to tell me how to identify the HTML section id for specific images? So I can go and change it myself next time.

For example, I'm trying to resize mobile view for the second image on this page https://www.valentinastuppia.com/documentary 

Would the code be something like:

<style>
  @media screen and (max-width:885px) {
  #page section:id="5f9eae5f76564e30d95a6f65"{
    min-height: 20vh !important;
}
  }
</style>

Thank you in advance!

Link to comment
54 minutes ago, vale__s said:

Hi @tuanphan thank you so much for the code, it worked perfectly!

Would you be able to tell me how to identify the HTML section id for specific images? So I can go and change it myself next time.

For example, I'm trying to resize mobile view for the second image on this page https://www.valentinastuppia.com/documentary 

Would the code be something like:


<style>
  @media screen and (max-width:885px) {
  #page section:id="5f9eae5f76564e30d95a6f65"{
    min-height: 20vh !important;
}
  }
</style>

Thank you in advance!

Use this tool. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

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
9 hours ago, timbm said:

Hi Guys,

I've been trying for so long to resize my first image on my home page too. Every code is use leaves a massive white space underneath the image though on mobile. Would love some help.

https://www.aikoandco.com.au

Thanks! 

Add to Home > Design > Custom CSS

/* resize home banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 20vh !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

Hi @tuanphan - I see you have been helping soo many people with this issue! Can you please help me as well??

Similar to people above, I'd like my banner to stay full width so it can be viewed properly on mobile. When I use the code with width:100% it works, but with that large space. I tried to code you gave to someone else, modifying it for me, but it won't work. I'm definitely not a pro at coding! Any help would be so appreciated. 

My site is still in trial mode, so the URL is:  https://snail-groundhog-6tzy.squarespace.com 

and the password to view it is just: jessbailey 

Thank you sooo much!!

Link to comment
On 11/8/2020 at 3:41 AM, JessBailey said:

Hi @tuanphan - I see you have been helping soo many people with this issue! Can you please help me as well??

Similar to people above, I'd like my banner to stay full width so it can be viewed properly on mobile. When I use the code with width:100% it works, but with that large space. I tried to code you gave to someone else, modifying it for me, but it won't work. I'm definitely not a pro at coding! Any help would be so appreciated. 

My site is still in trial mode, so the URL is:  https://snail-groundhog-6tzy.squarespace.com 

and the password to view it is just: jessbailey 

Thank you sooo much!!

Add to Home > Design > Custom CSS

/* resize mobile slide */
@media screen and (max-width:767px) {
.homepage .gallery-fullscreen-slideshow[data-width="full"] {
    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

I'd love to toss my problem at you too @tuanphan since you've been able to save everyone else so much grief!  I'm having trouble with my blog banner when being viewed from mobile browsers.  It's being cropped badly and showing only the center of the image.  The rest of the website looks fine, it's just the podcast banner image.

My page that's in need of help: https://www.elevategsa.com/podcast

 

Link to comment
13 hours ago, OriginalRod said:

@tuanphan It looks like you've been helping out a few people with this problem.  I ran into the same problem when looking at my site through mobile too.  My banner page isn't resizing for mobile.  Is there a piece of code you could provide which I could use?

Here is a link to my site.  

 

https://turquoise-pike-mgy3.squarespace.com/

I see you solved with this code?

@media screen and (max-width: 767px) {
    .homepage #page section:first-child {
        min-height:unset;
        height: 30vh;
        margin-top: 10vh
    }
}

 

8 hours ago, CHartsell said:

I'd love to toss my problem at you too @tuanphan since you've been able to save everyone else so much grief!  I'm having trouble with my blog banner when being viewed from mobile browsers.  It's being cropped badly and showing only the center of the image.  The rest of the website looks fine, it's just the podcast banner image.

My page that's in need of help: https://www.elevategsa.com/podcast

 

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:640px) {
  .page-banner-wrapper img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
    .page-banner-wrapper.page-banner-has-image {
    height: 75px !Important;
}
  }
</style>

Can you disable auto play? We can check easier

4 hours ago, FWEVancouver said:

 

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
18 hours ago, CHartsell said:

That worked perfect! @tuanphan  Thank you so very much!

 

I see footer text on mobile is right align. Do you want to align left all text in footer?

Also, on Tablet, image is not fullsize. Do you want to fix this?

image.thumb.png.ba47712f492e2055364caa0e00c6663a.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

@tiffa Add to Design > Custom CSS

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

 

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

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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