0

When I go to the Category back on Desktop view the using 3 column layout. I get sidebar-main, main-content, and sidebar-additional in that order across the screen.

When I look at the site on a mobile the columns still appear in that order.

I would like to If possible rearrange the order they appear on a mobile device so the main content is available first or remove the sidebars for view on a mobile device.

I have added the following code to _extend.less file in my theme and deployed the code does show up in the CSS file but there is no different in layout, I have flushed the cache, CSS and static files. Magento version 2.3.5

    //
    //  Mobile (styles-m.css)
    //  _____________________________________________
    
    .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .sidebar .sidebar-main {display: none;} 
    .sidebar .sidebar-additional {display: none;}
    }
    
    .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .sidebar .sidebar-main {display: none;} 
    .sidebar .sidebar-additional {display: none;}
    }

I have got this working on the home cms pages but cannot get it to work on the category pages. to get it working on the home page I have used code

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
.cms-index-index .columns .sidebar-main,
.cms-index-index .columns .sidebar-additional {display: none;}

}

and I have tried the following code for category view but not working

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
.catalog-category-view .columns .sidebar-main,
.catalog-category-view .columns .sidebar-additional {display: none;}

}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.