How to Make Multirow Full Width

[mOONbOOTS]

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 <div class="multirow__inner page-width"> to <div class="multirow__inner full-width"> 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 

[PageFly-Richard]

Hi @mOONbOOTS 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
.multirow__inner .image-with-text__content {
    padding-right: 6rem !important;
}
<style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[mOONbOOTS]

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.