Increase white space below headings on home page

Ugh, you disabled the right-click on your web site. I understand that you want to keep people from downloading your images, but it just makes it a lot more difficult to inspect your site with a web debugging tool like Firebug or Chrome Developer Tools. Plus, there are multiple ways of capturing the images even if you disable the right mouse click: viewing the source, using one of the debugging tools, using a screen capture utility, or copying them out of the cache, just to name a few.

You should avoid using inline styles. The preferred method is to use a CSS stylesheet. Assign a class to the two h1 elements (like image_title) and write a single CSS rule to style both:

.image_title {
    text-align: left;
    display: inline;
}

You’ve created a child theme, which is good, but it looks like you are importing the parent style.css file in JetPack’s Custom CSS as well as in the child theme’s style.css file, which is a bit odd, if not redundant.

Now, there’s a fundamental flaw with the way you’ve designed the titles to go with the pictures. If you make the browser window narrower, you’ll see that the picture on the right will collapse under the picture on the left, but the title remains at the top. Make it even narrower, like the width of a cell phone, and it will really look odd. What should be done is to group each title and image inside its own DIV. That way you won’t need the odd margin-left and margin-right properties for the first title. Make the DIVs inline-block so they’ll sit next to each other.

Ugh, you disabled the right-click on your web site. I understand that you want to keep people from downloading your images, but it just makes it a lot more difficult to inspect your site with a web debugging tool like Firebug or Chrome Developer Tools. Plus, there are multiple ways of capturing the images even if you disable the right mouse click: viewing the source, using one of the debugging tools, using a screen capture utility, or copying them out of the cache, just to name a few.

I realize that it is not foolproof, but I still like it – would it be easier to disable this function for the purposes of resolving this issue?

You’ve created a child theme, which is good, but it looks like you are importing the parent style.css file in JetPack’s Custom CSS as well as in the child theme’s style.css file, which is a bit odd, if not redundant.

How/where can I remove this? When I change my CSS I do it under appearance>edit css. Is this the correct/preferred place to do it?

Where do I assign a class to my elements? Do I do that in a .php file? I am a complete beginner with coding, everything I have done so far is from testing out forum answers until I find what works for me!

Thanks so much for the info!

would it be easier to disable this function for the purposes of resolving this issue?

No, it makes it inconvenient, but it’s manageable.

How/where can I remove this? When I change my CSS I do it under appearance>edit css. Is this the correct/preferred place to do it?

Yes, since you are using a child theme, that is the correct place to add your custom CSS. However, I only see the import statement in your child theme’s style.css file. The other custom CSS seems to be entered through JetPack’s custom CSS option; is this correct?

Where do I assign a class to my elements? Do I do that in a .php file?

No, you just do it in your page. So instead of this:

<h1 style="text-align: left; display: inline; margin-left: 205px; margin-right: 350px;">Weddings</h1>
<h1 style="text-align: left; display: inline;">Lifestyle</h1>

You would do something like this:

<h1 class="image_title">Weddings</h1>
<h1 class="image_title">Lifestyle</h1>

I’m going to be gone much of the day, but I’ll post a bit more detailed info later.

Yes, since you are using a child theme, that is the correct place to add your custom CSS. However, I only see the import statement in your child theme’s style.css file. The other custom CSS seems to be entered through JetPack’s custom CSS option; is this correct?

Ok, I think I know what you mean. I opened a style.css file in my file manager, but have never done any styling/coding in there except for changing the author details etc in the first part. I assume then that I have only been using Jetpack’s css option to do my styling.

I’m going to be gone much of the day, but I’ll post a bit more detailed info later.

Thank you, I’ll play around with what you gave me and maybe I get something productive done! Thanks!

I’ve played around a bit with the div’s etc and so far I’ve got this:

