How to format 2-column output in multiple rows
-
The HTML example for 2-column output is somewhat trivial. I need to have two-column output, consisting of multiple rows, each of which consists of a picture and an explanation for the picture. Do I just have to do the 2-columns, followed by the clear; for each row? Or should I just find a plug-in?
The blog I need help with is: (visible only to logged in users)
-
Hi there, if you are wanting the descriptions to stay with the image, so that they are always aligned side-by-side, I would suggest something a bit different, but the issue is that on smaller screens, the text beside the image is going to get much longer than the image, if you have a lot of text. How much text will be with each image? Can you point me to an example on your site?
I would suggest doing this by rows, if there isn’t a lot of text instead of by columns. This would be basic example code.
row 1 image code here row 1 image code here row 2 image code here row 2 image code here </div>The only difference between this code and the code for columns basically is that we wrap the pair of divs for the image and text that goes with it in another div so that it keeps them together horizontally.
On small screens though, this is likely going to not work too well for the reasons I gave above.
This issue could be fixed with Custom CSS by using a Media Query, but to do that, you would need the WordPress.com Premium or Business plan, which includes Custom Design and the ability to add custom CSS.
-
Thanks. I’ll try the row-oriented approach with the enclosing <div>. There’s not much text, just my personal take, with my own set of pictures, on
https://schoodicsculpture.org/trail/
I was wondering about the custom css, which was the approach I was thinking of taking. Of course, I don’t have a premium or business plan. But good to know.
- The topic ‘How to format 2-column output in multiple rows’ is closed to new replies.