Responsivnes and display:table and display:table-caption

Hi I have coded a theme for WP, but I'm strugling with mobile positioning of collapsible logos with description on mobile phone, see here: http://url.kybernaut.cz/1n . Everything is done by display:table and display:table-caption and I need to center items in the center of the page, doesn't matter how many will fit into row, thay can wrap, but they has to be always in the middle.

Any suggestions? I have spent hours on this problem, but not yet solved.
Thanks a lot!

  • Dimitris

    Hey there Karolina,

    hope you're doing good and thanks for reaching us! :slight_smile:

    Could you please try next CSS snippet either inside your theme options custom CSS section (if any), or via a plugin like this

    @media screen and (max-width: 1200px) {
      .home section .loga-w {
        margin: auto;
        display: block;
        width: 150px;
      }
      .home section .logo+.logo {
        margin-left: 0;
      }
    }

    This will ensure in screens under 1200px wide, that logos will be stacked-up vertically and centered-align to its parent division.

    Hope that's some help, feel free to post back here if more assistance is required! :slight_smile:

    Warm regards,
    Dimitris

  • Predrag Dubajic

    Hi Karolina,

    Since the theme was coded by you may I suggest some HTML changes that will make this work more easily.

    What you can do is change your logos into a list, so your logo holder will be UL and logos will be LI elements, this is how new HTML structure would look:

    <ul class="loga-w clearfix">
    	<li class="logo mb30"></li>
    	<li class="logo mb30"></li>
    	<li class="logo mb30"></li>
    	<li class="logo mb30"></li>
    	<li class="logo mb30"></li>
    </ul>

    After that just add this bit of CSS:

    .home section .loga-w {
        text-align: center;
    }
    
    .home section .loga-w li.mb30 {
        display: inline-block;
        float: none;
    }

    Here's a short video showing how the section should behave after that:
    http://screencast.com/t/JKmxrDzT

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.