Justify-content didn’t work.
Topic summary
Goal: Reduce right padding on Dawn 14.0.0 “image-with-text” header and rich text to achieve full-width content on mobile, and justify the text.
Context: Store URL provided (smilebright.lt product page). Changes advised via Assets > base.css. Code snippets are central; screenshots illustrate spacing and alignment.
Actions taken:
- Section-specific fix provided first (ID selector) with adjustable padding.
- Global solution implemented and confirmed: .image-with-text .image-with-text__content { padding: 15px !important; } (value can be set to 0 for no padding). Later example showed padding: 5px.
Text alignment issue:
- Initial attempt using justify-content: center on the content container did not affect mobile text (as it controls flex item alignment, not text flow).
- Final proposed fix targets text elements directly with text-align: justify:
.image-with-text .image-with-text__content .image-with-text__text.rte.body,
.image-with-text .image-with-text__content h2 { text-align: justify !important; }
Outcome and status:
- Padding reduction works globally; user confirmed.
- Mobile text justification fix proposed but not yet confirmed by the user.
Open item: Confirmation that the text-align: justify rule achieves the desired mobile justification.
1 Like