- 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?
Best Answer
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.
If you want to hide additional sidebar section as well in mobile then use below css instead of top one.
If you aware of LESS then in your theme go to
find media
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
Note :
-f
will help to deploy even in deloper mode