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

Banner Image Won't Resize for Mobile View


TheIDBootCamp

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 comment

Recommended Posts

  • 0
On 10/6/2020 at 11:36 AM, VoodooDesign said:

Also what is the difference between this method adding it in the headers vs into the css?

Page Header. You need a Business Plan or higher.

If you use code for multiple pages, I usually recommend inserting it in the Page Header, so you can easily find the code in the future.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Add to Page Settings > Advanced > Header

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
7 hours ago, golovemd said:

Tuanphan, I am having the same issue with the image on my Blog page on mobile.  You can see it here:

http://www.extremeelectronics.net/blog-1

 

On the computer, it displays fine, but on mobile, it just shows the LO in BLOG.  If you don't mind helping me with this, I would very much appreciate it.

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
  • 0
On 10/14/2020 at 9:02 PM, anaguineo said:

Hi! I'm having issues with my banner getting cut off on mobile as well. Would love some help.

url is https://www.cestas.com.do/

I see fine. Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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