Divi WordPress Theme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

WordPress fix Reply To: How to create boxes of content?

Discussion in 'Misc WordPress Requests' started by Max Dempsey, Mar 31, 2018.

  1. Max Dempsey


    Reply To: How to create boxes of content?, by Max Dempsey

    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

    Reply To: How to create boxes of content?

Share This Page

Monarch Social Sharing Plugin