Jump to content

Adjust height of section (image banner block)

Recommended Posts

  • Replies 10
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

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.

Edited by KwameAndCo

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
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.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

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?

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.