CSS to set a max height for full width carrousel sections

Store Design
1

Hi Guys

Does anyone know the correct CSS to set a maximum height for full width sections (I have two carousel sections that are full width but I want to limit the height to 200px after a width of 1300px).

I don’t want to use a max-width as i still want the section to be full width - i would just like a maximum height.

Many thanks!

2

Hello [email removed]jamescox1981
Please share your site URL and screenshot.
So that I can check and let you know the exact solution here.

3

Hi, its for this banner:

Screenshot 2020-10-06 at 13.55.09.png
Screenshot 2020-10-06 at 13.55.09.png2866×1118 234 KB

And i would like to add a maximum height after 1300px width if possible to keep the same ratio. At the moment, when the screen width is larger than 1300px, the height gets too big.

URL: https://fibsupplements.com/

Password: Fib01!

Many thanks!

4

Hello
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.hero {
    height: 527px;
}
1 Like
5

Thanks so much - i also had to add some media queries and adjust a padding percentage but this really helped!

I also have another question regarding the speed that the images change when you hover over them. Is this something you can help with?

Thanks so much!!

6

Is there a way to set an individual section to full width?

Web page is: https://skinjourney.shop/pages/consultations

I want the top banner section and the bottom banner section to be full width but the rest of the page to stay the same. Can I get some help with that?