I have been looking for hours for a resolution. I would like to hide the top banner in mobile view. In Shopify, it’s called the “logo banner”. When I try to hide it, the picture along with my top logo and menu icons also disappear. It appears the picture/banner is with the “logo banner” so when I try to hide the section (using shopify-section…), it removes it. The picture section within the banner is labeled as “group”. When I inspect the picture only there is no (shopify-section…) just a div-class.
I am new to this and would appreciate some help. Thank you community.
Website: https://lovebeingyou.co/
Here is the password: test13
@BrittKNorman
Please provide your mobile front screenshot exactly what you would like to hide. I will check and try to provide your solution.
Access the customize > then go to theme settings > Custom CSS (See the GIF below and enjoy it)
Next, add this CSS code. If I understood correctly what you want to achieve with this, it should work for you on mobile:
@media only screen and (max-width: 768px) {
#shopify-section-template--18455586930860__section_6PnLrM {
visibility: hidden;
margin-top: 20px;
height: 40px;
}
}
I just added the code and got this error.
I would like to keep the outlined blue section on mobile and desktop view and hide the outlined purple section on mobile.
@BrittKNorman
Please add the following code at the bottom of your css file.
@media only screen and (max-width: 768px) {
.group-block{
display: none;
}
.section.section--full-width.color-scheme-1 {
min-height: 20svh;
}
}
Hope this works.
Hi @BrittKNorman ,
Please go to Customize > Sections > Logo banner > Custom CSS and add code:
@media screen and (max-width: 749px) {
.section {
display: none;
}
}
BrittKNorman:
test13
Add this code to Custom CSS in Theme settings
@media (max-width: 749px) {
#shopify-section-template--18455586930860__section_6PnLrM { display: none !important; }
}
Hi @BrittKNorman ,
Please change all code:
@media screen and (max-width: 749px) {
.section--full-width.color-scheme-1 {
display: none;
}
}
It’s says Online Editor cannot be published.
It’s says Online Editor cannot be published.
Hi @BrittKNorman ,
Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:
@media screen and (max-width: 749px) {
#shopify-section-template--18455586930860__section_6PnLrM {
display: none;
}
}
Click Save and check on the mobile screen.
Try again by opening your session in incognito mode and adding the code, or switch to a different browser.
This works. The logo banner is no longer on mobile still visible on desktop. Thank you.
