HTML Code Responsive Columns

  • Resolved kietygory

    (@kietygory)


    8 years, 2 months ago

    Question: It would really help me if anyone can share the HTML code for mobile responsive column structure? I am using WP Twenty Sixteen Theme.

    Here is my website.

    Background:
    Bootstrap: tried one of its column theme, it was functional, but did not look that good:

    Bootstrap application (maybe I am not doing right?).

    Plugin: worked well with Column Shortcodes. It followed the layout and it was mobile responsive. But I prefer html code and have as few plugins as possible.

    HTML code: Use codes from elegantthemes but it is not mobile responsive. See below picture from Iphone5. It keeps the columns no matter how small the screen – becomes unreadable. Plz help and again thx!

    Iphone5 view of columns

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    What I think you need to do is add a media query to unfloat the columns and make them 100% wide at some device width. When I look at your site, it appears that the columns are sized in-line, though, and not through a class.

    I often use columns by creating divs with a class like “two-col”:

    .two-col {
}
@media screen and (min-width: 600px) {
  .two-col {
     float:left;
     width: 50%;
   }
}
    Thread Starter kietygory

    (@kietygory)

    thx @sterndata, it worked, u are a time saver, thx!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘HTML Code Responsive Columns’ is closed to new replies.