Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Flatiron: Reduce padding between the header and site content?


kelcorbett

Recommended Posts

I’m using the Flatiron template, how would I reduce the padding between the header and the content below it?

There are tonnes of questions on the forum for this, but none of the code snippets I’ve found have actually worked for me. I’ve tried using this, which does work:

.image-block { margin: -40px 0px -20px 0px; }

However I have an image gallery on one of my pages and it does not work for that unfortunately.

Can anyone help with this? If there’s a way to do it via adding the code to the Page Header Code Injection in the individual pages that would be absolutely perfect. Failing that if I need to add it to the custom CSS section that’s fine too.

Thanks!

Link to comment
  • Replies 8
  • Created
  • Last Reply

Please give the URL to your site so we may examine the code.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

Looking at your site with the browser’s Element Inspector, it appears that there is no margin between the bottom border of siteTitle and the top border of the main content Container, and the same for nav. There is padding within siteTitle and within nav but the amount of padding appears to be different.

SQSP counsels against using Custom CSS to reposition elements by altering margins and padding.(How should I use custom CSS?) If, nonetheless, you want to experiment with it, try:


.siteTitle {
 padding-bottom: 20px;
}
#nav {
padding-bottom: 5px;
}

Experiment by adjusting the pixel values. May I suggest that you create a Test page for experimentation (duplicate an existing page, retitle it Test, set its urlSlug to /test, deselect Enabled and drag it to the Non Linked section) and enter the CSS code in Test's Page Header Code Injection wrapped in <style> tags. That way your live site remains unaltered until you are satisfied with the code and put it in Custom CSS (without the <style></style> tags).

You might also experiment with:


#container {
 margin-top: 225px;
}

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment
  • 8 months later...

To reduce the gap that appears at the bottom of an Index Page if you're viewing the site in mobile or tablet view, here's the code you need!


@media only screen and (max-width: 768px) {
 #container {
   margin-bottom: 0px !important;
 }
}

Select Design, Custom CSS, paste the above code and save your changes!

Link to comment
  • 6 months later...
  • 9 months later...

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.

×
×
  • Create New...