Featured pages on home page have different size ( and it's not pretty)

treasuresoflisboa · Member · Mar 13, 2017 at 12:22 pm
Copy link

Add topic to favorites
Hello!

I’m using the Home page template for my home page, and I’ve featured 3 pages on there. ( each featured page appears as a block composed of an image on top, text below and a call-to-action at the bottom).

they display nicely but my problem is none of them have the same height.
I’ve discovered that they each display the first 42 words of the featured pages so if one page has longer words than the other two pages, of course the featured block will have a superior height.

Could you please tell me if there is any solution that would make the 3 blocks the same height ? it’s very disgracious right now :(
– I could use an exerpt I think but then i would loose my call-to-action and i really need it on each block.
– i could change my text but it’s commercial text and i can’t change it unfortunatly :(

thank a lot in advance for your help, i’ve been on this matter for months.

Have a great day!

The blog I need help with is: (visible only to logged in users)
dave2swords · Member · Mar 13, 2017 at 1:12 pm
Copy link
Good afternoon!
Since your blog is set to private, we cannot look at what you are talking about. You might try changing the font sizes to get the content to fit in similar sized containers, but that creates its own visual imbalance.

Perhaps you could edit the entries to make them the same size visually by adding verbiage to the shorter?

dave
thesacredpath · Member · Mar 14, 2017 at 2:05 am
Copy link
Hi @ruthyguez, you can try making your own excerpts and enter them into the Excerpt box down below the Revisions area in the page template. That way you are in control of the length of the excerpt. This is probably going to be your best solution.

We can set a minimum height for the three sections, but because the length of the excerpt changes (physical height as the words shift from line-to-line) as the screen gets smaller, we can’t really get things perfect at all screen resolutions, and getting the buttons to align from one to the other is also problematic. If you wish to give this solution a try and then test things, add the following to the very bottom of your custom CSS.
```
@media screen and (min-width: 1281px) {
.home .holder .content .padded .outline {
    min-height: 350px;
}
}
@media screen and (max-width: 1280px) and (min-width: 768px) {
.home .holder .content .padded .outline {
    min-height: 260px;
}
}
```
treasuresoflisboa · Member · Mar 15, 2017 at 9:36 am
Copy link
Hi thanks to you both for your answers, you actually inspired me to find the solution. I figured that I could actually create a button directly into the exerpt. so what I did is : I created an exerpt with the exact same amount of letters ( not words, as it’s an exerpt! so it’s more practical) and I inserted a button directly into it by using :

<p style=”text-align:center;”>Informations & réservations

Thank you for your help!
thesacredpath · Member · Mar 15, 2017 at 7:01 pm
Copy link
Awesome, and you are welcome! Nice sleuthing.

No items found.