Problem with mobile layout

[unfoldesthetics]

Hello, I need help fixing this page on my website. All the settings for mobile is set to show 2 columns but it keeps on doing this. Can someone please help?

[Huptech-Web]

Hello! @unfoldesthetics Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can’t find your custom CSS file, open “base.css”
6. Add the following code at the end of the file.

@media screen and (max-width: 749px) {
    body .grid--2-col-tablet-down .grid__item {
        width: calc(48% - var(--grid-mobile-horizontal-spacing) / 2) !important;
    }
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

[Moeed]

Hey @unfoldesthetics

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 tag

RESULT:

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

Best Regards,
Moeed

[niraj_patel]

Hello @unfoldesthetics

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { .grid--2-col-tablet-down .grid__item { width: calc(45% - var(--grid-mobile-horizontal-spacing) / 2) !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.