Jump to content

Block spacing between text / padding issues

Recommended Posts

Hi all,

I'm having a bit of trouble with some spacing. 
I've coded a bit of padding between my heading and subheading, however it has pushed down the text so the overall padding is a bit uneven.

The code I have used is...
 

body#collection-6464a7b405df9b56279099c1{
  h1 {margin: 10px !important;}}

Which has added 10px spacing between the text below 'Artistry' and 'Chrome Hearts', but as you can see, the gap at the bottom is now too small and uneven from the top spacing.

I'd like to keep the 10px padding between the heading and subheading, but have even padding top and bottom.
Can someone help?

Thanks in advance!
PW: Dodger50!

image.thumb.png.2e1bc208673b860490c3db1b25bd9541.png

Link to comment
8 minutes ago, RebelRuth said:

Me again but on another issue I'm having - could you help me here too?! I am very stuck!

Before trying any code I think I would suggest testing changing the fluid engine grid spacing to zero as I think that is the cause of the uneven spacing on mobile.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
35 minutes ago, RebelRuth said:

I looked at the spacing, however didn't help

Really? You can't adjust it?

Can you tell me how you set this page up?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hey Ziggy,

Sure.


So this website is for a client who is an artist, and the pages I'm having issues with are her title pages, as part of a portfolio. There are 4 sets of pages like these. (Stella McCartney, Selfridges, Chrome Hearts and Artist Collab).

For example, if I click on the 'Selfridges' page, you can see especially on mobile view that the padding at the top is a little bit more than the bottom on the example below. I'd like the text to sit in the middle with even padding.

 

image.thumb.png.7bd116a5e458608152dfb53c2afcaf70.png

 

 

The code that I have used is;

To create a bit of space betweeen the title (Superself) and subtitle (Selfridges 2022), adjust font size of subtitle, the hover over code to reveal the text, and some other spacing coding below:

/* section spacing on sub heading Selfridges*/
#collection-64437dcdecdf542720739ff5 {
  h1, h3 {
    margin: 0px !important;
  }
  h1{
    margin-bottom: 20px !important;
  }
}
* Selfridges - Space between h3 subtitles */
body#collection-64437dcdecdf542720739ff5{
  h1 {margin: 10px !important;}}
  
@media only screen and (max-width:767px) {
  /* smaller h3 on selfrdiges Mobile projects page*/
#collection-64437dcdecdf542720739ff5{
  h3 {
    font-size:13.5px !important;
  }}
}
/* section hover Selfridges*/
@media screen and (min-width:992px) {
#collection-64437dcdecdf542720739ff5{
section:after {
    content: "";
    background-color: rgba(0,0,0,0.0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s ease;
}
section:hover:after {
    opacity: 1;
    transition: all 0.3s ease;
}
section .html-block {
    opacity: 0;
    transition: all 0.3s ease;
}
section:hover .html-block {
    opacity: 1;
    transition: all 0.3s ease;
  }}
}

 

Happy to send you the whole code for the site, if that makes more sense!

 

Thank you

Link to comment

Can you add a margin-bottom to the h3?

This is what I'm looking at with the grid and suggestion about changing the column/row gap

image.png.079eb2f56d80d12c78dabbf473e3d5d5.pngimage.png.a349e697e0e70c4694d37ea8b046cfae.png

The text block seems to be spaced down by the row/column gap which is at the top but not the bottom. Do you ever use the inspect tool in chrome?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.