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

Topic Resolution: Resolved

Tagged: 

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

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

    Hello,

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

    and 2 columns on desktop.

    Issues:

    • (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 ?

     

    #18053

    Hi,

    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

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #18273

    Thanks I’ll test this tonight!

    #18339
    This reply has been marked as private.
    #18351

    Hi,

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

    Best regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #18357

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

     

     

     

    #18375

    Hi,

    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

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #18421

    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.