Plugin Author
Brecht
(@brechtvds)
Hi Kasia,
We don’t have that option built into the plugin but you should be able to achieve something like that with custom CSS code.
You’d use media queries to target mobile/desktop only.
I do not have an example right now, I’m afraid, but technically it’s definitely possible.
Hi Brecht,
thank you for the information.
Best regards,
Kasia
I managed to do it. There are probably bugs here and I would be grateful for a correction 🙂 But it works as I wanted. Maybe it will be useful to someone 🙂
CSS code
.crp-list-title {
color: #c32017;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
border-bottom: 2px solid #c32017;
}
.crp-list-item-title a {
color: #111111;
text-decoration: none;
font-family: ‘Roboto’, sans-serif;
font-weight: 500;
font-size: 13px;
line-height: 15px;
padding-top: 0px;
}
.crp-list-item-title a:hover {
color: #c32017;
}
.crp-list-item .crp-list-item-image {
padding-right: 21px;
}
/* responsive desktop */
@media screen and (min-width: 1140px) {
.crp-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
}
}
/* responsive landscape tablet */
@media (min-width: 1019px) and (max-width: 1140px) {
.crp-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
}
.crp-list-item-image img {
width: 200px;
height: 150px;
}
}
/* responsive portrait tablet */
@media (min-width: 768px) and (max-width: 1018px) {
.crp-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
}
.crp-list-item-title a {
padding-right: 10px;
}
.crp-list-item-image img {
width: 150px;
height: 100px;
}
}
/* responsive portrait phone */
@media (max-width: 767px) {
.crp-list-item.crp-list-item-has-image.crp-list-item-image-above {
flex-direction: inherit;
}
.crp-list-item-image img {
width: 100px;
height: 70px;
}
.crp-list-item-title a {
font-size: 16px;
line-height: 20px;
padding-top: 0px;
padding-left: 0px;
}
.crp-list-title {
font-size: 12px;
}
.crp-list-item .crp-list-item-image {
padding-right: 10px;
}
}
