TeamsIndividualsPricingExpertsAbout UsContact

Ready to talk to a live expert?

Click the start a session button to instantly be matched with an expert so they can walk you through different questions you may have with your tools.

How Do I Fix The Space Between Featured Images On The Home Page?


Hopps Team

Hi, welcome to Hopps help where we answer questions in two minutes. Today's question is how do I fix the space between featured images on the homepage now for simplicity? I'm going to stay with the stock WordPress theme. You might have a different theme and it's going to be a, it, it might be different and for your situation, but with the stuck theme, this is all I can really focus on because there are thousands. If not millions of themes out there for WordPress. Okay. So, we have a featured image that we added to the stuck theme in WordPress. Now, this doc theme does not allow me to add multiple featured images for that reason. I've added a couple of images to the content of the page instead, and that basically, the premise is going to be about the same. So, if we go to the homepage and I'll just copy this link here because it's going to open a new page otherwise, okay, so now we're on here. This is our featured image. It's listened to large and on top. And then we have the two images that I added in there for the demonstration. Now, how do we get rid of this gap? Because we don't want that gap there. Okay. So, we're going to go into customizing and we'll add additional CSS. I'm going to scroll down so we can see what we're doing here. Notice this gap is still there. I'm going to paste in the code that I wrote earlier. So, you go and fix this problem and I'll explain what it means. Notice the gap has gone, by the way, I just pasted this in. Okay. So, body dot home, that means you use the home class on the body tag and then space. So not cure, but space figure. That means that figure has to follow the body with the home class on it. Now the body is in a standard HTML tag home is the class, and that home only appears on the home page. So, we can only target that homepage this way and the figure is what we're using to display these images. Then we also need to go and get rid of the margin. So, notice what happens if I do a five-pixel margin here, we have a gap. We can also go back to zero, but we don't have that gap anymore. So that margin is gone. That margin between the images is gone. And that's how you get rid of that gap between images on the homepage of your WordPress site. If you have no idea what I'm talking about, feel free to hire an expert on WordPress and today.


Related Videos