Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
MKCreatives

Resize banner images on mobile (York 7.0)

Question

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

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 0
@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;
	}
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...