Responsive 2 Columns for Mobiles

It’s better to separate HTML & CSS instead of doing it inline. It’s much cleaner; plus, in the future, you won’t have to repeat those styles every time you want to use your columns.

HTML

<div class="article-custom-column">
    <!-- Column #1 -->
</div>

<div class="article-custom-column">
    <!-- Column #2 -->
</div>

For the responsive part, I’m going to assume that your theme is mobile-first, and the mobile breakpoint is 768px . . . just because that’s popular nowadays thanks to Bootstrap.

CSS

/* ==============================
   Custom columns for articles
   ============================== */

/**
 * Assume mobile first,
 * so we default to 100% width & collapse to single column on mobile devices.
 */

.article-custom-column {
  display: block;
  width: 100%;
}

/**
 * .article-custom-columns on larger devices,
 * styles will apply once screen reaches the minimum width.
 */

@media screen and (min-width: 768px) {

  /* reduce width to half, allowing 2 columns to be next to each other */
  .article-custom-column {
    display: inline-block;
    width: 48%;
  }

  /* On left columns, add right margin to create some space with right column */
  .article-custom-column:nth-child(odd) {
    margin-left: 0;
    margin-right: 1%;
  }

  /* On right columns, add left margin to create some space with from left column  */
  .article-custom-column:nth-child(even) {
    margin-left: 1%;
    margin-right: 0;
  }
}

And we don’t need to clear floats with this.

See it in action on JSFiddle: https://jsfiddle.net/g51m52yr/2/
(drag the vertical border in between the code panels left and right to see the responsive effects)

Hi ThePixelMe!

I really appreciate for your advice and your time.

I understand that it is less messy and organized like this and It looks like it can really work on my site, as I saw the responsive effects in action.

I have read previously that I need to create a CSS file to upload the code. Honestly I dont know how to place them on wordpress. I am a very newbie here.

Would it be possible to explain theoretically how to put these codes on wp, as simple as possible so I can watch the how to do it part from YouTube?

This is basically my only shot to make it work, hope I can do this with your kind help.

Thanks a milion!
Ozlem

Hi ThePixelMe,

I fixed my problem thanks.

If anyone is like me quite newbie with the HTML and CSS, just want to tell you how I fixed my problem.

Added the HTML part on my blog post text are which is below;

<div class=”my-column-left”>
Your content for your column #1
</div>
<div class=”my-column-right”>
Your content for your column #2
</div>

Then went to my wp theme control panel/custom code/Custom CSS styles and added below CSS code

.my-column-left {
width:49%;padding:0 10px 0 0;float:left;
}
.my-column-right {
width:49%;padding:0 10px 0 0;float:right;
}

@media (max-width: 768px) {
.my-column-left,
.my-column-right {
width: 100%;
padding: 0;
float: none;
}
}

Then my 2 columns became responsive when I check it throu my mobile

Thanks all!