Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
Sign in to follow this  
kelcorbett

Flatiron: Reduce padding between the header and site content?

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!

Edited by danieljs
retag

Share this post


Link to post

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.

Share this post


Link to post

Hi Kel, can you tell me how you were able to get your image gallery to extend to the outer reaches of the screen? I'm trying to reduce the size of the page margins on my site.

Thanks!

Share this post


Link to post

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;
}

Edited by alxfyv

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.

Share this post


Link to post

Thanks for the help guys, but unfortunately none of that code is working for me…

I’ve tried putting it into the Page Header Code Injection, and into custom CSS. But no joy. Any ideas as to why it’s not working?

Edited by Kel

Share this post


Link to post

Awesome, thanks so much! This code worked perfectly. I put it into the page header code injection, with this addition:


<style>
#container-content {
 padding-top: 20px !important;
}
</style>

Legends! Thanks

Edited by Kel

Share this post


Link to post

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!

Edited by the_pwner

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...