I have been having some issues using Descriptions and Hero Images in GS CC. When the page scales outside of monitor sized screens, the text from the descriptions get blended into the Hero image input in admin.
I put the examples and locations where this is happing at for clarification.
Does anyone have any suggestions to have this be a better user experience?
Hey
The readability issue on the category pages comes down to how the hero image is anchored in your custom CSS. It's currently pinned to the bottom-right, so on smaller screens the image crops to its busier side and slides that under your text, making it hard to read, especially on mobile.
Switching the anchor to the left keeps the lighter side of the image behind the text, so it stays readable across screen sizes. If you swap your two .forum-featured-image rules for this single block, it should sort it:
.widget-container--category_hero .forum-featured-image {
height: 315px;
background-position: left center;
}
@media (max-width: 767px) {
.widget-container--category_hero .forum-featured-image {
height: 450px !important;
background-size: cover;
background-position: left center;
}
.widget-container--category_hero .forum-featured-image__content {
height: -webkit-fill-available;
margin-top: 3%;
}
}
One heads-up while you're in there: your old mobile rule was targeting #root > .forum-featured-image, which no longer matches the current markup and quitely stopped applying. The block above uses the updated selector, so mobile behaves again.
Worth testing on sandbox first, but that should get you sorted. Let us know how it looks.
If you ever had a profile with us, there's no need to create another one.
Don't worry if your email address has since changed, or you can't remember your login, just let us know at community@gainsight.com and we'll help you get started from where you left.
Else, please continue with the registration below.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.