Column responsiveness. Can 4 collapse to 2 beside instead of 1 after the other?

[AmyWordPress]

I'm not sure if I'm asking this correctly. I have 4 columns each with an image and a link. When the screen gets smaller the 4 columns collapse so the images are one below the other. I'm wondering if there's a way to have them go to 2 beside each other until the screen is so small that they have to go one below the other.

I have tried another way to do the image links but I liked the ease of using the columns.

Thanks, Amy

http://computer-nurse.com/TestWillow/?preview_id=2&preview_nonce=c55c6c7e0e&preview=true

[carasmo]

Hello,

There is a way with CSS but it is pretty advanced. I've done it here:

Demo: https://output.jsbin.com/zijodav

The html/css:

https://jsbin.com/zijodav/edit?html,css

The html is on the left the CSS is on the right. Don't copy all the CSS, use what is indicated and read the comments.

On line art type images in particular, the images are blurry on retina, so it's better to use twice the size images and display them at half the size for images like the trees and the logo.

Don't copy all the html, use the new classes on the one-fourth and add the wrapper around all the columns and the two break-point divs.

Make sure the content inside the columns uses alignment none on the caption and/or image

This will be used in a tutorial on my site this week.

---

Genesis Theme Customization and Help

[carasmo]

Here's the tut:

https://christinacreativedesign.com/four-equidistant-inline-block-columns-that-break-4-2-1/

---

Genesis Theme Customization and Help

[carasmo]

The tutorial has further information in it should you find some funky things happening. See the CSS section and the note under the heading.

---

Genesis Theme Customization and Help

[AmyWordPress]

Wow, thanks! I didn't realize anyone had responded because I did not get an email alert. I'm still having problems. Now all the images are just in one column. It is quite possible I'm not understanding something about customizing the code particularly the wrap. I put in some different images that are scaled down from larger images.

One thing I noticed is that the code I see in Firebug is different than the code I entered. I copied your format in the html and put in for example:

<div class="one-fourth inline-col first">
      <img src="http://computer-nurse.com/TestWillow/wp-content/uploads/2016/03/InterimExecutiveLeadership-e1459377781942.jpg" alt="">
      <p>Interim executive leadership</p>
   </div>

In firebug I see yours formatted exactly like your tutorial but mine looks like this. I don't know if WordPress adding and subtracting may be causing the problem. It's added a <p></p>:

<div class="one-fourth inline-col first">
<img alt="" src="http://computer-nurse.com/TestWillow/wp-content/uploads/2016/03/InterimExecutiveLeadership-e1459377781942.jpg">Interim executive leadership
<p></p>

I also am using a "custom.css" stylesheet. I find it easier to keep track of customization this way. It seems to be working ok.

I put in a new page just with this and no other text. This is the new link: http://computer-nurse.com/TestWillow/columns-2/

[carasmo]

It's the html combined with the CSS that will make it work. You have:

<p><!--begin inline-block wrapper --></p>
<div class="inline-block-wrapper">
<div class="break-point"><!--empty-for-formatting--></div>
<p><!--one-fourth.inline-col --></p>
<div class="one-fourth inline-col first"><img src="http://computer-nurse.com/TestWillow/wp-content/uploads/2016/03/InterimExecutiveLeadership-e1459377781942.jpg" alt="" />Interim executive leadership</p>
</div>
<p><!--one-fourth.inline-col --></p>
<div class="one-fourth inline-col"><img src="http://computer-nurse.com/TestWillow/wp-content/uploads/2016/03/StrategicPlanningFacilitation-e1459377837994.jpg" alt="" />Strategic planning and facilitation</p>
</div>
<div class="break-point"><!--empty-for-formatting--></div>
<p><!--one-fourth.inline-col --></p>
<div class="one-fourth inline-col"><img src="http://computer-nurse.com/TestWillow/wp-content/uploads/2016/03/OrganizationalCoaching-e1459377809878.jpg" alt="" />Community engagement</p>
</div>
<p><!--one-fourth.inline-col --></p>
<div class="one-fourth inline-col"><img src="http://computer-nurse.com/TestWillow/wp-content/uploads/2016/03/CommunityEngagement-e1459377820509.jpg" alt="" />Organizational coaching</p>
</div>
</div>
<p><!--close inline-block wrapper --></p>

That is not the html in the tutorial. Where are you adding this?

If you are adding to a widget, untick the auto add paragraph setting (wpautop). If in the editor, use: https://wordpress.org/plugins/toggle-wpautop/ which will allow you to toggle off the wpautop on a post by post basis.

---

Genesis Theme Customization and Help

[AmyWordPress]

Thank you once again. I was adding it into the text tab of the page. I installed the Toggle wpautop plugin and that solved the problem I was having.

[Author]

Posts