[Resolved] Footer bar outside of border

Home Forums Support [Resolved] Footer bar outside of border

Home Forums Support Footer bar outside of border

  • This topic has 12 replies, 3 voices, and was last updated 1 month ago by David.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #2046886
    Geoff

    I found this CSS to create a border around a website:

    body {
    border: 2px solid #ffffff;
    margin: 50px;
    }

    I’d like to have the footer bar outside of the border — could I get help with the CSS?

    #2046911
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #2046912
    Geoff

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

    #2046918
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #2046940
    Geoff

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

    #2046980
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #2046994
    Geoff

    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

    #2047017
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #2047409
    Geoff

    That’s perfect! Thanks so much.

    #2047419
    Geoff

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

    #2047517
    David
    Staff
    Customer Support

    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

    #2047529
    Geoff

    Thanks so much — it’s exactly what I needed!

    #2047953
    David
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.