Go Premium for a chance to win a PS4. Enter to Win

x
?
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
Medium Priority
?
261 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 2000 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

Industry Leaders: 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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

783 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