Forums

Give help. Get help.

  • # July 9, 2017 at 1:33 pm

    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">
    


    Desert Aire


    Greencheck


    Ares

    Heatco
    Rawal
    Therma
    Hero

    # July 10, 2017 at 12:18 am

    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)

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag