Flexbox - blog entry layout - read more button

HTML & CSS
1

I have the following wordpress html output

<main class="blog">
<article id="post-69" class="post-69 post type-post status-publish format-standard hentry category-uncategorized">
<header>
<h2><a href="http://localhost/wp/post-5-2/">post &#8211; 5 &#8211; test title for test post</a></h2>
<div>February 18, 2020</div>
</header>

<p>Nullam tincidunt nulla justo. Quisque egestas est sed facilisis ornare. Etiam accumsan nisl vitae eleifend suscipit. Nulla eu mauris finibus, consequat arcu non, eleifend odio. Donec ipsum mi, aliquet non nulla eget, congue condimentum dolor.Duis a erat molestie, ultrices justo eget, venenatis sem.Praesent eu consequat nisl. Interdum et malesuada fames ac ante ipsum primis in&#8230;</p>

<p class="read-more">
<a href="http://localhost/wp/post-5-2/">Read more</a>
</p>

</article>

and the following css (main container is set to display: flex) so all direct children become flex items.

/*blog start*/

.blog {
flex-wrap: wrap;
padding: 0 7px;
}

.blog article {
 margin-bottom: 3em;
}

.blog article header h2 {
  margin: 0;
 }

.blog article header h2 a {
    color: rgba(129, 129, 129, 0.966);
    text-decoration: none;
  }

 .blog article header div {
    margin: 2.5em 0 1.5em;
  }

 .blog article p {
   line-height: 2em;
   
  }

 .read-more {
    display: flex;
    outline: 1px solid green;
  }

.read-more a:after {
  content:'\00bb'; 
  padding-left: 0.1em;
  
}

.read-more a {
  margin-left: auto;
  padding: 0 6px;
  color:#4d4c4c;;
  text-decoration: none;
  
}

.read-more a:hover {
  background: rgb(209, 208, 208);
}

I used margin-left: auto; on .read-more a to push it to the right on the main axis. I am trying to style it as a button and playing with padding,however, I am unable to reduce height of the .read-more a and my understanding it has to do with default flex item behaviour

2

Can you post a screenshot of what your seeing.

The code you posted seems to be doing everything you told it to do. I don’t see an issue with the height, it’s picking up a 2em line-height from here…

 .blog article p {
   line-height: 2em;
  }

Read more

3

I am looking to change the height only of the .read-more a. I added padding: 0 6px; to it to have on hover background applied to it but I can’t figure out how to change .read-more height (say I want to have this “button” smaller in height)

read-more-height
read-more-height998Ă—274 13.4 KB

4

Hi, as I pointed out in my previous post the only rule effecting the height was the line-height:2em; that was set on all .blog article p elements.

That is indeed where the problem lies, not only that but you have a specificity issue going on as well.

In order to reduce the .read-more line-height you will need to change it to a descendant selector.


 .blog article p {
   line-height: 2em;
  }

 .blog .read-more { /*was .read-more*/
    display: flex;
    outline: 1px solid green;
    line-height: 1.2;/*reset from rule above*/
  }

Now you are back to a default line height and you can control the height with top padding here if you choose.

.read-more a {
  margin-left: auto;
  padding:0 6px; /*add top padding for height*/
  color:#4d4c4c;;
  text-decoration: none;
}

read-more

3 Likes
5

Thanks Ray for catching that specificity issue. How’s padding related to line-height? I did some googling but didn’t find anything specific (probably should work on my Google search skills…). I know that line-height controls leading between the lines of text. Leading is then divided in half and each half is applied to top and bottom of baseline but there we would be dealing usually with a few lines of text. In the example above it is one line…

I guess my question would be why we need line-height in order for top and bottom padding to work

6

We don’t need line-height for padding to work. Padding can be applied to block and inline boxes.

In post #3 you asked how to make the “button” smaller in height. I explained that it was getting it’s apparent height from the inherited line-height. Thus the need to reset the line-height in order to make the button appear smaller in height.

Then I simply noted that you still had the option to control the anchors actual height by using padding.

It’s not directly related, but excessive padding on an element such as a span in the midst of several lines of text could layer over text above and below when the padding exceeds the line-height. As seen in this example below with a background color on the span.
padded span

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
p {
  line-height:1.2;
}
span {
  background:tan;
  padding:8px
}
</style>

</head>
<body>

<p>
  Some random text more random text more random text more random text<br>
  Some random text <span>span with padding</span> more random text<br>
  Some random text more random text more random text more random text
</p>

</body>
</html>
3 Likes
7

Thanks for your clarifications Ray.

1 Like
8

Specifically vertical padding (or margins) on inline elements will not affect the line height at all. The padding will bleed out of the line height and overlap the lines above and below because it has no impact on the height of the line.

Block or inline-block elements will allow padding to increase the space between lines.

The inline box model is in fact one of the most complicated parts of css and few people understand it completely :slight_smile:

7 Likes
9

Thanks Paul.

I agree. I remember I tried reading this article in the past then realized that the further I read the less I understand then I stopped :laughing: I guess best approach that works for me is just try to understand a little portion needed to complete my current task.

1 Like
10

My favourite :slight_smile:

3 Likes
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.