Alternate Categories Module Modification

User avatar
adiazudin
Posts: 34
Joined: Sun May 28, 2017 9:32 am
Location: Kuala Lumpur
Contact:

Alternate Categories Module Modification

Postby adiazudin » Tue Sep 12, 2017 11:10 pm Supported Until: Sat Nov 11 11:53:10 +1100 2017 | Expired

Hi Wiloke Support,

I need your help to modify css for Alternate Categories Module to display 6 boxes evenly in desktop view.

I knew using this module you make 4 boxes per group, I use it to display continent in this world, actually 7 but I need to display 6 only without Antarctica. So, 6 boxes in same sizes.
Last edited by adiazudin on Thu Sep 14, 2017 7:00 pm, edited 1 time in total.
Adi, Designer

User avatar
adiazudin
Posts: 34
Joined: Sun May 28, 2017 9:32 am
Location: Kuala Lumpur
Contact:

Re: Alternate Categories Module Modification

Postby adiazudin » Wed Sep 13, 2017 2:26 pm Supported Until: Sat Nov 11 11:53:10 +1100 2017 | Expired

Hi Wiloke Support,

The problem has already been resolved.

Here's the code:

CodeColon Select All Code

/* Desktop */
@media (min-width:1200px){#jelajah-benua .list-category .category__item:nth-child(1) .category__item-img:before,#jelajah-benua .list-category .category__item:nth-child(2) .category__item-img:before,#jelajah-benua .list-category .category__item:nth-child(3) .category__item-img:before,#jelajah-benua .list-category .category__item:nth-child(4) .category__item-img:before,#jelajah-benua .list-category .category__item:nth-child(5) .category__item-img:before,#jelajah-benua .list-category .category__item:nth-child(6) .category__item-img:before{padding-top:55%}}

/* Tablet & Mobile */
@media (max-width:1024px){#jelajah-benua .list-category .category__item:nth-child(1) .category__item-img:before,#jelajah-benua .list-category .category__item:nth-child(2) .category__item-img:before,#jelajah-benua .list-category .category__item:nth-child(3) .category__item-img:before,#jelajah-benua .list-category .category__item:nth-child(4) .category__item-img:before,#jelajah-benua .list-category .category__item:nth-child(5) .category__item-img:before,#jelajah-benua .list-category .category__item:nth-child(6) .category__item-img:before{padding-top:55%}}


Because media query using the same css settings, just use:

CodeColon Select All Code

#jelajah-benua .list-category .category__item:nth-child(1) .category__item-img:before,#jelajah-benua .list-category .category__item:nth-child(2) .category__item-img:before,#jelajah-benua .list-category .category__item:nth-child(3) .category__item-img:before,#jelajah-benua .list-category .category__item:nth-child(4) .category__item-img:before,#jelajah-benua .list-category .category__item:nth-child(5) .category__item-img:before,#jelajah-benua .list-category .category__item:nth-child(6) .category__item-img:before{padding-top:55%}
Adi, Designer

User avatar
pirateS
Site Admin
Posts: 5109
Joined: Wed Nov 05, 2014 11:49 am
Contact:

Re: Alternate Categories Module Modification

Postby pirateS » Tue Sep 19, 2017 9:54 am

Cool


Return to “Hermes”

Who is online

Users browsing this forum: No registered users and 3 guests