Magento 2 : hide sidebar on mobile view

Question

• Magento 2.2.3
• Theme: Luma

My homepage uses layout: 2 column with left bar. I want to hide the image block ( CMS static block ) or whole sidebar container referenceContainer name="sidebar.main" from home page when the page enters mobile mode ( width < 768px ). How can I achieve that?

Answer 1

You want layout changes only in mobile.

So best way to use CSS/LESS to achieve your output

To hide sidebar-main section in mobile below 768px add below css in you css/less file.

.cms-index-index .columns .sidebar-main {
    display: none;
} 

If you want to hide additional sidebar section as well in mobile then use below css instead of top one.

.cms-index-index .columns .sidebar-main,
.cms-index-index .columns .sidebar-additional {
    display: none;
}

If you aware of LESS then in your theme go to

..\app\design\frontend[VENDOR][THEME]\Magento_Theme\web\css\source_module.less

find media

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

'''

}

so add above give css at the end of close tag

as per your need (only sidebar-main css or both).

Note : Magento default @screen__m variable value is 768px

whole less syntex represent mobile media till 767px or means @media only screen and (max-width: 767px)

after adding these changes you might not get your changes so do static content deploy

php bin/magento setup:static-content:deploy -f 

Note : -f will help to deploy even in deloper mode