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
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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


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.