Help with layout of image and products on mobile homepage please

Good Evening,

I am hoping somebody can help…

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

1 Like

@Endlessretro

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

@KetanKumar thank you - password has now been removed

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 that is perfect thank you SO much!

@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

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!

1 Like

@LitCommerce Perfect! Many Thanks

@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.

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 This would be great thank you. I havent ever set up a temporary staff account - can you advise me what I need to do to allow you access? and what you would need access to?

Thank you

Hi @Endlessretro ,

Refer https://docs.shopify.com/manual/settings/account/staff-members

You just need to provide access to the theme, I will change it.

@LitCommerce Thank you I have sent you an invite. Please let me know if any troubles

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.

1 Like

@LitCommerce Thank you sooo much - that is so helpful and much appreciated!!