Help with layout of image and products on mobile homepage please

Solved
Endlessretro
Explorer
96 0 30

Good Evening, 

I am hoping somebody can help...

 

Screen Shot 2021-11-21 at 22.32.22.png

 

I have the above layout on my mobile view home page. I am trying to get the jackets and coats promo box at the top and then the two columns of products below it. Rather than the other way round as shown at the moment. I have tried playing around with the 'mobile content precedence' on the left hand side however cannot seem to find a way to do this. I would appreciate any help anybody can give.

 

URL: https://endless-retro-22.myshopify.com/

 

Thank you

Accepted Solutions (3)

Accepted Solutions
LitCommerce
Trailblazer
288 71 72

This is an accepted solution.

Hi @Endlessretro,

Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.min.css and paste this at the bottom of the file:

@media only screen and (max-width: 749px){
	.home-builder .row >div:first-child{
		order: 1 !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		margin-bottom: 15px;
	}
}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Trailblazer
288 71 72

This is an accepted solution.

Hi @Endlessretro,

Please change code:

@media only screen and (max-width: 749px){
	#shopify-section-1635723487ee2ad62d .row >div:first-child,
	#shopify-section-1586282860739 .row >div:first-child,
	#shopify-section-1635712700c1fa7c41 .row >div:first-child{
		order: 1 !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		margin-bottom: 15px;
	}
}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Trailblazer
288 71 72

This is an accepted solution.

Hi @Endlessretro,

I have added it. https://i.imgur.com/uBU1Chj.png 

You just need to check 'Action top mobile', it will show top at mobile. 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 14 (14)
KetanKumar
Shopify Partner
24923 2498 9041

@Endlessretro 

thanks for all details but your store is password protect can you please share us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Endlessretro
Explorer
96 0 30

@KetanKumar thank you - password has now been removed

LitCommerce
Trailblazer
288 71 72

This is an accepted solution.

Hi @Endlessretro,

Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.min.css and paste this at the bottom of the file:

@media only screen and (max-width: 749px){
	.home-builder .row >div:first-child{
		order: 1 !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		margin-bottom: 15px;
	}
}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Endlessretro
Explorer
96 0 30

@LitCommerce that is perfect thank you SO much!

Endlessretro
Explorer
96 0 30

@LitCommerce I have noticed only slight issue is when I use the code for fix the layout issue - the layout issue is fixed however my Klarna and Clearpay banners move as per the screeenshot below. Prior to adding the code they were next to each other however now one has dropped below. Is this an easy fix?

 

Thank you

 

Screen Shot 2021-11-22 at 18.42.37.png

LitCommerce
Trailblazer
288 71 72

This is an accepted solution.

Hi @Endlessretro,

Please change code:

@media only screen and (max-width: 749px){
	#shopify-section-1635723487ee2ad62d .row >div:first-child,
	#shopify-section-1586282860739 .row >div:first-child,
	#shopify-section-1635712700c1fa7c41 .row >div:first-child{
		order: 1 !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		margin-bottom: 15px;
	}
}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Endlessretro
Explorer
96 0 30
Endlessretro
Explorer
96 0 30

@LitCommerce Unsure if you can help - the code you gave me works however - Id like the desktop view to be like the screenshot below - with the Levis image on the right hand side as opposed to left. However when I move the images under builder for desktop view, it changes the mobile view and the Levis image then goes back below the products as per the screenshot below.  Is there a code I can put in to ensure the Levis image is on the right hand side on desktop view and at the top of the products on mobile view? Screenshots are below. I hope makes sense. 

 

Screen Shot 2021-11-23 at 21.01.22.pngScreen Shot 2021-11-23 at 21.01.08.pngScreen Shot 2021-11-23 at 21.00.55.png

 

 

LitCommerce
Trailblazer
288 71 72

Hi @Endlessretro,

Because there is no class to distinguish images from other blocks, so it would be difficult to instruct the code to change everything.

If you want, you can create a staff account with email: namphan992@gmail.com

I will add class and option so it always works fine.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!