Hey guys. I am using this CSS code to make the profile image of the vendor visible on mobile:
@media only screen and (max-width: 766px) {
.hp-listing--view-block .hp-listing__header {
display: block !important;
}
.hp-listing--view-block {
padding: 3px 1.75rem 2rem 1.75rem;
}
.hp-listing--view-block .hp-listing__image img {
margin-left: -17px;
}
}
However, this code also makes the profile image visible on the vendor’s page, where it says “Listings by ____”. This is not desired, and I was wondering if it is possible to exclude that page from the CSS rule I created. Thanks!
aha figured it out:
.page-id-50 .hp-listing--view-block {
position: relative;
width: 100%;
padding: 3px 1.75rem 2rem 1.75rem;
}
.page-id-50 .hp-listing--view-block .hp-listing__image img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
@media only screen and (max-width: 766px) {
.page-id-50 .hp-listing--view-block .hp-listing__header {
display: block !important;
}
.page-id-50 .hp-listing--view-block .hp-listing__image img {
margin-left: -17px;
}
.page-id-50 .hp-listing--view-block {
padding: 3px 1.75rem 2rem 2rem;
}
}
@media only screen and (min-width: 767px) {
.page-id-50 .hp-listing--view-block {
padding-top: 28px;
}
}
system
Closed
May 6, 2023, 3:31pm
3
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.