Hi Claxius,
there are a couple different ways to achieve this look.
There are 3 ways I know of now that are pretty popular. All 3 of them will allow you to put multiple items on one horizontal line, and will bring them down to a new line on smaller screens where they wont all fit on the same line.
The first would be to use the Bootstrap grid system. Bootstrap will allow for multiple types of possible grids, and allows a lot of options for how you want them to be layed out on different platforms. If you go this route, you would have to link bootstrap to your themes header file and functions.php, but it is pretty easy to do and the code to do so is on their site.
Bootstrap grid system
good article for linking bootstrap to WordPress theme
Another popular method would be to use CSS flexbox. With this method you can give your element a display of flex, and a flex-direction: row;. It is pretty simple and will simply bring items down to the next line on screens where all the items will not fit on 1 row. From what I gathered from your question, I think it may be the best option because of it’s simplicity and effectiveness.
Information on how flexbox works
The other popular method I know of is using the CSS grid system. I haven’t used it much yet, but I believe it is similar to the way Bootsrap works, and it doesn’t look too difficult to figure out.
CSS grid overview
The old way for reference if you for some reason want to go that route, would be to use regular CSS. You can wrap all the items in one div that you give a display of inline-block in CSS, and then give all the items an attribute of float: left in CSS.
Example here
Was that the type of things your were looking for? Don’t hesitate to hit me up if not or if you have any other questions!
Thanks, Max
Wow thank you so much Max. This was very helpful. I will play around with this info and let you know if I have any more questions. Thank you very much!
You’re welcome! Glad to help!!
