Welcome to WebmasterWorld Guest from 35.172.100.232

Forum Moderators: open

Message Too Old, No Replies

responsive padding in bootstrap 3?

     
5:36 pm on Mar 12, 2015 (gmt 0)

Full Member

5+ Year Member

joined:Oct 19, 2011
posts: 201
votes: 1


This may sound odd. I am redoing my site with bootstrap 3. It's a two column layout and when you hover over a link in the nav section, I want the background color to change and fill up most of the available space within the column. If I use width:100%, it goes beyond the space.

#box 
{
padding:.5em;
background-color: #B2C9F9;
padding-right:19%;

}

#box:hover
{
background-color: #D3E0FB;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}


<nav>
<a href="index.php"><img src="home.png" id="box" class="img-responsive" alt="" title="" /></a><br />
<a href="profile.php"><img src="profile.png" id="box" class="img-responsive" alt="" title="" /></a><br />
<a href="services.php"><img src="services.png" id="box" class="img-responsive" alt="" title="" /></a><br />
<a href="webgallery.php"><img src="webgallery.png" id="box" class="img-responsive" alt="" title="" /></a><br />
<a href="logogallery.php"><img src="logogallery.png" id="box" class="img-responsive" alt="" title="" /></a><br />
<a href="jobs.php"><img src="jobs.png" id="box" class="img-responsive" alt="" title="" /></a>
</nav>



Still very green with bootstrap.
I compromised by using padding-right, but it's not the effect I really wanted to use. What is a better way to do it? Even now, when I shrink the window, the color bleeds into the right column.
Thanks!
5:47 pm on Mar 12, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


I don't see any code in your example that's setting the width?
5:52 pm on Mar 12, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


Can you post a complete example (including the relevant markup and CSS)?
5:56 pm on Mar 12, 2015 (gmt 0)

Full Member

5+ Year Member

joined:Oct 19, 2011
posts: 201
votes: 1


padding-right:19%
6:09 pm on Mar 12, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


There is nothing in the markup you posted that includes an id of "box", nothing in your sample has padding-right: 19%.
6:16 pm on Mar 12, 2015 (gmt 0)

Full Member

5+ Year Member

joined:Oct 19, 2011
posts: 201
votes: 1


If I move the padding from the box element to the hover element, I get some strange results. The image size shrinks down to about a pixel. What is the right way to extend the background color when hover is utilized?
7:30 pm on Mar 12, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


Again... can you please post a complete example that shows where "box" fits in? The markup you posted does not contain any elements with id of "box", so whether you apply style to "#box" or "#box:hover" does not matter, as none of the markup contains "#box". It would be helpful to see an example demonstrating the problem you're trying to overcome.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members