Get rid of the spacing around website

cassidysiobhan · Member · Sep 29, 2017 at 2:30 pm
Copy link

Add topic to favorites
Hi there

I’d like to get rid of the border spacing around my website, including the header area, the main nav and the footer area.

I’ve tried doing this myself with CSS, but nothing seems to work.

Appreciate any help!

Thanks,
Siobhan

The blog I need help with is: (visible only to logged in users)
pauloeaquino · Staff · Sep 29, 2017 at 3:20 pm
Copy link
Hi @cassidysiobhan,

Just to clarify, are you wanting to get rid of just the border spacing, or that plus any other white space on your site?

I’m not seeing any borders in the header region, but there is a border-bottom property being used in the main nav, and a border-top property being used on the footer & footer widget area. For now, you can take care of those with the following code:
```
.main-navigation {
     border-bottom: none;
}

.site-footer {
     border-top: none;
}

.footer-widget-area {
     border-top: none;
}
```
thesacredpath · Member · Sep 29, 2017 at 9:16 pm
Copy link
Hi @cassidysiobhan, we can do this with the following custom CSS, but let me mention that for text content, the best width for easy readability is somewhere between 500-750px. Actually, the golden rule is 66 maximum characters including spaces and punctuation per line. More that that, and the eye has a harder time going from the end of one line of text to the next.

The following keeps the overall width of the actual content very similar to what it is originally, but widens out the header and footer areas so that they go to the edge of the browser window/screen when it is wider than 1180px.
```
.site {
  width: 100%;
  max-width: 100%;
}
@media screen and (min-width: 1080px) {
  .content-wrapper {
    padding-left: 55px;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto
  }
}
```
cassidysiobhan · Member · Sep 30, 2017 at 1:53 am
Copy link
Thank you @pauloeaquino. You’re right, I should have clarified that I really wanted the header area and footer area to go the full screen width.

And @thesacredpath, that code worked perfectly! Exactly what I wanted. Thank you so much for your help :)

Now time to get on with creating actual content!

Cheers!
thesacredpath · Member · Oct 2, 2017 at 10:46 pm
Copy link
Hooray and you are welcome!

No items found.