Elemental: 3 columns of testimonials, responsively drop down to 2 and then 1 columns

Permalink
I'm using the testimonals block as a "Bio" for staff members. I've overwritten the css a bit for the block to be 50% width photo, and 50% width name and bio.

What I'd like to do is change the three columns to show as 2 columns when the screen width gets too small. And a single column when it gets even smaller.


What actually happens is that the three columns shrink in size (deforming the pictures) about 1200px and 1000px

.. Then when the screen is 768px, it will jump to a single column.

How can I tell it to jump to two columns in the mid-point resolutions?

Conkreet
 
hutman replied on at Permalink Reply
hutman
Can you provide a link to your page or some code as to how the HTML is laid out currently and the classes associated?
siton replied on at Permalink Reply
siton
Boostrap grid - mobile first with grid breakpoints (tiny - small - medium - large - X large).
"Stack" - "single column" is the default.

If you say "be 4/12 at large screen" - the "default" medium (768 - from you example) small, tiny will stay!! stack/ "collapse" like your story.

So this is like your ask / ANSWER:
div class="col-md-6-12 col-lg-4-12">
// I am mobile first - you dont change the deafult xs or sm so i will stack at tiny and small. In medium i am 50%, In large 33% and also at x-large

In other hand: If you say "be 3/12 at tiny screen" - You will get 3/12 on - small - medium and large & x-large

Thats it. With this idea in mind you can get any responsive layout..
Learn about "boostrap grid" in google or youtube (endless examples + tutorials)

IMPORTATNT: Read her about mobile first:
http://adamkaplan.me/grid/

Boostrap grid:
http://getbootstrap.com/css/
http://code.tutsplus.com/tutorials/mobile-first-with-bootstrap-3--n...

Also learn about media queries in general (it will help you to understand the idea behind).