How to change the theme setting

Store Design
, , , , , ,

Topic summary

A user wants to modify their Sainstore theme to display products in a single column (one product per row) on mobile devices, instead of the default two-column layout. They also ask whether different layouts can be used for mobile versus desktop.

Solution Provided:
A community member offered CSS code to achieve the single-column mobile layout:

  • Navigate to Online Store → Theme → Edit code
  • Add the provided CSS media query to theme.css or base.css
  • The code targets screens under 767px width and sets product blocks to 100% width

Note: Initial responses requested store access credentials, which the user declined for security reasons. The solution was ultimately provided after sharing only the public store URL (mythgreece.com).

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hi, there.

we are currently using theme named: [current]Sainstore|202108

mythgreece_0-1735108064875.png
mythgreece_0-1735108064875.png1909×907 116 KB

We want the product grid showing one product in a row which is one collumn in mobile.

However, the defalt theme setting is at least two.

Could we change it in the code side or just it is impossible unless change another theme.

By the way is it possible to use different format in mobile and desktop?

Thank you!

2

Hi @mythgreece , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

3

Hi @mythgreece

Could you please share the store link and entry password so we can check it further?

Best,
Daisy - Avada Support Team.

4

NO… shopify suggest me to contact the theme-made website. It’s unsafe to show you the password.

5

Bro, nothing happens; if you share the URL, I’ll give you the solution.

6

Hi, dont know the password things, I am just an admin staff

this is our website

https://www.mythgreece.com/

7

Hi @mythgreece

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:767px){
  .product-block.caption-over-hover {
    width: 100% !important;
 }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

8

Hi

this is our website

https://www.mythgreece.com/