Mobile version to look like desktop.

Solved
Explorer
44 4 5

On my desktop site, i want my promo-grid to look the same on mobile.  It is 1 row with 2 columns on desktop.  On mobile it just turns to 1 column .  I guess its the (@media only screen) thats making it to one column because of responsive design, but i'm not so sure.

 

Does someone have any idea on how to make it two columns on mobile?

I would appreciate any guesses and ideas.  Thank you.

Website - https://elpotrerowesternwear.com/

 

Desktop  Screenshot (57).png

 

Mobile

Screenshot (58).png

 

0 Likes
Excursionist
13 2 2

They are using the css3 Flexbox property, not media query, so you may need to do some reading about that. Check resource sites like css-tricks.com and use whatever you learn there to set the images how you want.

I make custom Shopify pages & themes.. rgeekdigital.com | info@rgeekdigital.com
1 Like

Success.

Hello @ElPotrero,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

 @media only screen and (max-width: 769px) {
#shopify-section-1525912530555 .flex-grid__item--50 {
	-ms-flex-preferred-size: 50%;
	flex-basis: 50%;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Explorer
44 4 5

Hi there @oscprofessional , 

 

Thank you for your help.  I just checked it out and it seems that it worked on Chrome browser on my desktop when i minimized the browser.

It did not work for Internet Explore. I also checked on my phone  Stylo 4 LG and it did not work on Chrome browser.

 

I inspected the source on chrome with different phones and did not work also.

 

Attached is a screenshot of how it looks.  The left is Internet Explore, right is Chrome

Screenshot (61).png

 

 

 

0 Likes
Explorer
44 4 5

Thanks @oscprofessional , @Alex-RightGeek ,

 

I kind of figured it out.

 

 

@media only screen and (max-width: 769px) {
#shopify-section-1525912530555 .flex-grid__item--50 {
	-ms-flex-preferred-size: 50%;
	flex-basis: 50%;
        display: grid;
}
}

The only thing i had to add was display grid at the bottom of the code.  I tried using other code like flex-direction: row; and justify-content: space-around, but that didn't work either.

dsiplay: grid;

 

0 Likes