How to fix mobile responsiveness issue on my product page?

[Jim141]

Hi, my website's product page mobile responsiveness is causing an issue. Would you like to help me in fixing the issue? 

Website Link: https://fttmaxllc.com/collections/all

Please check it on mobile version

[KetanKumar · Accepted solution]

@Jim141 

can you please provide issue screenshot?

[KetanKumar · Accepted solution]

@Jim141 

can you please provide issue screenshot?

[Jim141]

I have attached the screenshot, you may check. This is the mobile view 

even you can open this link on your mobile device and can check how bad it is looking.

[Jim141]

still waiting to hear back from you

[KetanKumar]

@Jim141 

oh sorry i can't see any attachment 

[Jim141]

Here I am attaching screenshots in a rar file please see below

[KetanKumar · Accepted solution]

@Jim141 

thanks for sharing, can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.css ->paste below code at the bottom of the file.

.grid-item .grid-image img {object-fit: contain;}

[Jim141]

It worked thankyou!

[Jim141]

Another thing ketan, I have just noticed it when I try to go to the second page of the product, then again its all messed up

[Jim141]

I have attached another screenshot where when I go to the product 2nd page and 3rd page all the products are being messed up. Is there any permanent solution for the entire product pages where products images are sorted and of the same size

[KetanKumar]

@Jim141 

yes i have checked its work my end sorry 

[Maskarana223]

Please also reply to me. can I create Best landscaping company in Dubai  services website on shopify to? If yes then How to do it?

[sonnajera2]

There are various approaches to creating a mobile friendly website but the two most common are:

Responsive design: Create a single website like myselfcarenotes.com that adapts layouts, content and element sizes to suit different display sizes.

Mobile sites: Build a separate mobile website in addition to your desktop site.

Responsive design is generally the recommended approach for most types of website, especially since Google has moved over to mobile-first indexing (more on this later).
Your priority is to create the best possible experience on mobile devices and it helps to focus on the limitations of these devices. You’ve got limited screen space to work with, potentially weak data connections and all users really have to navigate and interact with your site is their fingers.

It pretty much comes down to visibility, navigation and speed.