Display 2 columns on category page - mobile! Old version

General Installation & Upgrade
1

Good evening

I need your help regarding the display of 2 products per category for mobile.

I have version 4.7 which I don’t want to change because it works well, the customers are satisfied but I can’t align the 2 products on the page.

I managed to make 2 products on the page from 1 product with this css

@media screen and (max-width: 480px) {
.ty-column4 {
width: 50%;
}
}

But the problem is that some products are not lined up well.

The theme is VIVA SHOP (I tried to talk to them but they said they didn’t have time)

I also attached a picture…

Thank you!

2

It looks ok for me. Have you managed to fix the issue?

3

Hello

I fix it but it seems like the page is loading slower…the image in the category page.

4

Yes,

That’s right, on mobile the images are more difficult to load when there are 2 per row

Does anyone know why, and how to fix it?

Thank you!

5

Yes,

That’s right, on mobile the images are more difficult to load when there are 2 per row

Does anyone know why, and how to fix it?

Thank you!

6

???

Does anyone know why, and how to fix it?

7

It is required to examine issue on your server

8

Can we help me?

I discussed with the people from cs-cart and they answered me like this:

I have managed to reproduce the problem with loading images only when you first open a category page, then when scrolling the images just appear (I attached a screencast to this message).

I checked the source code of one of the images:

<img class="ty-pict vs_lazy_mobile" id="det_img_415" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.gardenfarm.ro/images/thumbnails/350/250/detailed/22/cropmax_foliar_k3ct-4m.jpg" style="max-height:250px; " width="350" height="250" alt="cropmax 20 ml" title="cropmax 20 ml">

The image of 1 transparent pixel is placed in the src attribute. The link to the image itself is located in the data-src attribute. As the page scrolls, src already has the link to the image, thus the image appears:

<img class="ty-pict" id="det_img_415" src="https://www.gardenfarm.ro/images/thumbnails/350/250/detailed/22/cropmax_foliar_k3ct-4m.jpg" style="max-height:250px; " width="350" height="250" alt="cropmax 20 ml" title="cropmax 20 ml">

Apparently, this structure is due to the operation of vs_lazy_mobile which replaces the src and data-src attributes with places as the user scrolls the page, thereby loading images only when they are in the scope of the browser window.

For testing purposes I temporarily renamed the design/themes/energot/templates/common/image.tpl file (in order for the code in it not to work) and the problem with loading images disappeared.

Mobile lazy loading is added by a third-party theme used in your store. Please contact the theme developers regarding this issue as I’m afraid we don’t provide support for third-party themes, add-ons or modifications "

And those who sold me the theme do not have time to help me.

Thanks!

2 Likes