Stop Your WordPress Images from Staggering

After some aimlessness with my blog posts at vivianmaxine.com, I finally decided to make the big decision to pull all of my photography posts and create a separate page of my photography so that I could transition my blog section from a photoblog to a comprehensive archive. I decided to stick to a simple gallery option for now… or so I thought it would be simple.

I used the basic % width approach to setting up my photos, pairing that with the float, margin, and object-fit properties in CSS. It should have been a two- to three-minute endeavor.

But then, this happened…

Okay, so the staggering “stairstep” look is kind of neat, I guess. But it is not what I was going for when I made this gallery! I tried all kinds of things, ranging from applying the clear property to trying to experiment with float different ways. I could not understand why this was happening! My code seemed pretty sound, as far as I could see.

HTML Code

<div class="photographyGallery">
<img src="pic1.jpg">
<img src="pic2.jpg">
<img src="pic3.jpg">
<img src="pic4.jpg">
<img src="pic5.jpg">
<img src="pic6.jpg">

CSS Code

.photographyGallery img {
float: left;
margin: 1%;
object-fit: cover;
width: 30%;
height: 300px;
}

Well, it turns out, WordPress embeds its own paragraph and line break elements into even the regular text editor for posts! In this case, WordPress was adding in its own line breaks even though I didn’t want it to. Talk about bossy! One way that I found to circumvent this was to eliminate those line breaks. And that is just what I did. In order to do this, I called all line break elements in CSS within the .photographyGallery class and changed the display to “none”.

CSS Code (New & Improved)

.photographyGallery br {
	display: none;
}

.photographyGallery img {
	float: left;
	margin: 1%;
	object-fit: cover;
	width: 30%;
	height: 300px;
}

And voila! This is what I got after I added that in.