Community Forums › Forums › Archived Forums › Design Tips and Tricks › Question about paragraph spacing
- This topic has 8 replies, 2 voices, and was last updated 6 years, 8 months ago by PeteMarko.
-
AuthorPosts
-
August 16, 2017 at 2:40 am #210439PeteMarkoMember
<div class="first one-fourth">Content delivery network:</div><div class="three-fourths">Faster website loading.</div><br /><br />
<h3>Summary</h3>
In the above example, I am seeing zero spacing on the page?
In other words no spacing between the class and the heading.
Any help much appreciated
August 16, 2017 at 5:03 am #210443Victor FontModeratorYou're not seeing any spacing because the floats used in the column classes haven't been cleared. Add an empty div after the column classes with the class of first or add the class of first to the h3.
<div class="first"></div>
or
<h3 class="first">Summary</h3>
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?August 16, 2017 at 6:35 am #210456PeteMarkoMemberIf I take your meaning correctly, do you mean as follows:
<div class="first one-fourth">Content delivery network:</div><div class="three-fourths">Faster website loading.</div>
<div class="first"></div>
or
<h3 class="first">Summary</h3>Seems I have misinterpreted your meaning as I'm not seeing the fix.
August 16, 2017 at 9:09 am #210463Victor FontModeratorIt's one or the other, not both. You may also have to add some top margin to the h3, but can't know for sure without seeing the site.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?August 16, 2017 at 5:08 pm #210476PeteMarkoMemberAll ok on my WordPress test site.
The problem only occurs on my two Genesis sites.
I set up a temp example on the email subscription page here:
August 17, 2017 at 4:21 am #210486Victor FontModeratorYou never added the code I suggested, but because of how you have your HTML constructed, it wouldn't have worked anyway. You have to refactor your HTML and add some top margin to the h3. I suggest you create a class for the h3. Call it after-columns, perhaps. Then apply the class to your code.
This is what you currently have:
<div class="columns"> <div class="first one-fourth">Emails for updates</div> <div class="three-fourths">Monthly.</div> <div class="first one-fourth">Newsletter</div> <div class="three-fourths">Twice each month</div> <h3>Test heading</h3> <p>Its easy to unsubscribe, just click “unsubscribe” from the email.</p> </div>
All of your code is wrapped in the "columns" div. You still need to clear the floats before your header, but before you can add top margin to the h3, you have to give the header something to "bounce" off of. The columns div has a height of 0 (zero) pixels. In essence, it has no substance. You shouldn't have the h3 or paragraph tag in the columns wrapper anyway. Refactored, this is what the code looks like:
<div class="columns"> <div class="first one-fourth">Emails for updates</div> <div class="three-fourths">Monthly.</div> <div class="first one-fourth">Newsletter</div> <div class="three-fourths">Twice each month</div> </div> <div class="first"></div> <h3 class="after-columns">Test heading</h3> <p>Its easy to unsubscribe, just click “unsubscribe” from the email.</p>
I've taken the non-column elements out of the column wrapper, added the div with the "first" class applied as originally suggested, and added a class to the h3 to add some top margin.
In styles.css, you need to add the following class:
.after-columns { margin-top: 40px; }
Make sure you add the class before the media queries and not in the media queries. You'll also have to adjust the 40px to make the space aesthetically pleasing to your eye.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?August 17, 2017 at 7:07 am #210488PeteMarkoMemberThank you, that seems to have done the trick.
I only just now realized I have a different page where the scenario is the same except, instead of a Heading, I have an image directly after the column classes.
I have replicated the situation here again:
August 17, 2017 at 12:06 pm #210492Victor FontModeratorAdd the after-columns class to the paragraph tag surrounding the image.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?August 17, 2017 at 3:47 pm #210498PeteMarkoMemberSorry for my ignorance, could you show me an example how to do that, please.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.