Home Forums Basel support forum theme optimisation on mobile

theme optimisation on mobile

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #84126

    pierredemeudon
    Participant

    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.
    #84128

    pierredemeudon
    Participant

    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.
    #84130

    pierredemeudon
    Participant

    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.
    #84238

    Bogdan Donovan
    Keymaster

    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

    #84269

    pierredemeudon
    Participant

    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.
    #84283

    Bogdan Donovan
    Keymaster

    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

    #84295

    pierredemeudon
    Participant

    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.
    #84299

    pierredemeudon
    Participant

    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.

    #84396

    Bogdan Donovan
    Keymaster

    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

    #84446

    pierredemeudon
    Participant

    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.
    #84474

    Bogdan Donovan
    Keymaster

    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

    #84578

    pierredemeudon
    Participant

    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?

    #84680

    Bogdan Donovan
    Keymaster

    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

    #84803

    pierredemeudon
    Participant

    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

    #84805

    Bogdan Donovan
    Keymaster

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

Viewing 15 posts - 1 through 15 (of 15 total)