Jump to content

Replacing home page image in CSS to scale properly on mobile

Recommended Posts

Site URL: http://www.ghostvintage.com

Hi Squarespace community!


I would love some help in figuring out my final issue with my website that I'm trying to tweak. 

The existing image on the main page is not the correct orientation and dimensions to scale effectively down to mobile, the texts becomes tiny. I'd love to be able to have that image replaced with a properly scaled image on mobile.

Is there a CSS code I could potentially use so that when mobile users view the site it shows a properly scaled image (replaces with a new, separate header that I would create)?

 

 

 

Desktop View.png

Mobile View.png

Link to comment
  • Replies 3
  • Created
  • Last Reply
On 5/8/2020 at 11:59 PM, jessglistening said:

@tuanphan The text is a part of the image, so just trying to figure out if there's a way to replace the image entirely wit ha mobile formatted image for mobile.

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1587826916398_5523 figure {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/artboard-1-.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
div#block-yui_3_17_2_1_1587826916398_5523 figure img {
    visibility: hidden;
}
}

 

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

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.