make the highlight on the heading adaptive to all screens?

Store Design
, , ,

Topic summary

Goal: Make a heading’s background highlight (a yellow linear-gradient) scale responsively across screen sizes in a Shopify section.

What was provided:

  • A CSS snippet targeting .image-with-text__heading with a large fixed font-size (70px), a linear-gradient highlight, and an invalid transform: rotate(deg).
  • A screenshot illustrating the current styling.

Proposed solution (responsive CSS):

  • Use viewport-based font sizing (font-size: 6vw) so text scales with screen width; adjust further via media queries (8vw below 768px, 10vw below 480px).
  • Fix rotation by supplying a valid value (transform: rotate(0deg)).
  • Keep the highlight using the existing linear-gradient and background-size: 100% 100% so the highlight scales with the element; optional padding for spacing.

Key concepts:

  • vw = viewport width unit; scales text proportionally to screen width.
  • Media queries adapt styles at set breakpoints for smaller devices.

Outcome/status:

  • A clear, implementable CSS revision was provided. No confirmation from the original poster yet; resolution pending.

Notes:

  • The screenshot helps visualize the highlight effect but is not required to apply the fix.
Summarized with AI on December 17. AI used: gpt-5.
1

Screenshot 2024-10-03 at 10.26.34 PM.jpg
Screenshot 2024-10-03 at 10.26.34 PM.jpg1310×366 20.2 KB

This is my code

#shopify-section-template–16600603525231__image_with_text_HKGLwc {
.image-with-text__heading {
font-family: ‘Rotters’ !important;
font-size: 70px;
color: #ee3f7b !important;
transform: rotate(deg) !important;
margin: auto;
letter-spacing: 0.5px;
background: linear-gradient(to bottom, transparent 0%, transparent 50%, #ffda77 30%, #ffda77 30%) !important;
background-size: 100% 100%;
display: inline-block;
}
}

2

Hi @soomin ,

To make the highlight on your heading adaptive to all screen sizes, you can use vw (viewport width) units for the font-size and adjust the background-size to be responsive. You should also correct the transform: rotate(deg) property by specifying a valid degree value. Here’s an improved version of your code:

#shopify-section-template--16600603525231__image_with_text_HKGLwc .image-with-text__heading {
    font-family: 'Rotters' !important;
    font-size: 6vw; /* Adjust based on your design */
    color: #ee3f7b !important;
    transform: rotate(0deg) !important;
    margin: auto;
    letter-spacing: 0.5px;
    background: linear-gradient(to bottom, transparent 0%, transparent 50%, #ffda77 30%, #ffda77 30%) !important;
    background-size: 100% 100%;
    display: inline-block;
    padding: 0 0.5rem; /* Optional: Adds some padding */
}

@media (max-width: 768px) {
    #shopify-section-template--16600603525231__image_with_text_HKGLwc .image-with-text__heading {
        font-size: 8vw; /* Adjust for smaller screens */
    }
}

@media (max-width: 480px) {
    #shopify-section-template--16600603525231__image_with_text_HKGLwc .image-with-text__heading {
        font-size: 10vw; /* Further adjust for very small screens */
    }
}

Key adjustments:

- Font size: The vw unit makes the text size scale based on the viewport width.

- Background highlight: The background remains adaptive due to its use of background-size set to 100% 100%.

- Rotation: Added a valid rotation value for transform: rotate.

This code will make your heading’s size and highlight responsive across different screen sizes.

Hope it helps!