Goal: reduce excessive mobile spacing in the Refresh theme’s Multicolumn section and address Rich text width behavior.
Mobile spacing issue: The gap was between the Multicolumn heading (“How to Use Your Somna Sleep Original”) and the four columns below it, not between individual images and their text. It affected mobile view only.
Solution implemented: Add CSS to base.css to decrease the heading’s bottom margin on small screens:
@media screen and (max-width: 749px) { .multicolumn__title { margin-bottom: 1rem !important; } }
This media query targets mobile; reducing margin-bottom closed the gap. The OP confirmed it resolved the issue.
New unresolved issue: In a Rich text section (“Fall Asleep Faster & Deeper -Naturally!”), “Make section full width” is enabled, and the section’s selection box spans full width, but the text remains in a narrower inner container. It does not match the width of adjacent sections (above/below), and no Theme editor option appears to control this.
Status: First issue resolved via CSS. Second issue (Rich text width/container constraints) remains open; awaiting guidance on how to expand the text container to match surrounding content.
Hi,
using the Refresh theme, Multirow section.
I am trying to reduce the space between the image and the text associated with the image ( mobile only). On mobile view, the text in the row is set to appear below the image in the row. However, there is a large gap between the picture and the text at the moment.
How do I go about removing or reducing this space?
Thank you
@pete96 - can you please share this page link?
Hi - Thank you for your reply -
Page link is: somna-sleep.myshopify.com (Pwd is taglee)
Scroll down the Home page to where the heading reads “How to Use Your Somna Sleep Original”. This heading and the four columns below it (labelled 1, 2, 3, 4) are part of a ‘Multicolumn’ section in the Refresh theme.
I am referring to the gap between the heading and the 4 columns. I would like to reduce this gap so the heading and the 4 columns beneath it look more ‘connected’. There is no setting for this in the Theme ‘multicolumn’ settings.
Any help would be appreciated!
@pete96 - please add this css to the very end of your base.css file and check
@media screen and (max-width: 749px) {
.multicolumn__title {margin-bottom: 1rem !important;}
}
Many thanks for your help - all good now!!
Another part of the page that I find very puzzling is where I am using a ‘Rich text’ section, such as where you see the heading “Fall Asleep Faster & Deeper -Naturally!”.
For this Rich Text section, in the Theme editor I have the “Make section full width” option ticked, and in Theme editor I see a blue box indicating this section is selected, and this blue box is indeed the full width of the screen. But the actual text itself is inside another box, which does not even stretch across the full width of the ‘Multirow’ section below it, let alone the full width of the screen. And I see no options to make this text box wider.
Would you know how I can make this heading use a width that is the same width as the elements above it and below it are using?
Many thanks again! (I am really surprised these things can’t be done in the Theme editor).