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

Problem displaying banner image on mobile


Justinproud

Question

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

Link to comment

13 answers to this question

Recommended Posts

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

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

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

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

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

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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

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

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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