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
227 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
  • 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
css, html 6 51
Box Model and Styling 12 34
Error in script 11 48
Could you point how to give Bootstrap's open/ close menu effect ? 25 36
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

862 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now