Applying CSS rules to only one page

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;
  }
}

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.