Search code examples
csswordpressresponsive-designwordpress-themingresponsiveness

making stackable two columns in WordPress

I'm working with a theme that is supposed to be responsive but when the two column shortcode is used and a page is viewed on smaller browsers or mobiles, the columns shrink to fit the browsers width side by side instead of stacking.

It looks awful on smartphones, I am trying to make the columns stack.

You can see the page at: http://goo.gl/t8QOA5

Relevant css:

.one_half {
float:left;
line-height:22px;
margin-right:2%;
width:49%;
margin-bottom:27px;
display:block
}

.one_half_last {
float:left;
line-height:22px;
width:49%;
margin-bottom:27px;
display:block
}
Solution

  • use media queries to write conditional css based on the width of the viewport. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

    Example:

    @media (max-width: 480px) {
    .one_half, .one_half_last {
        width: 100%;
    }
}