How to Make Multirow Full Width

Store Design
, ,

Topic summary

Goal: In Shopify’s Dawn theme, make the Multirow section span full width so images reach screen edges, while keeping text inset (not touching edges).

Attempts: Changing the container in Multirow.liquid from page-width to full-width and using CSS (.multirow .multirow__inner { padding: 0; max-width: 100% !important; }) both caused the text to touch the screen edge.

Suggestion: A responder advised adding custom code to theme.liquid before to address it (the exact snippet wasn’t included in the post).

Current implementation: The OP applied a desktop-only media query (min-width: 750px) to set .multirow .multirow__inner full width with no padding and add 6rem right padding to the text content, which fixes sizing and prevents edge-to-edge text on larger screens.

Open issue: On mobile, they want the image to remain full width while the text retains padding; removing the desktop-only wrapper makes text hit the edges on small screens.

Status: Ongoing; seeking mobile-specific CSS solution. A screenshot is included to show the desired layout.

Summarized with AI on December 16. AI used: gpt-5.
1

Hello,

I am using the stock Dawn theme. No customizations from what you would find if you downloaded the theme yourself. However, I want to make the multirow full width instead of page width.

Now, I have been able to achieve this, but the result is less than desireable.

Changing

to
in Multirow.liquid works, but the text touches the edge of the screen.

Using this custom css code .multirow .multirow__inner { padding: 0; max-width: 100% !important; } works, but again, the text touches the edge of the screen.

The result I am looking for is the image should touch the edge of the screen and have no padding, but the text should still be placed properly

Screenshot 2024-10-22 151648.png
Screenshot 2024-10-22 151648.png1755×619 68.2 KB

2

Hi @mOONbOOTS

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the 


Hope this can help you solve the issue

Best regards,

Richard | PageFly
1 Like
3

Thank you!

I ended up using this, which properly sizes the text and image and keeps the text from touching the edges of the screen on mobile:

@media only screen and (min-width: 750px) {
  .multirow .multirow__inner {
    padding: 0;
    max-width: 100% !important;
  }
  .multirow__inner .image-with-text__content {
    padding-right: 6rem !important;
  }
}

Would you know how I could get the image to be full-width on mobile but prevent the text from touching the edge of the screen?

If I don’t wrap the code in desktop-friendly CSS, the text touches the edges of the screen on mobile.