How can I make my mobile theme view identical to my desktop view?

Store Design
, , , ,
1

Hello,
I am using a theme called Flex (https://outofthesandbox.com/products/flex-theme) for my website. I want my mobile view to look like my desktop view. There is no issue in and its highly responsive but I like the desktop version more and I want the desktop version to be visible on all devices.
like to my store: https://fridgy.com.au/

2

Hi @technase

You can follow these steps to make mobile view looking like your desktop view

Step 1: Go to Themes → Edit Code

BSSCommerce_3-1686647784197.png
BSSCommerce_3-1686647784197.png1724×838 138 KB

Find the file styles.css

Please notice some code line have the form @media only screen and (max-width: 480px) (mobile) or @media only screen and (max-width: 798px) (tablet)

For example, I find this code in file file styles.css.

@media only screen and (max-width: 480px)
.small-down--one-half {
    width: calc(50% - 20px);
}
@media only screen and (max-width: 798px)
.medium-down--one-half {
    width: calc(50% - 20px);
}

Please delete and here’s the result:

AR:

BSSCommerce_4-1686647911540.png
BSSCommerce_4-1686647911540.png425×811 85.9 KB

ER:

BSSCommerce_5-1686647928077.png
BSSCommerce_5-1686647928077.png453×806 76.9 KB

Note: You can understand that the css snippets written in @media only screen and (max-width: 480px) or @media only screen and (max-width: 798px) (tablet) are styled for mobile and tablet view, if you don’t want your site to be affected by those styles, please delete it

Remember to back up your edited, because you may need those css snippets for mobile later.

If it worked, please mark as a solution. Good luck!

1 Like