Jump to content

Hero image not re-sizing properly on mobile?

Recommended Posts

Site URL: http://nikolsons.com.au/

Hi everyone. The hero image on my site isn't resizing properly when viewing on mobile. It gets cut off as you can see.




I have coded:

@media screen and (max-width:640px) {
.homepage .section-background img {
    width: 100% !important;
    height: auto !important;

into the custom CSS. It works great to change the scale of the hero image but then leaves a huge blank area until the next section on the page.


How do I go about correcting this? Thanks in advance! 🙂

Link to comment

Remove your code & add new code

@media screen and (max-width:767px) {
.homepage #page section:nth-child(2) {
    min-height: unset !important;
    height: 25vh;


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.