Joomla Templates Club 406,261 posts

[Aratype Friend AratypeJoin date: August 2007Posts: 797Downloads:41Uploads:60 Thanks: 194 Thanked: 98 times in 6 posts]

#194213

I think it is more interesting to hide the intro text, as it varies from a device to other, and to have a longer space for the article’s title.

Could it be possible to have 3-4 lines’ title?

Thanking you in advance.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#520509

Hi Ara,

We will need to adjust the article title’s height on various device resolutions so I would like to suggest you to create a custom.css file at templates/ja_smashboard/css/ path rather editing the .less file. You just simply add below css rules format into this css file:

.view-featured .article-intro,
.blog-featured .article-intro,
.blog .article-intro {
display: none !important;
}
@media (min-width: 1200px) {
.item .article-title,
.item .article-header h1 {
height: 7em;
}
}

Adjust the height on other device resolutions with media queries you want. The css style of intro section is the global parameter so you do not need to define in other media queries anymore.

1 user says Thank You to phong nam for this useful post

1. Aratype

[Aratype Friend AratypeJoin date: August 2007Posts: 797Downloads:41Uploads:60 Thanks: 194 Thanked: 98 times in 6 posts]

#520592

Thanks Leo,

I tested your code and I noticed that it let the intro text disappear.

However, I can do that from a Joomla feature in the back-end.

So, I noticed that putting the code will let the intro text disappear but it will not permit to add a 3d line to the title…

This what you can see in the test that I made with the first article (Beethoven)

Any other idea please…

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#520713

@ Ara: The 3rd line of article title will depend on its height on responsive view (i.e desktop view). Please try to insert the declaration I suggested into the custom.css file again. You can see my attached snapshot for the result on our template demo.

Note: I removed the space after @ that can cause the css rules fail to take effect.

---

Attachments:

1. 

[Author]

Posts