Forum Moderators: open

Message Too Old, No Replies

responsive padding in bootstrap 3?

         

Gilead

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

10+ Year Member



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!

Fotiman

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

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I don't see any code in your example that's setting the width?

Fotiman

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

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Can you post a complete example (including the relevant markup and CSS)?

Gilead

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

10+ Year Member



padding-right:19%

Fotiman

6:09 pm on Mar 12, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



There is nothing in the markup you posted that includes an id of "box", nothing in your sample has padding-right: 19%.

Gilead

6:16 pm on Mar 12, 2015 (gmt 0)

10+ Year Member



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?

Fotiman

7:30 pm on Mar 12, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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.