Jump to content

Resize banner images on mobile (York 7.0)

Recommended Posts

Site URL: https://www.themkcreatives.com/about

Hey guys!

I just launched my site and I still have a few things that I can't get done.

 

I tried several CSS I found on the forums trying to adapt them to my site , but can't get it right!

I'd like my banners to be some sort of 16:9 when on mobile, rather than the whole 4:5 size as it takes almost the whole phone screen. This will have to be on all pages with banners except the homepage though. You can see an example on this page https://www.themkcreatives.com/about and all other pages like this one too https://www.themkcreatives.com/greece.

Ideally, at the same time, the images would also need to scale with the container to show the content on mobile not cropped.

Thank you guys!

 

 

Screenshot 2020-06-25 at 11.32.19.png

Link to comment
  • Replies 2
  • Views 348
  • Created
  • Last Reply
On 6/25/2020 at 1:59 PM, rwp said:

@media screen and (max-width: 999px) {
	.js-page-banner-image {
		height: 100% !important;
	}

	.page-banner-wrapper.page-banner-has-image {
	    height: 75vw !important;
		max-height: 72vh !important;
	}
}

 

Thanks RWP. That works, but some images don't resize correctly and get sort of squeezed into the frame like the one attached

1780378519_Screenshot2020-06-28at14_11_29.thumb.png.a6501719460714c86ada10d53e14b53b.png

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.