WordPress.org

Ready to get started?Download WordPress

Forums

Column-Matic
[resolved] Width in smartphone (2 posts)

  1. carro.richards
    Member
    Posted 1 year ago #

    Hi there!

    I wonder if I can use column-matic so that it splits up in a left-right column on computer screen, but in an uper-lower column on smartphone so that I don't get this extremly thin column on smartphone (with a 50 % width per column). Having downloaded a few plugins I don't have the energy to test every column plugin 'til I get lucky...

    Thanks!

    http://wordpress.org/extend/plugins/column-matic/

  2. Baden
    Member
    Plugin Author

    Posted 1 year ago #

    Yes. It's called Responsive Web Design, and here is a thread dealign with exactly this issue. What you will want to do is the following:

    1. Use classes for the left and right columns and be sure to assign float as an empty space:

    [column class="column_left" float=" "]content[/column]
    [column class="column_right" float=" "]content[/column]
    [end_columns]

    2. Define column_left and column_right classes for normal screens:

    .column_left {
        width: 45%;
        float: left;
    }
    .column_right {
        width: 45%;
        margin-left: 4%;
        float: left;
    }

    3. Read: http://alistapart.com/article/responsive-web-design
    and define the column_left and column_right classes for multiple screen resolutions:

    @media screen and (max-device-width: 480px) {
        .column_left {
           width: 100%;
           float: none;
       }
       .column_right {
           width: 100%;
           margin-left: 0;
           float: none;
       }
    }

    This has not been tested, but it should get you pointed in the right direction. If you need further assistance, please consider our very reasonable premium support pack:
    http://plugins.twinpictures.de/plugins/column-matic/support/

    Update: It has been tested here: http://spacedonkey.de/762/column-matic-responsive-test/

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic