Solved

How do I make this blue bar go to the edge of my content area on either side?

Posted on 2013-12-09
4
231 Views
Last Modified: 2013-12-09
I have a site here:

www.particletechlabs.com

I need to make the light blue bar that says "For more information, contact us at.." under the large image go to the edge on either side.

But I cannot figure out how to make this happen.

I've attached a screenshot of what I need.




Any help is appreciated.
screenshot.jpg
0
Comment
Question by:Donnie Walker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 10

Expert Comment

by:jtwcs
ID: 39707508
You can do this by applying some negative left and right margin to the rt-phonebanner div.

#rt-phonebanner {
    margin: 0 -7px;
}

Open in new window

0
 
LVL 12

Accepted Solution

by:
duttcom earned 500 total points
ID: 39707514
It looks like the blue bar doesn't go to the edge because of the padding on the containing div #rt-body-bg4.

Line 113 of template.css shows

#rt-body-bg4 {
    margin-right: -9px;
    padding: 15px 16px 0;
}

You could try

#rt-body-bg4 {
    margin-right: -9px;
    padding: 15px 0 0;
}

instead to remove the right and left padding.

I've noticed you have posted a few CSS questions in the last day or two. You might want to consider using Firebug in Firefox to debug your CSS.
0
 

Author Closing Comment

by:Donnie Walker
ID: 39707540
That worked out great! Thanks so much for that and the Firebug suggestion.
0
 
LVL 12

Expert Comment

by:duttcom
ID: 39707545
Firebug is excellent for working this sort of stuff out. Sure beats playing 'find that style'!

Good luck with your project.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How can I make the first part identical to the second ? 1 43
Bootstrap 3 - Style a dropdown 1 32
email validation 9 64
WordPress Creating scrolling box at top of page 1 32
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question