Home Forums Themes Support Gecko Single column product listing on mobile and desktop

Topic Resolution: Resolved


This topic contains 7 replies, has 2 voices, and was last updated by  patrickmarmalade 3 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #18039


    I am trying to set up a product listing page that is 1 column on mobile

    and 2 columns on desktop.


    • (wpbakery element: product/ producsts) Minimum column dropdown is allowed to be displayed is 2.
    • (wpbakery element: product) When trying to add 1 product on a row, on mobile it looks like it does not use the whole width of the device (the product seems to only use less than 50% of the screen width)

    Is there a css change that can make single column possible, and make the products look full width ?




    Please setup 2 products a row on desktop and use below code to set 1 column of product on mobile

    Add below code to JanStudio > Theme Option > General Layout > Custom CSS

    @media only screen and (max-width: 736px) {
    .products .jas-col-xs-12 {
    	flex-basis: 100% !important;
    	max-width: 100% !important;

    Best regards
    Best regards


    Thanks I’ll test this tonight!

    This reply has been marked as private.


    This is custom page, you have to edit element of products http://take.ms/zuvgc

    Best regards


    Thanks for the screenshot however it does not resolve my issue.

    The screenshot I sent shows that the product (and not “products”) element is being squeezed inside the column

    This is the layout I need to use:

    custom 2 row layout with using a simple 1 product

    This is the result:


    >>The single ‘product’ needs to be scaled up to use 100% of the column width. I’m not able to target the product element to get the effect of using 100% width /w vertical scale to aspect ratio in my css attempts..






    Please add below code to JanStudio > Theme Option > General Layout > Custom CSS

    .jas-col-md-0 {
    	flex-basis: 100% !important;
    	max-width: 100%  !important;
    	-webkit-flex-basis: 100%  !important;
    	-ms-flex-preferred-size: 100%  !important;

    Best regards


    Awesome!! that worked!!

    Thanks for the help!

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

You must be logged in to reply to this topic.