-
Posts
-
Hello !
I’m trying to move the “Read more” ordinary at the end od the sentence in the Featured content, to the bottom right of the box.
You can see what I’m talking about there :
But, sometimes, when the page is opened on firefox or CHrome, the third “Read more”) disapear…
You can see there :
The CSS line I’m using are :
#featured-content .entry-summary p, #featured-content .more-link {
font-size: 1.2rem !important;
color: #036;
-webkit-font-smoothing: antialiased;
}#featured-content .more-link {
border-style: solid;
border-width: 1px;
border-color: #4D96F5;
position: absolute;
padding-left: 5px;
padding-right: 5px;
background-color: transparent;
opacity: .7;
right: 0;
bottom: -22px;
border-bottom-right-radius: 5px;
}
#featured-content .entry-meta a, #featured-content .entry-title a {
color: #036;
font-weight: bold;
font-family: arial, freeSans, sans-serif;
}#featured-content .entry-title a:hover {
color: #4D96F5;
}#featured-content .entry-meta {
display: none;
}#featured-content .entry-wrap {
height: 13.4rem;
padding: 1.2rem 1rem;
}#featured-content .entry-title,
#primary .entry-title {
text-transform: none;
line-height: 115%;
}#featured-content .entry-summary,
#featured-content .entry-title {
color: #036;
font-size: 1.8rem !important;
}#featured-content {
border-bottom-right-radius: 5px;
overflow: hidden;
}#featured-content .entry-wrap {
background-color: rgb(244,247,250);
border-color: #EBF0F9;
border-style: solid;
border-width: 2px;
}#featured-content .more-link {
color: #036;
font-weight: bold;
}#featured-content .more-link:hover {
color: red;
opacity: .8;
}/////
I think that the part :
#featured-content .more-link {
border-style: solid;
border-width: 1px;
border-color: #4D96F5;
position: absolute;
padding-left: 5px;
padding-right: 5px;
background-color: transparent;
opacity: .7;
right: 0;
bottom: -22px;
border-bottom-right-radius: 5px;
}I think that these lines particulary Are responsible for this problem…
Do you have an idea of what happen ?
Thx a lot for your help,
Br,
E.
The blog I need help with is cgtpoitoucharentes.wordpress.com
I checked your site but couldn’t see the problem you described in action. Based on looking at your screenshot only, it seems like the height of the home page featured posts is fixed whereas the text inside them isn’t.
In your custom CSS, I see that you have this:
#featured-content .entry-wrap {
height: 13.4rem;
}You could try making that height larger so it always fits the text. You will need to try it out and test to see what works best with your various content titles and excerpt snippets.
Hello DesignSimply,
I tried your solution by chaging the code like this :
#featured-content .entry-summary p, #featured-content .more-link {
font-size: 1.2rem !important;
color: #036;
-webkit-font-smoothing: antialiased;
}
#featured-content .more-link {
border-style: solid;
border-width: 1px;
border-color: #4D96F5;
position: absolute;
padding-left: 6px;
padding-right: 6px;
background-color: transparent;
opacity: .7;
right: 0;
bottom: -25px;
border-bottom-right-radius: 5px;
}
But it don’t works, no matter the height chosen :/ …
You can see this there :
Thx for your help,
Br,
E.
Aha, I think I might understand now. I think what you want to do is apply absolute positioning to the more-link for featured posts, not make them relative to the paragraphs like they are now.
First, I would really recommend reading this page. It has a really clear explanation about how absolute positioning works:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/Next, it helps me a lot of the time to temporarily apply colored borders to some of the elements to help visualize what they are doing and how they interact. Try adding this to your Appearance > Customize > CSS editor just while previewing:
#featured-content .entry-wrap { border: 2px solid pink; } #featured-content .entry-summary { border: 2px dashed chartreuse; } #featured-content .more-link { border: 2px dotted aqua;}See how the more links follow their immediate parent container? And see how those containers are at variable locations relatively? If you want to move the more link so that it’s relative to a container that is a few levels up (“entry-wrap” in this case), then you need to set the middle containers to position:static and the container you want the positioning to be relevant to as position:relative.
Here is an example:
#featured-content .entry-wrap { position: relative; } #featured-content .entry-summary { position: static; } #featured-content .more-link { position: absolute; display: block; bottom: 12px; right: 12px; }Note that you still may need to keep the taller height for the “entry-wrap” like I recommended before. How high will depend on how many lines the title and the the excerpts of the posts fall to and how much space those take up.
The topic ‘Faetured content : How to align "Read more" at the bottom right’ is closed to new replies.
Theme Support 