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?
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?
Can you provide a link to your page or some code as to how the HTML is laid out currently and the classes associated?
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:
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).
"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).
