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

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

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.