Do not stack columns on mobile

[andrewglover]

When using the genesis CSS classes (https://gist.github.com/studiopress/5700003) to generate columns, the default behavior is for these columns to "stack" on top of each other at certain breakpoints on mobile devices. In 90% of cases, I think this is the preferred behavior. However, is there a way to tell a specific columns to "Not Stack" and simply shrink horizontally, so that the columns remain on mobile devices?

I'm trying to get the "Available Versions" section here (https://prod.jamaicacottageshop.com/shop/cross-gable/) keep the three-column layout even on mobile devices.

https://prod.jamaicacottageshop.com/shop/cross-gable/

[Brad Dalton]

Modify the media queries at 960px

/* Column Classes
	--------------------------------------------- */
  .five-sixths,
  .four-sixths,
  .one-fourth,
  .one-half,
  .one-sixth,
  .one-third,
  .three-fourths,
  .three-sixths,
  .two-fourths,
  .two-sixths,
  .two-thirds {
    float: left;
    margin-left: 1.7%;
  }
  .one-half,
  .three-sixths,
  .two-fourths {
    width: 48.717948717948715%;
  }
  .one-third,
  .two-sixths {
    width: 31.623931623931625%;
  }
  .four-sixths,
  .two-thirds {
    width: 65.81196581196582%;
  }
  .one-fourth {
    width: 23.076923076923077%;
  }
  .three-fourths {
    width: 74.35897435897436%;
  }
  .one-sixth {
    width: 14.52991452991453%;
  }
  .five-sixths {
    width: 82.90598290598291%;
  }
  .first {
    clear: both;
    margin-left: 0;
  }

---

Tutorials for StudioPress Themes.

[RichardHK]

@braddalton Many thanks for your help on this, as I had exact same need as Andrew.

I have six images across page which now looks and behaves good on desktops and tablets, but when getting down to mobile size screens, say 480px, the six images scale down to a very small size, too small to read well.

How can I split the 6 images into 2 groups of 3 columns for the mobile view?

Thanks. Any help much appreciated.

[Brad Dalton]

Try this https://www.w3schools.com/css/css_grid.asp wrapped in a media query.

---

Tutorials for StudioPress Themes.

[RichardHK]

Thanks Brad,

Yes, that will work. I also had a brainwave just after posting my question and tried the following mobile media query and it works Ok too it seems:

.one-sixth {
width: 31.623931623931625%;
}

I just pasted the '.one-third' value 31.xx into the one-sixth expression.

I now have 2 ways to do this! Many thanks again, especially for your quick response.

[Author]

Posts