Home › Forums › CSS › CSS Padding Change: Probably a very easy fix. › Reply To: CSS Padding Change: Probably a very easy fix.
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)