How to make the same size of the article intros in 2 column blog

More
8 months 4 weeks ago - 8 months 4 weeks ago #12049 by Aido
Aido created the topic: How to make the same size of the article intros in 2 column blog
Hi,
could you recommend me what to do?
The page with the articles intros looks a bit terrible.
All pics are the same size but due to the different numbers of lines in articles titles and intro texts - the positions of "read more" buttons are also different.
How to align them?

Also, the case becomes even worse on the smaller screens see b3 file.
I mean if I manually align the sizes of the texts and titles for the desktop, for example, they will be different on mobile screens.
Attachments:
Last Edit: 8 months 4 weeks ago by Aido.

Please Log in or Create an account to join the conversation.

More
8 months 4 weeks ago #12050 by marcin
marcin replied the topic: How to make the same size of the article intros in 2 column blog
Hi,

What comes to my mind is truncating the description by a specified number of characters.
There is a great article about that on the Joomla magazine:
magazine.joomla.org/issues/issue-feb-201...trotext-and-new-look
You can try to do that by yourself.
If you wish us to do this for you, then please contact us via tickets to get a quote:
www.joomla-monster.com/my-account/submit-ticket

Regards,
Marcin

Please Log in or Create an account to join the conversation.

More
8 months 4 weeks ago #12054 by Aido
Aido replied the topic: How to make the same size of the article intros in 2 column blog
Thank you Marcin

The article is interesting but the solution looks a bit complicated for me.
I mean I have just some articles on my site - less than 20 and I don't think it will be significantly more.

I thought about the more simple solution something in css area...

Sure I can manually set the end of intro text fo each article I have and solve the text size issue for one type of the screen this way but I don't know what to do with titles especially for different media sizes...

I am new with joomla and really a bit confused - the default result looks very terrible is it only my case?

Please Log in or Create an account to join the conversation.

More
8 months 4 weeks ago #12055 by Aido
Aido replied the topic: How to make the same size of the article intros in 2 column blog
Maybe is it possible to fix the size for each intro (i mean the block of title, pic, into text and 'read more' button), align the 'read more' button to the bottom and the text size I can set manually...
It should help but I have not found the way to do it.

Please Log in or Create an account to join the conversation.

More
8 months 4 weeks ago #12056 by Aido
Aido replied the topic: How to make the same size of the article intros in 2 column blog
My css solution looks like this

/* set min title height (around 2 lines text) */
.items-row.cols-2 .span6 .page-header{
min-height: 51px;
}
/* set min text area (around 5 lines) */
.items-row.cols-2 .span6 .item-image +p {
min-height: 423px;
}
/* set top margin a bit less for better view */
.items-row.cols-2 .span6 p.readmore a.btn{
margin-top: 10px !important;
}

I understand it is far from being universal and I have to control the length of the preview text but it works for me until the number of text lines is not more than 6.

I will be grateful for any comments for optimizing this css code.
Attachments:

Please Log in or Create an account to join the conversation.

More
8 months 4 weeks ago #12058 by marcin
marcin replied the topic: How to make the same size of the article intros in 2 column blog
Hi,

A good idea is to implement a simple script that will add height to the article boxes.
All articles will have the same height. You can then position the readmore button to the bottom of the box so it will be in the same place for each article.
Here is the script you can use:
brm.io/jquery-match-height/

Regards,
Marcin

Please Log in or Create an account to join the conversation.

Time to create page: 0.253 seconds

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2019 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.