Keyword
Please note that official support for commercial extensions & templates is provided in the Subscriber Help Desk.
Support requests should ONLY be directed there and require an active subscription plan.
This forum board is to be used for archive purposes and knowledge exchange ONLY.

Related items

More
5 years 7 months ago #138105 by Krikor Boghossian
Krikor Boghossian replied the topic: Related items
/* Related items */
.itemRelated { overflow: hidden; margin: 0 0 84px; }
.itemRelated h3 { font-weight: 300; color: #fff; margin: 32px; padding: 0; font-size: 1.875em; }
.itemRelated ul { margin: -0.625em -1.625em 0; }
.itemRelated ul li { display: block; padding: 1.25em; overflow: hidden; border-radius: 3px; float: left; z-index: 3; width: 20%; position: relative;}
.itemRelated ul li:last-child { margin: 0; padding: 0; display: none;}
.itemRelated ul li:first-child {  }
.itemRelated ul li .itemRelImageBlock { position: relative; padding: 0 0 75%; overflow: hidden; overflow: hidden;}
.itemRelated ul li .itemRelImageBlock img { min-width: 100%; position: absolute; left: 0; top: 0; height: auto; min-height: 100%;}
.itemRelated ul li .itemRelContent { overflow: hidden; }
.itemRelated ul li .itemRelTitle { display: block; font-size: 1.5em; margin: 0 0 10px; letter-spacing: -1px; }
.itemRelated ul li .itemRelIntrotext p { margin: 0; color: #fff; }
.itemRelated ul li .itemRelCat a { color: #fff; color: rgba(255, 255, 255, 0.5); }
.itemRelated ul li .itemRelCat a:hover { color: #f7ed05; }

@media screen and (max-width: 600px) {
.itemRelated ul li { width: 50%; }
}

@media screen and (max-width: 400px) {
.itemRelated ul li { width: 100%; }
}

This is the code for transforming the related items into a grid. You can always add some padding and play around with it a bit.
Keep a backup of your template.css file and replace the related items block with this one.

IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member

---
JoomlaWorks
www.joomlaworks.net/

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

  • da vasco
  • da vasco's Avatar Topic Author
  • Offline
  • Junior Member
More
5 years 7 months ago #138106 by da vasco
da vasco replied the topic: Related items
Verry nice!! looks good, thanks!

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

More
5 years 7 months ago #138107 by Krikor Boghossian
Krikor Boghossian replied the topic: Related items
You 're welcome :)

IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member

---
JoomlaWorks
www.joomlaworks.net/

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


Powered by Kunena Forum