Wu Wei // Extending bottom borders and hr to full browser width

lucarneus · Member · Aug 9, 2013 at 2:19 am
Copy link

Add topic to favorites
CSS how to:

1. Front Page only — extend bottom borders to full browser width? Ref: http://sugarcube.us
2. Pages only — extend hr to the full browser width? (keeping the (dashed red) bottom border as is) Ref: http://sugarcube.us/about/visitor-information/restaurants/

Thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 9, 2013 at 6:17 pm
Copy link
Hi, Can you clarify a couple things for me.

1. Are you talking about the grey line below the last post on the main page or a different line?

2. I’m not seeing an “hr” element on that page. Can you clarify please?

BTW, great job on customization.
lucarneus · Member · Aug 10, 2013 at 12:56 am
Copy link
1. Yes, each post is coded to have a border-bottom
124 .center-column .hentry,.center-column .page {
129 border-bottom: dotted 1px #999999;

2. the hr element is used for my pages only as in this example page (but reflect the design of the Front Page):
http://sugarcube.us/about/visitor-information/restaurants/

This seems to be a tad complex coding for the current effect but its what it is… :/

150 HR {
151 border: none;
152 height: 0;
153 border-bottom: dotted 1px #999999;
154 width: 100%;
155 background: #fff;
156 margin: 40px 0 10px;
157 }

Thanks for the compliment. It’s been a CSS journey I’ll say that!
thesacredpath · Member · Aug 10, 2013 at 5:59 am
Copy link
This was a challenge to do cleanly. :)

1. This is not easy to do because of the structure of the HTML and CSS, but add the following to your custom CSS and see what you think on the home page. I’ve added a wide red border to the top of infinite scroll so that it is easy to see it. The problem with this is, the “older posts” button then goes all the way to the left. Left margin doesn’t work cleanly, so I did a position relative on the button (span) and then used a 50% left declaration to basically center the button. It still isn’t entirely clean as you can see when you narrow your browser window down, but it is the best I could do.
```
.home #infinite-handle {
    position: absolute;
    left: 0;
    border-top: 4px solid red;
    width: 100%;
}

.home #infinite-handle span {
    position: relative;
    width: 70px;
    left: 50%;
}
```
2. I set the center column to 100% width and added the border there. I then set the center-column page to the old width of center column and then centered it with auto left/right margins and then centered the header. Again, see what you think and let me know.
```
.page .center-column {
    border-bottom: 2px dashed red;
    width: 100%;
}
.page .center-column .page {
    border-bottom: none;
    margin-left: auto;
    margin-right: auto;
    width: 58.334em;
}
.page #header {
    text-align: center;
}
```
lucarneus · Member · Sep 18, 2013 at 3:55 pm
Copy link
Greetings thesacredpath,

It’s been sometime since your kind response. I gave it a go with the css coding without luck. Fortunately with the coding roadblock I changed directions, coding and concept wise. Many changes were made since.

Thank you for your fast response and your continuing generosity.
http://sugarcube.us

No items found.