Jump to content

Archived

This topic is now archived and is closed to further replies.

8216az7373

Horizontal Stripe

Recommended Posts

8216az7373

How do you create a horizontal color stripe in the middle of a page that is responsive to the width? 

 

Site: www.monroestreetstudio.com/test-page/

 

Pagelines, Frameworks, latest version

Wordpress 4.0

 

The top nav and footer both go across the whole site and are responsive. I want to add content to the center of the page with dividers between content that also go across the whole width.

 

 

Share this post


Link to post
Share on other sites
batman

Hi 8216az7373

Please, you can take a look to this

CSS: centering things

Perhaps this help you

;)


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
8216az7373

Thank you, but I don't think this is what I am looking for.

 

I want to put a color band across any page at any point in the page that extends the width of the page regardless of the browser window width (so it is responsive to the window width). it would work the same way the footer does in the site www.monroestreetstudio.com/test-page/

Share this post


Link to post
Share on other sites
Danny

Hi,

 

You could just use the <hr> tag which you appear to have done already. You could also give the <hr> tag a custom class like so:

 

<hr class="hoz-line">

 

Then add the following CSS:

 

.hoz-line {
  border-bottom: 20px solid #F00;
  border-top: 0;
}
 
You could also, use the grid like so:
 
<div class="row">
  <div class="span12 hoz-band"></div>
</div>
 
Then add the following CSS:
 
.hoz-band {
  background: #5365C2;
  height: 20px;
}

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×