HTML and CSS Reference
In-Depth Information
width: 65.82278481012658%;
padding: 13px 0;
background-color: #6c0733;
background-image: linear-gradient(#87053e, #560329);
box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0;
font-size: 20px;
color: #fefefe;
transition: transform .5s ease-out;
}
We won't change the width of the other button (
.more-btn
). We'll leave that at 280 pixels,
which works fine since it doesn't have anything beside it.
Next, we'll change the width and padding values on the
.latest
element:
.latest {
width: 62.74509803921569%;
float: left;
padding: 0 3.92156862745098% 0 3.92156862745098%;
background: url(../images/bg-column.png) no-repeat top
right;
}
...andsoon.Aslongasweknowthewidthoftheparentelement,thenwecanusetheformula
described earlier to get the correct percentage value. In some cases, we may have to account
for inner horizontal padding when using percentages on nested child elements, but in most
cases the calculation is pretty straightforward.
Using percentage values like this will help the layout adjust naturally when the elements are
displayed on a smaller screen. For the remainder of our styles, go through and change all
horizontal-based values (the widths, left padding, right padding, and any horizontal position-
ing using the left or right properties), from pixels to percentages, using the formula we dis-
cussed. After that, head on to the remainder of this chapter.
