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

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

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

Posted Images

Recommended Posts

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 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 post
  • 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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 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>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 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 post
  • 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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 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 post
  • 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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 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 post
  • 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:

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

Hello!

I'm having the same problem with a website I'm building for a client. They have a team photo as their banner image for the HOME page and the TEAM page. We want everyone to be viewable on mobile as well.

the URL is http://www.verbatimpharma.com

I've tried a whole bunch of code snippets in this thread but none of them have worked.

VP-home-banner-desktop.JPG

VP-home-banner-mobile.JPG

VP-team-banner-desktop.JPG

VP-team-banner-mobile.JPG

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