Dismiss Notice
Hey Guest, make sure to follow us on Twitter! Say hi and we'll be sure to follow back!

Responsive 4 x Column setup

Discussion in 'Magento Support' started by Sparetoolparts, Mar 4, 2018.

  1. Sparetoolparts

    Sparetoolparts UKBF Regular Full Member

    310 29
    Hi All

    I have a responsive 4 x column setup for a static blow element on my site, I've been trying to centre the images in the columns but I'm unable to do this, on a phone it looks like it's working but on a laptop the images are def off centre my code is below any ideas on why this isnt working as expected?:

    <style><!--
    * {
    box-sizing: border-box;
    }

    /* Create four equal columns that floats next to each other */
    .column {
    float: left;
    width: 25%;
    padding: 10px;

    }

    /* Clear floats after the columns */
    .row:after {
    content: "";
    display: table;
    clear: both;
    }

    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    @media (max-width: 600px) {
    .column {
    width: 100%;
    }

    /* center images in the columns */
    img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    }
    --></style>
    <div class="column" style="text-align: center;"><img class="center" alt="" src="{{media url="wysiwyg/Makita_Category/18v-Drill-Drivers.jpg"}}" /><a title="Makita Cordless Tool Spare Parts" href="https://www.sparetoolparts.co.uk/makita/cordless-tools.html" target="_self">Makita Cordless Tool Spare Parts<br /></a></div>
    <div class="column" style="text-align: center;"><img class="center" alt="" src="{{media url="wysiwyg/Makita_Category/All-Percussion-Drills.jpg"}}" /><a title="Makita Corded Tools Spare Parts" href="https://www.sparetoolparts.co.uk/makita/corded-tool.html" target="_self">Makita Corded Tool Spare Parts<br /></a></div>
    <div class="column" style="text-align: center;"><img class="center" alt="" src="{{media url="wysiwyg/Makita_Category/All-Chainsaws.jpg"}}" /><a title="Makita Lawn &amp; Garden Spare Parts" href="https://www.sparetoolparts.co.uk/makita/lawn-garden.html" target="_self">Makita Lawn &amp; Garden Spare Parts<br /></a></div>
    <div class="column" style="text-align: center;"><img class="center" alt="" src="{{media url="wysiwyg/Makita_Category/All-Cordless-Multi-Tools.jpg"}}" /><a href="https://www.sparetoolparts.co.uk/makita/other.html" target="_self">Makita Accessories</a></div>
     
    Posted: Mar 4, 2018 By: Sparetoolparts Member since: Oct 26, 2015
    #1
  2. Sparetoolparts

    Sparetoolparts UKBF Regular Full Member

    310 29
    Posted: Mar 4, 2018 By: Sparetoolparts Member since: Oct 26, 2015
    #2