Problem displaying banner image on mobile

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

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

 

 

Hi. What is access password?

Hi tuanphan! It's Brighterdays

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

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

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

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

4. (Tablet – Footer) The same here

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

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

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

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

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

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

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

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?

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

Hi. Like this or?

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.

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?

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.

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