Jump to content

Problem displaying banner image on mobile

Recommended Posts

Posted

Site URL: https://carnation-iguana-b4lt.squarespace.com/

Hi,

Sorry, I know this is a question that gets asked a lot but none of the supplied solutions seem to work for my site, so I would really appreciate your help please!

When I view the banner image in mobile view, I lose half the image (see attached) that shows on the desktop version (see attached).

I've tried adding the various codes that have been suggested, but none seem to change it.

I'm not sure if this has something to do with the fact that there is already code within the Custom CSS field (see attached) - would this be an issue?

Any help you can offer to get this sorted would be greatly appreciated, as I seem to have spent hours trying different solutions!

My site url is: https://carnation-iguana-b4lt.squarespace.com/config

Many thanks.

Justin

 

 

Screenshot 2021-07-20 at 11.49.31.png

Screenshot 2021-07-20 at 11.51.46.png

Screenshot 2021-07-20 at 11.52.15.png

  • Replies 13
  • Views 1.7k
  • Created
  • Last Reply
Posted
21 hours ago, Justinproud said:

Site URL: https://carnation-iguana-b4lt.squarespace.com/

Hi,

Sorry, I know this is a question that gets asked a lot but none of the supplied solutions seem to work for my site, so I would really appreciate your help please!

When I view the banner image in mobile view, I lose half the image (see attached) that shows on the desktop version (see attached).

I've tried adding the various codes that have been suggested, but none seem to change it.

I'm not sure if this has something to do with the fact that there is already code within the Custom CSS field (see attached) - would this be an issue?

Any help you can offer to get this sorted would be greatly appreciated, as I seem to have spent hours trying different solutions!

My site url is: https://carnation-iguana-b4lt.squarespace.com/config

Many thanks.

Justin

 

 

Screenshot 2021-07-20 at 11.49.31.png

Screenshot 2021-07-20 at 11.51.46.png

Screenshot 2021-07-20 at 11.52.15.png

Hi. What is access password?

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!)

Posted
On 7/21/2021 at 5:18 PM, Justinproud said:

Hi tuanphan - I think I've got this sorted now (bought a gig off Fiverrr!). Thanks.

 

Do you need help with these?

Site URL: https://carnation-iguana-b4lt.squarespace.com/
1. (Tablet – Homepage) Background image doesn’t show in full size

carnation-iguana-b4lt.squarespace.com-01

2. ( All devices – Homepage) When i click on “shop now”, it says that “Sorry, we couldn’t find the page you were looking for.”

carnation-iguana-b4lt.squarespace.com-02

3. (Mobile – Footer) Make footer links on the same line

carnation-iguana-b4lt.squarespace.com-03

4. (Tablet – Footer) The same here

carnation-iguana-b4lt.squarespace.com-04

5. ( All devices – About) When i click on Read my blog, it says that “Sorry, we couldn’t find the page you were looking for”

https://carnation-iguana-b4lt.squarespace.com/about

carnation-iguana-b4lt.squarespace.com-05

6. (Tablet – Homepage) Want to increase text width?

carnation-iguana-b4lt.squarespace.com-06

7. (Tablet – Homepage) Move button down (Like on desktop)

carnation-iguana-b4lt.squarespace.com-07

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!)

Posted

@tuanphan I am sure you're tired of answering this same question, but I am having the same issue with the banner on my homepage and not being able to change the focal point on the mobile version. I would like the banner image on the home page to still span the entire height of the device, but would like to shift the focal point to the far right so that the family fills the screen.  

My website is www.nizhoniphotography.com and the password is Password123.  The banner image I'm referring to is the one on the home page.  (though I wouldn't turn down a better solution for the appearance of banners on the Details and Contact pages for mobile/tablets)

Posted
14 hours ago, Nizhoniphoto said:

@tuanphan I am sure you're tired of answering this same question, but I am having the same issue with the banner on my homepage and not being able to change the focal point on the mobile version. I would like the banner image on the home page to still span the entire height of the device, but would like to shift the focal point to the far right so that the family fills the screen.  

My website is www.nizhoniphotography.com and the password is Password123.  The banner image I'm referring to is the one on the home page.  (though I wouldn't turn down a better solution for the appearance of banners on the Details and Contact pages for mobile/tablets)

Hi. Add to Design > Custom CSS > Then save & reload the site

/* resize mobile home top banner image */
@media screen and (max-width:640px) {
section#top-photo figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section#top-photo {
    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!)

Posted
7 hours ago, tuanphan said:

Hi. Add to Design > Custom CSS > Then save & reload the site

/* resize mobile home top banner image */
@media screen and (max-width:640px) {
section#top-photo figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section#top-photo {
    min-height: unset !important;
    height: 250px;
}
}

 

Thank you so much!!! 

  • 2 weeks later...
Posted
On 8/13/2021 at 6:40 PM, jennypetit said:

Hi @tuanphan I have the same issue but i have 2 images in the banner and will like the main image of her to be align in movil with the text on the side but the code im trying is no working and no sure how to move the text in movil to de side

iliafrancis.com

 

Hi. Like this or?

image.thumb.png.ba101922cb2902ca68857c33e240fbc4.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!)

Posted
On 8/14/2021 at 10:58 PM, tuanphan said:

Hi. Like this or?

image.thumb.png.ba101922cb2902ca68857c33e240fbc4.png

ill like just the image of her on movil and the text to be readable on the left i try with setting max width but is no working.

Posted
On 8/18/2021 at 5:21 PM, jennypetit said:

ill like just the image of her on movil and the text to be readable on the left i try with setting max width but is no working.

Hi. I think text under image would be better (on mobile only).

What do you think?

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!)

  • 2 weeks later...
Posted
On 8/31/2021 at 4:06 PM, jennypetit said:

yes that will be great. sorry having some laptop issues and was getting fixed. can we do that text under she just wants the image centered.

Add to Design > Custom CSS > Then save & reload the site

/* resize mobile homepage top banner */
@media screen and (max-width:767px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section#new-page {
    min-height: 70vh;
}
div#page-604a28d04be8451ca8c70c20 {
    position: relative;
    top: 10vh;
}
}

 

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!)

Archived

This topic is now archived and is closed to further replies.

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