Remove Shop Banner on Mobile

Site URL: https://www.dantavis.com/shop

Hi there, 

Can anyone help me remove the mobile banner in my shop so that I only have the banner showing for desktop users? It looks awesome on desktop but terrible on mobile...

Thank you! 

You should be able to add this code to your css to hide that on mobile, assuming your banner is contained to a single section on your site. If it's not, you can author it so it stands in its own section and you can hide it

To find the section ID, I use a Google Chrome plugin called "Find Squarespace IDs", but you can also inspect the code to find it.

// hide about banner //
@media screen and (max-width:767px) {
[data-section-id="INSERT YOUR ID"] {
    display: none;
}
}

Here is a screenshot of what the section ID will look like if you have it installed and use it

Siena it worked almost perfectly! It hid the mobile banner but also hid the categories. Is it possible to add something to the css code that will still remove the mobile banner but keep the "art prints" and "coloring pages" categories? 

If you pull the banner out so it is in its own section, that code would work. Or, if you want to leave it authored as is, you can limit what is hidden to a single block by grabbing the blog ID and using this code in CSS. The same plugin that gives you the section ID's also provide individual block ID's.

// hide about banner //
@media only screen and (max-width: 768px) {
 #block-YOURID {
   display: none;
 }
}

Let me know if that works!

It worked perfect, you're the best! I'm super new to all this website creation stuff and you made it very easy to understand 🙂 thank you Siena 

Great, so glad it worked and I am glad I could help! I just started out back in January, you'll be a pro in no time!

On 12/29/2020 at 11:40 PM, Illustrator said:

It worked perfect, you're the best! I'm super new to all this website creation stuff and you made it very easy to understand 🙂 thank you Siena 

I see on mobile, some product pages have very long content on mobile. You should consider adding a back to top button or change to 2 products on row by adding this to Design > Custom CSS.

/* Product 2 columns mobile */
@media screen and (max-width:767px) {
	.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}

On mobile, product thumbnails show 1/2, you can add this code to add an arrow slider

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
}

Add to Cart on mobile is a bit narrow. If you want to increase width, add this CSS

/* mobile add to cart */
@media screen and (max-width:767px) {
.sqs-add-to-cart-button-wrapper {
    width: 100% !important;
}
}

Hey thank you for your tips! 

The 2 column code on mobile looked so much better than what I have now but unfortunately it made it so some of my product images didn't show up on mobile or desktop, but the arrow slider css code worked perfectly! 

18 hours ago, Illustrator said:

Hey thank you for your tips! 

The 2 column code on mobile looked so much better than what I have now but unfortunately it made it so some of my product images didn't show up on mobile or desktop, but the arrow slider css code worked perfectly! 

Hi. Can you take a screenshot? We can check easier