theme optimisation on mobile

Hello,
I do have couple of issues on this page, using the image gallery element of the theme
https://polinacouture.com/collection-bracelets-japonais/

As you’ll see, on PC, it’s OK
On mobile, several issues
when I use the gallery from wp bakery, I have this. I mean photos are on 1 row. It’s not ideal, it makes here the scrolling on mobile heavy, I’d like to have 2 photos per row, how can that be customize?

Attachments:

You must be logged in to view attached files.

and if I use the image gallery from wp bakery, then, I have a row with 2 images like i’d like, but the 3rd is on the following text

Attachments:

You must be logged in to view attached files.

on the same page, the same if you continue, the theme gallery is on 1 imager per row ….
sorry, it’s too painful to scroll
if you look at asos as a benchmark, always 2 images per row on mobile version

Attachments:

You must be logged in to view attached files.

Hi,

Try to place Basel gallery element to your page and add the following code snippet to the mobile custom CSS area in theme settings.

body .basel-images-gallery.view-grid.columns-2 .basel-gallery-item, body .basel-images-gallery.view-grid.columns-3 .basel-gallery-item, body .basel-images-gallery.view-grid.columns-4 .basel-gallery-item, body .basel-images-gallery.view-grid.columns-6 .basel-gallery-item, body .basel-images-gallery.view-masonry.columns-2 .basel-gallery-item, body .basel-images-gallery.view-masonry.columns-3 .basel-gallery-item, body .basel-images-gallery.view-masonry.columns-4 .basel-gallery-item, body .basel-images-gallery.view-masonry.columns-6 .basel-gallery-item {
    -webkit-flex-basis: 50%;
    -ms-flex-basis: 50%;
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
}

Regards

Hello,
This works perfectly, thank you.
What is to be sorted out now is the view on tablet (portrait), which is also very very special
See attached
First row of photos : the right image is squeezed
other images, after, all are 1 by 1.
Kind regards

Attachments:

You must be logged in to view attached files.

