Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Remove Shop Banner on Mobile


Illustrator

Question

  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

8 answers to this question

Recommended Posts

  • 1

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

image.thumb.png.d7fcb76a0ceddf928c8380f8c94dcb7d.png

Link to comment
  • 1

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!

 

Link to comment
  • 1
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;
}
}

image.thumb.png.b6d095d9780e66f0b156c267b1dda1aa.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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! 

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...