Customization led to poor mobile optimization

[gihan7575]

As you can see, my website on desktop looks as intended, however on mobile, it is not optimized correctly. On mobile, it looks strange. I only want the customization I made to be shown on desktop

https://www.dior.com/en_us/fashion/mens-fashion/ready-to-wear/knitwear-sweatshirts

[PageFly-Victor]

Hi @gihan7575

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Victor | PageFly

[gihan7575]

Hey, this did not work. I previously copied your code for another solution. I am not sure if the code is interfering. This is how I pasted the code, along with the other solution.

@media screen and (max-width: 767px){ li.small--one-half { width: 100% !important; } } @media screen and (min-width: 1024px){ // paste your customization code here for desktop }

[EBOOST]

Hi @gihan7575

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code
2. Assets/theme.css
3. Add code below to bottom of file

@media(max-width: 1024px){
	#Collection .grid--view-items  li.small--one-half {
		width: 33.33333%!important;
	}
}
@media(max-width: 749px){
	#Collection .grid--view-items {
		margin-left: 0;
	}
	#Collection .grid--view-items  li.small--one-half {
		width: 50%!important;
	}
}