List Sections
/*HOW TO CENTER-ALIGN THE LAST ITEM OF A PORTFOLIO PAGE IN 7.1 (OVERLAY)*/
@media screen and (min-width: 768px) {
.portfolio-grid-overlay {
grid-template-columns: repeat(~"3, minmax(0px, 1fr)");
}
.portfolio-grid-overlay .grid-item {
grid-column: span 1;
}
.portfolio-grid-overlay .grid-item:nth-last-of-type(1) {
grid-column: ~"2/3";
}
}
/*HOW TO CENTER-ALIGN THE LAST TWO ITEMS OF A PORTFOLIO PAGE IN 7.1 (OVERLAY)*/
@media screen and (min-width: 768px) { .portfolio-grid-overlay { grid-template-columns: repeat(~"6, minmax(0px, 1fr)"); } .portfolio-grid-overlay .grid-item { grid-column: span 2; } .portfolio-grid-overlay .grid-item:nth-last-of-type(2) { grid-column: ~"2/4"; } }
Hover Effects
/* list items */
.list-item:hover .list-item-content__button {
background-color: #353C3C!important;
}
.list-item:hover {
transform: scale(1.05) !important;
transition: all ease-in-out .2s !important;
background-color: #DCEFF5!important;
}
.list-item:hover .list-item-media img{
transform: scale(1.05) !important;
transition: all ease-in-out .5s !important;
}
2 columns on Mobile
/* List 2 columns on Mobile */
section[#]{@media only screen and (max-width: 480px) {
.user-items-list-simple {
grid-template-columns: 1fr 1fr !important;
}}}