- This topic is empty.
July 30, 2015 at 11:54 am #205802EgpParticipant
I have a page with several paragraphs of text:
in normal desktop screens, the text is laid out very “widely”, so I thought in putting small grids (say 2×2 or 3×2) of thumbnail-sized images (say, 160x100px) besides each paragraph of text (on either side, doesn’t matter) to serve as illustration and principally to reduce the text to a more appropriate “reading” width in larger viewports.
If possible too, the images could disappear or go ‘downward’ each paragraph when the viewport gets smaller, as in tablets/mobiles. The main idea is for the text width to remain in an appropriate “reading” size whatever the browser’s width.
I thought (and tried) using the normal html/css solutions with float and table, but it’s not quite what I want: not “fluid” or responsive enough.
How this sort of “effect” is called/characterised, so I can search in WordPress themes/plugins and/or perhaps Bootstrap? (I suppose both of them have methods/resources to produce this simple arrangement already, no need to reinvent the wheel everytime, but I don’t know how to start looking for it!)
Thanks,July 30, 2015 at 2:28 pm #205813shaneismeParticipant
Why don’t you show us what you’ve tried?
You can use a CSS framework (eg. Bootstrap, Foundation) that have their own grid systems built in that are easy enough to grasp.
Many WordPress themes have ways using shortcode to set up grids and things in pages or posts.
As far as characterizing the layout – think of it this way: when something doesn’t look right at a certain viewport width, that’s when you need a breakpoint… make adjustments, rinse and repeat.
P.S. your image grid subject made me think of this: http://foundation.zurb.com/docs/components/block_grid.html
- The forum ‘Other’ is closed to new topics and replies.