CSS Padding Change: Probably a very easy fix.

[narrowland]

Probably a very easy fix.

I have a footer area displaying images on a test site: http://b79.f80.myftpupload.com/. How would I increase padding between the images in that section?

CodePen: https://codepen.io/anon/pen/KqGEzm

FULL CODE:

Stylesheet:

/Services widget/
#text-2 {background: #fff; display:none;}
body.home #text-2 {display:block;}
#text-2 .widget-title{ text-align:center; color:#111; font-size:38px; text-transform:uppercase; font-style:normal; font-weight:300; padding:0; margin: 0 0 25px 0;}
#text-2 .textwidget{max-width:1404px; margin: 0 auto;}
#text-2 .textwidget ul{list-style: none; margin: 0; padding: 0;}
#text-2 .textwidget ul li{float:left; border: 1px solid #fff; width: 50%; padding: 0px;}
#text-2 .textwidget ul li.no-bottom-border{border-bottom:0;}
#text-2 .textwidget ul li a{display: block; position: relative;}
#text-2 .textwidget ul li a h3{font-size: 22px; font-weight: 400; color:#fff;text-transform: uppercase; line-height:46px; position: absolute; background: rgba(185, 167, 115, 0.85) none repeat scroll 0 0; width: 350px; height: 85px; top: 50%; left: 50%; margin: -48px 0 0 -167px; border: 1px solid #fff; padding:16px 5px; text-shadow: 1px 1px 1px #333;}
#text-2 .textwidget ul li a h3:hover{background: rgba(185, 167, 115, 0.85) none repeat scroll 0 0;}

Footer.php:

<

div class=”widget-area”>

<

aside id=”text-4″ class=”widget widget_text”>

FEATURED BRANDS

                    <div class="textwidget">

[JeroenR]

One way of doing this could be adding flex box rules. Then they will be stretched. No hardcoded padding.

#text-4 .textwidget {display: flex;align-items: stretch;flex-direction: row;text-align: center;}
#text-4 .textwidget > a, #text-4 .textwidget > img {flex: 1;}

Depends of course of what browsers you want to support. http://caniuse.com/#feat=flexbox

Otherwise, just add padding to the a and img that go directly under the DIV with class textwidget. Like this:

#text-4 .textwidget > a, #text-4 .textwidget > img {padding: 0 20px;}

Only now the padding is hardcoded, so maybe that doesn’t do the job in responsive cases.

You could also wrap the images in a DIV. Set those DIVs to be display: inline-box;
So you can do something like this:

#text-4 .textwidget div {display: inline-block;text-align: center;width: calc(100%/7.1);}

I needed 7.1 here to fit the images over the whole width. (Actually I tried 7, because there were 7 images, but that didn’t fit)

[Author]

Posts