Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Padding Change: Probably a very easy fix. Reply To: CSS Padding Change: Probably a very easy fix.

#256682
JeroenR
Participant

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)