<div class="staticlinks"><div class="weddingbox"><h1 class="image_title">Weddings</h1><a href="https://lovemebluphotography.com/blog/wedding/"><img style="float: left; margin-left: 50px; margin-right: 50px;" src="https://lovemebluphotography.com/wp-content/uploads/2014/02/MG_6427b.jpg" alt="" width="405" height="270" /></a></div><div class="lifestylebox"><h1 class="image_title">Lifestyle</h1><a href="https://lovemebluphotography.com/blog/lifestyle/"><img style="float: right; margin-right: 50px;" src="https://lovemebluphotography.com/wp-content/uploads/2014/07/IMG_9933.jpg" alt="" width="405" height="270" /></a></div></div>

I’ve included the following into my css:

.image_title {
	text-align: center;
	display: inline;
}

.staticlinks {
	width: 960px;
	display: inline-block;
	clear: both;
}

.weddingbox {
	width: 50%;
	float: left;
}

.lifestylebox {
	width: 49%;
	float: right;
}

It looks better, the images are where I want them!, But the titles should be centered to the images! – any suggestions?

I was just looking for the past half hour, and I see where you just made a change to create the weddingbox DIV and lifestylebox DIV. In my opinion, you should go back to assigning each the staticlinks class unless you intend on styling the Wedding link differently than the Lifestyle link. That is, here is how I would do it:

<div class="staticlinks">
<h1 class="image_title">Weddings</h1>
<a href="https://lovemebluphotography.com/blog/wedding/">
<img src="https://lovemebluphotography.com/wp-content/uploads/2014/02/MG_6427b.jpg" alt="" />
</a>
</div>

<div class="staticlinks">
<h1 class="image_title">Lifestyle</h1>
<a href="https://lovemebluphotography.com/blog/lifestyle/">
<img src="https://lovemebluphotography.com/wp-content/uploads/2014/07/IMG_9933.jpg" alt="" />
</a>
</div>

Again, avoid using inline styles for your images. You can assign them a class, although it’s not strictly necessary since they are already inside a DIV which has a distinct class.
The use of width and height attributes has been deprecated (i.e., no longer suggested for use). Use the width CSS property instead.

Notice, too, that there is no DIV used to contain the two separate DIVs.

Then I would use this CSS:

.staticlinks img {
   width: 100%;
}
.image_title {
   text-align: center;
   display: block;
}
.staticlinks {
   float: left;
   width: 40%;
   margin-right: 5%;
   clear: none;
}

@media screen and (max-width: 700px) {
   .staticlinks {
      width: 100%;
      margin-right: 0;
   }
}

The first rule sets the width of the image to 100%, meaning it allows the image to fit the width of the container. This will allow the image to grow and shrink with the size of the view port (you’ll see this in a second).

The second rule sets the title styling.

The third rule sets the spacing for your image links. The width property of 40% means to set the size of the DIV to 40% of the space. There’s a right margin of 5% for each DIV. This rule will allow the two links to line up side-by-side.

The last rule resets the width of the image links to 100%. It is in a section called a media query. The media query is used to make changes to a site based on the width of the browser, and it is the way developers change the appearance based on whether the site is being viewd on the smaller screen of a mobile device. In this case, the media query says that if the screen width is smaller than 700px, then set the width of the image links to 100%. This will collapse the image links on top of one another, and then the widths will look good on a mobile phone, instead of being squashed together.

So what this technique does is allow you to add other links in the future without having to do much re-coding. Just add another DIV with the class of staticlinks.

Oh my goodness!! SO simple!! And it looks great on screen & on mobile!!

I played around with the %’s and ended up with this:

.staticlinks {
	float: left;
	width: 45%;
	margin-right: 5%;
	clear: none;
}

@media screen and (max-width: 960px) {
	.staticlinks {
		width: 100%;
		margin-right: 0;
	}

Thank you SO much! Now one last thing, and back to my original question:

How do I (now) decrease the white space between the headings/titles and the images? (about half)

There are two elements contributing to the white space: 1) the < br /> tag that’s between the anchor (link) tag and the image tag, and 2) the bottom margin of the heading. First, delete the the < br /> tag, you don’t need it. Then add this CSS rule and adjust to the value you want (the value listed is the current value):

.staticlinks h1 {
   margin-bottom: 24px;
}

Thank you @crouchingbruin – you have been the biggest help!! Everything now to my liking and in correct format!! Thanks so much!!