Okay
  Public Ticket #3069861
Number of columns in booking catalog
Closed

Comments

  •  3
    IC Concept started the conversation

    Hi, 

    Is it possible to choose how many columns I want in the catalog view? I have tried searching for a shortcode but without luck. I have 8 services and they show up on 3 columns of 3+3+2 instead of 4+4.

    Kind regards

    Nana

  •  1,667
    Miloš replied

    Hi, Nana

    My apology, i did not respond on the other ticket, you already asked this there - but i quickly realised it, so i found this one, i hope it is no harm done.smile.png

    There is a custom workaround to achieve this with adding custom CSS to WP pages where you have the categories displayed.

    For example, on our Demo front-page, https://sports.wpamelia.com/yoga/ 

    we have this page with some Catalogue bookings:

    1406085887.png

    Then i inspect the page, and found our developers made some preset styles, of course.

    For example, for all screens above 1200px width, this style will be applied, width of 33.33333% is the width of every container of each category.

    That is the width percentage taken from the width of its parent container.

    7767485626.png

    Now, this media queries are made for responsive design.

    For example  min-widh 1200px,  this is only going to happen on screens larger than 1200 pixels.

    Then you will find other "breakpoints", for other devices, and so on.

    If you wish, you can learn more about media queries here.

    I will show you an example of how to manipulate this for large screens.

    If we add this CSS:

    @media only screen and (min-width: 1200px)
    .el-col-lg-8 {
        width: 24.33333%;
    }
    

    When i decreased the width property , it is now placing 4 of them in a row :

    5596543900.png

    Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways. 

    If you need help with adding custom CSS to the page, please take a look at this article.


    - Of course, you can change the percentage value, to see what works best for your page.

    This value of  width: 24.33333%  did the trick for our Demo page, perhaps you will have to decrease it more, or less, on your page.

    Let me know if that worked for you?smile.png

    Thank you

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  3
    IC Concept replied

    Hi !

    YES! I did have to adjust it but that did the trick! 

    Thanks a lot!

    I do recommend that you add it as something you can customize easily with the plugin - number of rows/columns

    Have a nice day!


    Kind regards

  •  1,667
    Miloš replied

    Hi, IC Concept

    That is awesome, i am glad to see that this works!smile.png

    You are right, i will suggest this to our developers to consider adding options to choose how many rows would be presented in the Categories layout.

    I will pass this to them, and you wish, please feel free to search through our feature suggestion page

     to see if someone may be already suggested this feature by our users before.

     If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.

    You can certainly follow our changeLog page if you'd like, where we state any changes/new features/bug fixes during updates;

    and our newsletter, so you're informed about new features, bug fixes, freebies, etc.



    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables