Footer bar outside of border

Hi there,

Yes that's right. That CSS applies to the entire page because the footer bar is a child element of body tag.

Can you link us to the site in question?

So we can check how it's structured and figure out a CSS write up that assigns a border to the entire site minus the footer.

Thank you, it's at dev.furrynation.com

Remove the border-top CSS of your .site-info.

You then add this CSS:

.top-bar .inside-top-bar {
    border-top: 2px solid #ffffff;
}

.top-bar .inside-top-bar,
header#masthead .inside-header,
nav#site-navigation .inside-navigation,
div#page {
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
}

div#page {
    border-bottom: 2px solid #ffffff;
}

Thanks for that -- I want to inset the border around the page as well. I got the left and right to work, but not the top. Can you tell me what I'm missing?

.top-bar .inside-top-bar {
border-top: 2px solid #ffffff;
padding-top: 50px;
}

.top-bar .inside-top-bar,
header#masthead .inside-header,
nav#site-navigation .inside-navigation,
div#page {
border-left: 2px solid #ffffff;
border-right: 2px solid #ffffff;
margin: 0 50px 0 50px;
}

div#page {
border-bottom: 2px solid #ffffff;
}

I'm not sure what you mean.

But if it's to make it like this - https://share.getcloudapp.com/OAuGkvKd

Then try modifying this currently existing CSS on your site:

div#page {
    border-bottom: 2px solid #ffffff;
	}

To this:

div#page {
    border-bottom: 2px solid #ffffff;
    border-top: 2px solid #ffffff;
}

Sorry I wasn't clear. I want a 50px margin over the the top of the pages, as there is around the sides -- https://share.getcloudapp.com/ApuEZqyp

Was the link supposed to show something? I've checked it and it only show a gray image - https://share.getcloudapp.com/YEuP7bYo

As for having margins, you should remove this margin: 0px 50px 0px 50px; on div#page and add this instead:

body { margin: 50px; }

This is so the alignment of the page isn't skewed to the left.

That's perfect! Thanks so much.

Sorry, I have one more question. How do I remove the border styles on mobile view?

Hi there,

you can wrap the updated CSS in @media query like so:

@media(min-width: 769px) {
    div#page {
        border-bottom: 2px solid #ffffff;
        border-top: 2px solid #ffffff;
    }
}

This will only apply the contained styles to screen sizes over 769px

Thanks so much -- it's exactly what I needed!

Glad to hear that!