Want your images to be in a row without all of the plug-in hassle? I did too, but this took me quite a bit of time to perfect. Now you, WordPress beginner, can follow these 5 steps:

1. Go to your website (www.yourdomain.com) and click “Customize” in the top left.

2. Click “Additional CSS” on the left sidebar that appears.

3. Into the “Additional CSS” textbox COPY AND PASTE BELOW

/* Images in a Row */

.page-id-83 .post-content{
display: flex;
flex-direction: row;
justify-content: space-between;
flex-flow: row wrap;

}

.page-id-83 .post-content img {
flex-basis: 17%;
display: flex;
flex-direction: column;
align-items: center;
}

END COPY AND PASTE

Your code should look like this:

4. You have to make TWO changes to the code. First, you will have to change the page-id number in the “Additional CSS” text area (where you copy/pasted). Simply replace the 83 with your page’s ID. Here is how to find the page-id:

Be on the page you want to edit (www.yourdomain.com/pageyouareediting) and Right Click > “Inspect”. This will open your browser’s developer tool on the right sidebar. This contains all of the code for your website.

In the body section, you can find the page-id number. You will see it says page-id and a number unique to your page. Use this number (mine is 83 but yours will most likely be different).

 

 

5. Lastly, play around with the percentage for the flex-basis % in the “Additional CSS” text area (where you copy/pasted). Mine is set at 17% because I wanted 5 medium-sized images next to each other before they started a next row. If you want more images in one row, you will put a lower flex-basis % (ex: 10%). If you want fewer images in one row, you will use a higher flex-basis % (ex: 50%).

Voilà; you’re done!

 

Unless… you want to use PDFs (not images) like my Academic Writing page!

This process is a bit more lengthy. First, you need two awesome plugins. Install and activate PDF Image Generator and PDF Viewer.

Now, use this code INSTEAD in the “Additional CSS” box:

COPY AND PASTE BELOW

/*PDFs in a Row */

.page-id-83 .post-content{
display: flex;
flex-direction: row;
justify-content: space-between;
flex-flow: row wrap;
}

.page-id-83 .post-content .wp-caption {
flex-basis: 17%;
display: flex;
flex-direction: column;
align-items: center;
}

END COPY AND PASTE

Don’t forget to change the page-id number to your page’s unique identifying number and to adjust the flex-basis %. See above for those directions.

Ciao for now,

<3 Nan