{"id":562,"date":"2014-07-30T04:46:08","date_gmt":"2014-07-30T04:46:08","guid":{"rendered":"http:\/\/www.ber10thal.com\/blog\/?p=562"},"modified":"2014-07-30T04:52:37","modified_gmt":"2014-07-30T04:52:37","slug":"columns-in-wordpress","status":"publish","type":"post","link":"https:\/\/ber10thal.com\/blog\/columns-in-wordpress\/","title":{"rendered":"Columns in WordPress stack on mobile"},"content":{"rendered":"

\"wp-easy-columns\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

I spent more hours that I would like to admit trying to figure this one out. I’ll post and maybe save someone the trouble. I was trying to create columns in wordpress that when viewed on an iphone would stack on top of each other. I performed many google searches on the matter and found lots of information. I think I’ve found the simplest solution to this issue. Some of the searches I performed were:<\/p>\n

two columns in wordpress stack on mobile
\nwordpress create columns that stack on iphone
\nwordpress two columns to one on smaller screens
\nwordpress columns convert to stacked on mobile<\/p>\n

I read about @media queries and “div class” and “div id”. They all worked, but when viewing the site on a mobile device the text was cramped and still in columns.\u00a0I wanted a solution without having to learn to code CSS.<\/p>\n

Solution:<\/strong><\/p>\n

Easy Columns <– it’s a plugin for WordPress. I installed it and creating columns becomes really easy. For example if you wanted a one third column on the left and two thirds on the right you would type<\/p>\n

[ezcol_1third]
\ntext or image you want\u00a0in the left column
\n[\/ezcol_1third]<\/p>\n

[ezcol_2third_end]
\ntext or image you want in the right column
\n[\/ezcol_2third_end]<\/p>\n

It’s that easy, I think the plugin has built in @media calls to reshape the layout based on screen size. It’s been working great for ber10thal.com\/beverage<\/a>. I set my images on the left and the text on the right. In mobile it stacks and is easy to read.<\/p>\n","protected":false},"excerpt":{"rendered":"

          I spent more hours that I would like to admit trying to figure this one out. I’ll post and maybe save someone the trouble. I was trying to create columns in wordpress that when viewed on an iphone would stack on top of each other. I performed many google searches … Continue reading Columns in WordPress stack on mobile<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-562","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/ber10thal.com\/blog\/wp-json\/wp\/v2\/posts\/562","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ber10thal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ber10thal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ber10thal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ber10thal.com\/blog\/wp-json\/wp\/v2\/comments?post=562"}],"version-history":[{"count":5,"href":"https:\/\/ber10thal.com\/blog\/wp-json\/wp\/v2\/posts\/562\/revisions"}],"predecessor-version":[{"id":568,"href":"https:\/\/ber10thal.com\/blog\/wp-json\/wp\/v2\/posts\/562\/revisions\/568"}],"wp:attachment":[{"href":"https:\/\/ber10thal.com\/blog\/wp-json\/wp\/v2\/media?parent=562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ber10thal.com\/blog\/wp-json\/wp\/v2\/categories?post=562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ber10thal.com\/blog\/wp-json\/wp\/v2\/tags?post=562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}