WebSite X5Help Center

 
Wakhid Khusaini
Wakhid Khusaini
User

Display two images per row on mobile version, for E-commerce: Search  en

Автор: Wakhid Khusaini
Просмотрено 109, Подписчики 2, Размещенный 0  

Hello, I would like the mobile version to have two images in one row for E-commerce Search, please can anyone help?

The step 3-Map, Shopping Cart: Search, Layout and Cards per row are available and for Desktop view it doesn't matter but for Mobile view it shows up as only one row of image.

Размещено
12 Ответы - 1 Полезно - 1 Корректно
Esahc ..
Esahc ..
Moderator

Wakhid, you can often overcome the defaults in WX5 by adding an extra resolution of 320px. You should achieve 2 columns on most mobile devices.

Читать больше
Размещено От Esahc ..
Wakhid Khusaini
Wakhid Khusaini
User
Автор

Please guide me how to do that. I have added en extra resolution for 320px but it show also one image one row.

I need in Search e-Commerce shows two images in each row.

I try to search the discussion, found for product list on the product object, not for Search ecomm (cartsearch) "How to Display two items per row in mobile view", https://helpcenter.websitex5.com/ru/post/270845

Читать больше
Размещено От Wakhid Khusaini
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

It won't work with 320 px; the search bar would have to be placed above the products somehow.

Perhaps the experts have a solution using CSS or JavaScript.

-----

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

I did some tests with CSS code, see screenshot below

From 480 px and wider, two products are displayed side by side; see the CSS code used below.

Instruction:

In WebSite X5, select "3 Sitemap" and "Online Shop: Search" under the special pages and click "Properties" at the top. Then click "Advanced" and insert the CSS code here:

     Custom code:
     Before the closing </HEAD> tag

After exporting, you may want to use the keyboard shortcut Ctrl + F5 in the browser to request the latest files from the web server.

----- CSS code -----

<style>
@media (max-width: 719.9px) and (min-width: 480px) {
#im-cartsearch-container {
padding-inline-start: 3px;
padding-inline-end: 5px;
}
.filter-sidebar { display: none; }
}
</style>

----- Screenshot -----

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

For anyone who wants to follow my instructions, here are my settings:

A) On WebSite X5 under...

     2 Template > Responsive Design

     ... I added "320px".

B) On WebSite X5 under ...

     3 Sitemap

     ... select "Online Shop: Search" at the bottom of the special page,

     ... click "Edit" at the top, and in the "Settings" tab, set the number of fields per row to "2".

The number "3" can result in very narrow product views at larger widths.

Читать больше
Размещено От Daniel W.
Wakhid Khusaini
Wakhid Khusaini
User
Автор

I am sorry Daniel, it doesn't work on my website 

Here is the link, you can test for mobile view, smartphone access

https://mitrajualbeli.com/cartsearch

Читать больше
Размещено От Wakhid Khusaini
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

Unfortunately, I don't have a smartphone to test it on. I'm testing it in Firefox's smartphone simulation.

At first, only one product was displayed per row, but then I scrolled a bit, and then there were two products per row, see screenshot.

Perhaps some users will come along and test it on their smartphones.

-----

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

I added another resolution of 400px and the corresponding CSS code for it, so it should work even at 400px and above, but it doesn't work in the Firefox simulation, even though there's enough space next to it, see screenshot.

Perhaps the CSS experts can suggest a solution if it doesn't work on a real smartphone either.

My demo shop for testing >> https://findelinks.de/123shop-hosteurope/cartsearch/index.html

-----

Читать больше
Размещено От Daniel W.
Wakhid Khusaini
Wakhid Khusaini
User
Автор

Still the same, Viewport 2

This is smartphone view

Читать больше
Размещено От Wakhid Khusaini
Wakhid Khusaini
Wakhid Khusaini
User
Автор

I check again the code I entered, the procedure is right and the position Before the closing </HEAD> tag

Читать больше
Размещено От Wakhid Khusaini
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

When simulating in Chrome at 480px, only one product is initially displayed per row, but when the F5 key is pressed, two products are displayed in one row. The simulation behaves exactly the same in Firefox, see screenshot.

Something seems to be missing to trigger two products to appear in a row. Perhaps JavaScript could help, but I don't have the expertise.

----- Browser Chrome -----

Читать больше
Размещено От Daniel W.
Wakhid Khusaini
Wakhid Khusaini
User
Автор

Never mind, Thank you for your help

Читать больше
Размещено От Wakhid Khusaini