Headline image size (mobile breakpoint)

Site URL: https://www.maksymrewko.com/personalwork/schach

Hi there, looking to reduece the size of headline images on my mobile breakpoint. This is the code I used on another website but it doesnt seem to work on teh exmaple shown. I believe I need to change the .gallery-fullscreen-slidehow to something else?

 @media screen and (max-width:640px) {
    .gallery-fullscreen-slideshow[data-width="full-bleed"] {
        height: 50vh !important;
    }
  }

Any help would be great 

1 hour ago, Maksymrewko said:

Site URL: https://www.maksymrewko.com/personalwork/schach

Hi there, looking to reduece the size of headline images on my mobile breakpoint. This is the code I used on another website but it doesnt seem to work on teh exmaple shown. I believe I need to change the .gallery-fullscreen-slidehow to something else?

 @media screen and (max-width:640px) {
    .gallery-fullscreen-slideshow[data-width="full-bleed"] {
        height: 50vh !important;
    }
  }

Any help would be great 

Try in Home > Design > Custom Css

@media only screen and (max-width: 768px) {
	section[data-section-id="6158ae7037180f62d89a2635"] {
		min-height: 45vh !important;
		img {
			height: auto !important;
			padding-top: 12vh;
			background: #000;
		}
		.section-background {
			height: 45vh;
		}
		.content-wrapper {
			height: 45vh;
			padding-top: 12vh !important;
			padding-bottom: 0 !important;
			position: absolute !important;
			top: 0;
			align-items: center;
		}
	}
}

Support me by pressing 👍 if this useful for you

The result after applying Css

Awesome thankyou

On 10/6/2021 at 12:30 PM, bangank36 said:

Try in Home > Design > Custom Css

@media only screen and (max-width: 768px) {
	section[data-section-id="6158ae7037180f62d89a2635"] {
		min-height: 45vh !important;
		img {
			height: auto !important;
			padding-top: 12vh;
			background: #000;
		}
		.section-background {
			height: 45vh;
		}
		.content-wrapper {
			height: 45vh;
			padding-top: 12vh !important;
			padding-bottom: 0 !important;
			position: absolute !important;
			top: 0;
			align-items: center;
		}
	}
}

Support me by pressing 👍 if this useful for you

Hey there! I'm having the same issue as the OP but this code isn't fixing the image size. Could you take a look? You'll see the background image on the banner is responsive so when the window is reduced the card covers the subject's face. 

Thanks!

On 10/14/2021 at 10:12 AM, travisandrew said:

Hey there! I'm having the same issue as the OP but this code isn't fixing the image size. Could you take a look? You'll see the background image on the banner is responsive so when the window is reduced the card covers the subject's face. 

Thanks!

Can you share site url? We can check easier

57 minutes ago, tuanphan said:

Can you share site url? We can check easier

Of course! Here you go: https://pigeon-maracas-9ccm.squarespace.com/

pw: happy2021

Let me know that you are able to view.

Hey @tuanphan were you able to view the site above? Appreciate any insight you may have!

On 10/15/2021 at 1:14 PM, travisandrew said:

Of course! Here you go: https://pigeon-maracas-9ccm.squarespace.com/

pw: happy2021

Let me know that you are able to view.

You can try

@media only screen and (max-width: 767px) {
  section[data-section-id="615df008e325c12851ac481a"]
    .slideshow-holder
    .slide-media-container
    img {
    height: auto !important;
  }
}

Let me know if it works properly on your site

Support me by pressing 👍 if this useful for you

My testing result

6 hours ago, bangank36 said:

My testing result

 

I think that works! Thank you!