REFRESH rounded corners multiline custom CSS

Store Design
,

Topic summary

Goal: On the Refresh theme, achieve mobile-only styling in a “multiline” section where the image keeps rounded corners but the text area has square (non‑rounded) corners, without affecting other sections.

Context: Issue appears only on smartphones; desktop looks correct. Images/screenshots are central to understanding the visual differences.

Tried solutions and effects:

  • base.css rule on .card-wrapper .card__content (border-top corner radius 0): ineffective on mobile.
  • Mobile media query (max-width: 1000px) targeting content-container:after (border-radius 0): fixes multiline on mobile, but breaks other sections (multicolumn, collapsible content) and affects shadows.
  • Additional rule forcing --color-shadow: transparent on specific section selectors: removes shadows (undesired), only helps multiline.
  • Rule on .contains-content-container (border-radius 0): preserves all sections but fails to fix multiline.

Latest status: No single CSS rule satisfies all requirements. Two partial options remain: one that fixes multiline but harms other sections, and one that preserves other sections but not multiline. The helper believed the issue resolved, but the requester confirmed the mobile problem persists.

Open need: A more precise mobile-only selector that targets only the multiline text container (not images), preserves shadows, and leaves multicolumn and collapsible content unaffected.

Summarized with AI on December 21. AI used: gpt-5.
7

Hi @StillVaping ,

We’re happy to see that our suggestion helped you solve the issue.

To complete your requirement, you can add more this script to this code directly into base.css:

ul#Slider-template--23203130081622__46e56e0b-4a95-439d-a9e1-4aed95933ef0, 
.collapsible-content__wrapper.section-template--23203130081622__ea5b3494-bd20-4e8b-b632-5139904a2ca5-padding.content-container.color-scheme-6c284116-0432-4358-a720-c3070adbc651.gradient {
    --color-shadow: transparent !important;
}

And the result will be:

BSSCommerceB2B_0-1723824944561.png
BSSCommerceB2B_0-1723824944561.png382×679 167 KB

BSSCommerceB2B_1-1723824977662.png
BSSCommerceB2B_1-1723824977662.png380×794 39.7 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!