Support » Plugin: Advanced WP Columns » Adjust break points for different screen sizes

  • Hi,

    With the help of the Advanced WP Columns plugin, I’ve managed to make 2 columns with images responsive. However, it moves the column on the right over to the left too soon, and I don’t know which parameters to adjust to fix it. It should still show the 2 columns in the landscape view of a tablet, as a 2×2 grid.

    Here’s the code. Your help is much appreciated!

    <div class="csRow">
    <div class="csColumnGap" style="margin: 0px; padding: 0px; float: left; width: 21%;"><img src="https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1x1-pixel.png" alt="" /></div>
    <div class="csColumn" style="margin: 0px; padding: 0px; float: left; width: 26.1%;" data-csid="44e6e8f3-d11c-bcf8-b30c-dc58ab4e3ae4" data-cswidth="26.1%" data-csendpoint="452.5" data-csstartpoint="202"></div>
    <div class="csColumnGap" style="margin: 0px; padding: 0px; float: left; width: 5.73%;"><img src="https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1x1-pixel.png" alt="" /></div>
    <div class="csColumn" style="margin: 0px; padding: 0px; float: left; width: 26%;" data-csid="b704cad3-018d-58ca-ac90-712a2a680968" data-cswidth="26.0%" data-csendpoint="757" data-csstartpoint="507.5"></div>
    <div class="csColumnGap" style="margin: 0px; padding: 0px; float: left; width: 21.1%;"><img src="https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1x1-pixel.png" alt="" /></div>
    <div class="csRow">
    <div class="csColumnGap" style="margin: 0px; padding: 0px; float: left; width: 1.56%;"><img src="https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1x1-pixel.png" alt="" /></div>
    <div class="csColumn" style="margin: 0px; padding: 0px; float: left; width: 47.7%;" data-csid="30a26e8b-c55f-1603-af6d-f1e4781ed3a7" data-cswidth="47.7%" data-csendpoint="472.5" data-csstartpoint="15"> <img class="alignnone size-full wp-image-18" src="https://test.kasperlangejan.nl/wp-content/uploads/2016/04/polaroid44.png" alt="polaroid44" width="227" height="290" /></div>
    <div class="csColumn" style="margin: 0px; padding: 0px; float: left; width: 47.7%;" data-csid="30a26e8b-c55f-1603-af6d-f1e4781ed3a7" data-cswidth="47.7%" data-csendpoint="472.5" data-csstartpoint="15"></div>
    <div class="csColumnGap" style="margin: 0px; padding: 0px; float: left; width: 1.56%;"><img src="https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1x1-pixel.png" alt="" /></div>
    <div class="csColumn" style="margin: 0px; padding: 0px; float: left; width: 47.7%;" data-csid="6491ec8a-3599-73e5-ac2e-83f5cd448d45" data-cswidth="47.7%" data-csendpoint="945" data-csstartpoint="487.5"><img class="alignnone size-full wp-image-19" src="https://test.kasperlangejan.nl/wp-content/uploads/2016/04/polaroid2.jpg" alt="polaroid2" width="224" height="287" /></div>
    <div class="csColumnGap" style="margin: 0px; padding: 0px; float: left; width: 1.56%;"><img src="https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1x1-pixel.png" alt="" /></div>
    <div class="csRow">
    <div class="csColumnGap" style="margin: 0px; padding: 0px; float: left; width: 21%;"><img src="https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1x1-pixel.png" alt="" /></div>
    <div class="csColumn" style="margin: 0px; padding: 0px; float: left; width: 26.1%;" data-csid="44e6e8f3-d11c-bcf8-b30c-dc58ab4e3ae4" data-cswidth="26.1%" data-csendpoint="452.5" data-csstartpoint="202"></div>
    <div class="csColumnGap" style="margin: 0px; padding: 0px; float: left; width: 5.73%;"><img src="https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1x1-pixel.png" alt="" /></div>
    <div class="csColumn" style="margin: 0px; padding: 0px; float: left; width: 26%;" data-csid="b704cad3-018d-58ca-ac90-712a2a680968" data-cswidth="26.0%" data-csendpoint="757" data-csstartpoint="507.5"></div>
    <div class="csColumnGap" style="margin: 0px; padding: 0px; float: left; width: 21.1%;"><img src="https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1x1-pixel.png" alt="" /></div>
    <div class="csRow">
    <div class="csColumnGap" style="margin: 0px; padding: 0px; float: left; width: 1.56%;"><img src="https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1x1-pixel.png" alt="" /></div>
    <div class="csColumn" style="margin: 0px; padding: 0px; float: left; width: 47.7%;" data-csid="30a26e8b-c55f-1603-af6d-f1e4781ed3a7" data-cswidth="47.7%" data-csendpoint="472.5" data-csstartpoint="15"><img class="alignnone size-full wp-image-22" src="https://test.kasperlangejan.nl/wp-content/uploads/2016/04/polaroid3.jpg" alt="polaroid3" width="224" height="287" /></div>
    <div class="csColumnGap" style="margin: 0px; padding: 0px; float: left; width: 1.56%;"><img src="https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1x1-pixel.png" alt="" /></div>
    <div class="csColumn" style="margin: 0px; padding: 0px; float: left; width: 47.7%;" data-csid="6491ec8a-3599-73e5-ac2e-83f5cd448d45" data-cswidth="47.7%" data-csendpoint="945" data-csstartpoint="487.5"><img class="alignnone size-full wp-image-24" src="https://test.kasperlangejan.nl/wp-content/uploads/2016/04/polaroid1.jpg" alt="polaroid1" width="224" height="287" /></div>
    <div class="csColumnGap" style="margin: 0px; padding: 0px; float: left; width: 1.56%;"><img src="https://test.kasperlangejan.nl/wp-content/plugins/advanced-wp-columns/assets/js/plugins/views/img/1x1-pixel.png" alt="" /></div>
    <div style="clear: both; float: none; display: block; visibility: hidden; width: 0px; font-size: 0px; line-height: 0;"></div>
    </div>
    </div>
    </div>
    </div>

    https://wordpress.org/plugins/advanced-wp-columns/

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Adjust break points for different screen sizes’ is closed to new replies.