You are using the Wp bakery gallery element (https://prnt.sc/l8wdkm), and it’s a way how it works on mobile devices. As we mentioned before try to use Basel gallery element (http://prntscr.com/l8we4d) to achieve the desired look.

Also as an option, you can make your columns 1/1 (https://prnt.sc/l8wf6k) on a vertical tablet in the visual composer setting.

Regards

Yes, for the first row of photos, I used wp bakery gallery, because, in mobile version, it was become 1 row of 2 + 1 row of 1 – when I use the theme’s one, I have 3 rows, with 1 photo in each. See attached.
OK, i undertand there is somehow sort of mismatch between how this page is built, and how it’s translated on mobile / tablet / …
Will take your solution, thank you, it’s goog idea

Attachments:

You must be logged in to view attached files.

after, this does not change for the following galleries, all made with the theme gallery element

on tablet / portait, the galleries become 1 row / 1 image, which is not good. Given the size of the photos on screen, there could be 3 images per row.

Hi,

You can place previous CSS code snippet that we gave you (https://xtemos.com/forums/topic/theme-optimisation-on-mobile/#post-84238) and add it to the Tablet Custom CSS Area in theme settings. In result, there will be 2 pictures in a row on the tablet devices (http://prntscr.com/l91b62).

As an alternative, you can add the following CSS code to the Tablet Custom CSS Area in theme settings. In result, all 3 column desktop galleries also became 3 column on the tablet.

.basel-images-gallery.view-grid.columns-3 .basel-gallery-item{
    -webkit-flex-basis: 33.333333%;
    -ms-flex-basis: 33,333333%;
    flex-basis: 33,333333%;
    max-width: 33,333333%;
    width: 33,333333%;
}

Regards

Hi,
when man considers that 2 per row is the target for mobile, as do best in class players, then, it’s 3 for tablet in landscape
The code does not seem to work on tablet, see attached

Reading what you litterally wrote, I wonder if it could be due because, the native “gallery” is 4 columns. The … snipet? that you gave me for mobile translates it well in 2 images / row.
The new one does not translate it well in 3 images per row for tablet in portrait mode

Attachments:

You must be logged in to view attached files.

Hi,

There are 2 galleries types on your page (3 column and 4 column) and four device resolutions (mobile, tablet vertical, tablet horizontal and desktop).

Please, describe exactly at what device how many pictures per row each gallery should have and we prepare code snippet for you.

Regards

Hi Bogdan,
Before I answer you, I need to be precised how it does work.
As of now, when I make a gallery, it’s a visual choice, also depending on photos I have.

So, as an example, I could have 3 small photos on 1 row on page A on PC. Which I’d like to stay on 1 row on a mobile.
And have 3 big photos on 1 row on page B on PC. which I’d like to be, on mobile, 2 photos on 1 row + 1 photo on 1 row.
Somehow, everything is more or less possible. Theorically as of now for me.

So, can your code snippets be fully specific to a given gallery in a given page?

Hi,

By default gallery columns on the mobile device not depend on image size or the number of columns you set for desktop resolution. For example, how its work in all cases by default:

Desktop 6 columns – tablet(horizontal): 6 columns, tablet(vertical): 4 columns, mobile: 1 column.
Desktop 4 columns – tablet(horizontal): 4 columns, tablet(vertical): 3 columns, mobile: 1 column.
Desktop 3 columns – tablet(horizontal): 3 columns, tablet(vertical): 2 columns, mobile: 1 column.
Desktop 2 columns – tablet(horizontal): 2 columns, tablet(vertical): 2 columns, mobile: 1 column.
Desktop 1 columns – tablet(horizontal): 1 columns, tablet(vertical): 1 columns, mobile: 1 column.

In case you want to make only a certain gallery 2 column on mobile, first, remove all previous custom code for galleries. Then add extra class mobile-gallery-2-column to the desired gallery (http://prntscr.com/l9r0bc) and add the following CSS code snippet to the Mobile Custom CSS area in Theme settings.

.mobile-gallery-2-column.basel-images-gallery.view-grid.columns-2 .basel-gallery-item,
.mobile-gallery-2-column.basel-images-gallery.view-grid.columns-3 .basel-gallery-item,
.mobile-gallery-2-column.basel-images-gallery.view-grid.columns-4 .basel-gallery-item,
.mobile-gallery-2-column.basel-images-gallery.view-grid.columns-6 .basel-gallery-item,
.mobile-gallery-2-column.basel-images-gallery.view-masonry.columns-2 .basel-gallery-item,
.mobile-gallery-2-column.basel-images-gallery.view-masonry.columns-3 .basel-gallery-item,
.mobile-gallery-2-column.basel-images-gallery.view-masonry.columns-4 .basel-gallery-item,
.mobile-gallery-2-column.basel-images-gallery.view-masonry.columns-6 .basel-gallery-item {
    -webkit-flex-basis: 50%;
    -ms-flex-basis: 50%;
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
}

In case you want to make only a certain gallery 3 column on Tablet (vertical), add extra class tablet-vert-gallery-3-column (http://prntscr.com/l9r0gv) to the desired gallery and add the following CSS code snippet to the Tablet Custom CSS area in Theme settings.

.tablet-vert-gallery-3-column.basel-images-gallery.view-grid.columns-2 .basel-gallery-item,
.tablet-vert-gallery-3-column.basel-images-gallery.view-grid.columns-3 .basel-gallery-item,
.tablet-vert-gallery-3-column.basel-images-gallery.view-grid.columns-4 .basel-gallery-item,
.tablet-vert-gallery-3-column.basel-images-gallery.view-grid.columns-6 .basel-gallery-item,
.tablet-vert-gallery-3-column.basel-images-gallery.view-masonry.columns-2 .basel-gallery-item,
.tablet-vert-gallery-3-column.basel-images-gallery.view-masonry.columns-3 .basel-gallery-item,
.tablet-vert-gallery-3-column.basel-images-gallery.view-masonry.columns-4 .basel-gallery-item,
.tablet-vert-gallery-3-column.basel-images-gallery.view-masonry.columns-6 .basel-gallery-item {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-basis: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    width: 33.33333333%;
}

Regards

Thank you for having explained that to me 🙂
I will study that in depth, review the website, and then revert to you if needed.
Kind regards

You are welcome! Contact us if you have any additional questions or concerns.

[Author]

Posts