Jump to content

Homepage Image not optimized on Mobile

Recommended Posts

5 hours ago, Omnivorous_Adam said:

Site URL: https://www.omnivorousadam.com/

Site URL: https://www.omnivorousadam.com/

Hi there,

Password to website: WaffleMan123

Currently my Homepage Banners are not optimized (doesn't fit whole image) on Mobile for some reason. Can someone let me know how to fix this issue?

Screen Shot 2021-02-19 at 6.36.03 PM.png

is it because the image ratio that make the image cropped on mobile, I can suggest use a different background image to replace it on mobile (using custom css)

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 2/20/2021 at 7:36 AM, Omnivorous_Adam said:

Site URL: https://www.omnivorousadam.com/

Site URL: https://www.omnivorousadam.com/

Hi there,

Password to website: WaffleMan123

Currently my Homepage Banners are not optimized (doesn't fit whole image) on Mobile for some reason. Can someone let me know how to fix this issue?

Screen Shot 2021-02-19 at 6.36.03 PM.png

Add to Design > Custom CSS

/* resize home banner */
@media screen and (max-width:767px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
section#homepage-banner {
    min-height: unset !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
On 2/23/2021 at 1:57 AM, Omnivorous_Adam said:

@tuanphanThank you so much! It looks so much better, but there is still an issueu.
See new screenshot. A gray bar appears on mobile.

Screen Shot 2021-02-22 at 12.56.53 PM.png

Try change this

section#homepage-banner {
    min-height: unset !important;
}

to this

section#homepage-banner {
    min-height: unset !important;
	height: 200px !important;
}

You can adjust number 200

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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.