Adjust height of section (image banner block)

Hello! This feels like it should be super simple but really struggling to find code to sort this... appreciate any advice. I'd like to set a height for a section (the background image is set as a banner) and be able to set different heights for desktop and mobile.

Thank you!

https://www.everystory.co.uk
7.0 Brine

... is it also possible to set a margin from the top of the image to the text box to reduce this space?

Haven't used Brine in a while but if you link to the site I can try take a look on my next break?

You basically want to run a media query in your CSS. I can't remember off the top of my head but link and I'll write something for you.

It'll probably be like:

#sectionname {
 @media (max-width: 767px) {
   height: 50vw!important;
   padding-top: YOURVALUE!important;   
  }
}

But yeah, link me and I'll check. I haven't used Brine in a while.

@KwameAndCo thank you so much!

link is https://www.everystory.co.uk

I'm assuming you mean the "Considerately Crafted" section as that matches your images best (or I'm being dopey).

Anyhow, set up the desktop version as normal and we use CSS to style mobile.

You can adjust the values as needed but basically:

@media (max-width: 640px) {
  #journal-highlight .Index-page-content{
    padding-top: YOURVALUE!important; /*default 60px*/
    padding-top: YOURVALUE!important; /*default 60px*/
  }
}

This should work.

@KwameAndCo yes that's the correct section, thank you! (I've been faffing with the copy.)

I've dropped that code into the custom CSS section is that right?

14 minutes ago, Abby_EveryStory said:

I've dropped that code into the custom CSS section is that right?

Yes. Did you play around with the values? That should enable you to adjust and find the right heights.

If you'd prefer rem, 60px is 3.75rem I think.

@KwameAndCo I've dropped it in and adjusted the values but I can't see that it's had an effect. The text is in a bounding box so not sure if it could already be at the smallest amount of padding the template will allow...?

So that code is to change the mobile while keeping the desktop the same.

You've used it correctly but you haven't changed the values.

60px is the default and that's the same as 3.75rem so it's staying the same. You need to go higher than those values to increase it. Try something really big like 8rem to see more of a difference and then fine-tune. Or stick to pixels. Your call.

Are you looking to adjust on desktop too using CSS?

I see! I've changed the values and can see the difference now - thank you! Is it possible to move the text up so it sits in the plain area of the image on mobile?

It would be great if I could adjust the height and text positioning on the desktop too. 

Thank you so much!

On 9/29/2023 at 1:34 PM, Abby_EveryStory said:

I see! I've changed the values and can see the difference now - thank you! Is it possible to move the text up so it sits in the plain area of the image on mobile?

It would be great if I could adjust the height and text positioning on the desktop too. 

Thank you so much!

You can use this CSS code to adjust text position on mobile

@media screen and (max-width:640px) {
div#block-7578e74728cf9491a454, div#block-e4d3710f921b63903d5a {
    position: relative;
    top: -50px;
}
}