Solved

Taste Theme: Align Multirow Element to Center of Page

liambeauchamp
Excursionist
25 2 5

Hello!

 

I have used a multirow element on my website to show a menu. It was initially full width elemnet, but I made it slightly narrower as I preffered the overall look. The issue is the element now isn't aligned and looks off center on a desktop device. Here is a link to the page: 

 

https://batchedcookies.co.uk/pages/cookie-menu

 

Is there a way to align the element? Also, is it possible to make the image boxes slightly smaller on a mobile device as they are currently taking up a lot of the page?

 

Many thanks,

Liam

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2127 608 474

This is an accepted solution.

Hey @liambeauchamp,

 

In the same code you added the 120rem, add another line for auto margin

 

margin: auto

ThePrimeWeb_0-1713199130533.png

 

The whole code is 

#shopify-section-template--19628476072204__multirow_WcAnL4 .multirow {
    max-width: 120rem;
    margin: auto;
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 3 (3)

Moeed
Shopify Partner
3803 962 1193

Hey @liambeauchamp 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
#shopify-section-template--19628476072204__multirow_WcAnL4 .multirow {
    max-width: 100% !important;
}
</style>

RESULT:

Moeed_0-1713199102542.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

ThePrimeWeb
Shopify Partner
2127 608 474

This is an accepted solution.

Hey @liambeauchamp,

 

In the same code you added the 120rem, add another line for auto margin

 

margin: auto

ThePrimeWeb_0-1713199130533.png

 

The whole code is 

#shopify-section-template--19628476072204__multirow_WcAnL4 .multirow {
    max-width: 120rem;
    margin: auto;
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
liambeauchamp
Excursionist
25 2 5

Thank you! That worked perfectly 🙂