Jump to content

2 column Mobile view for shop items

Recommended Posts

  • Replies 14
  • Created
  • Last Reply
49 minutes ago, maxi said:

Site URL: http://www.maxishop.ca

 We would like the "mobile view' to show two columns for shop items. right now (see attachment ) the items are stacked . Any suggestions on how to achieve this please?

 

IMG_4696.jpg

You can try this snippet

@media only screen and (max-width: 600px) {
        .sqs-gallery-design-autogrid-slide {
          width: 49% !important;
          float: left;
          clear: inherit !important;
          margin-left: 1%;
        }
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

image.png.0694cdf7bd290bb4518a88d230c9b396.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 3 weeks later...
3 hours ago, maxi said:

Is there a CSS to change the "announcement bar' from static to rotating ? so different announcements can be added ? and that it would also apply to mobile .Horizontally scrolling text on announcement bar.  SIMILAR TO https://www.saksfifthavenue.com , but would like it to move left to right .. not right to left . 

It should be custom javascript not just css, 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

SS should have that feature availabe for scrolling text on A-bar. I also attempted to change colour of categories in primary nav -- but could not. Im assuming there is CSS for that ? correct ? ie so i can make "sale" in primary nav --> red in colour 

 

 

 

 

Link to comment
On 1/18/2021 at 11:51 PM, maxi said:

SS should have that feature availabe for scrolling text on A-bar. I also attempted to change colour of categories in primary nav -- but could not. Im assuming there is CSS for that ? correct ? ie so i can make "sale" in primary nav --> red in colour 

 

 

 

 

To change "sale" color, add this to Design > Custom CSS

header.Header [href*="Category=sale"] {
    color: red !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
11 hours ago, maxi said:

Thank you.. .will it work for mobile view ? or is the separate CSS for that ? 

 

With mobile try this CSS

@media screen and (max-width:640px) {
header.Header [href*="Category=sale"] {
    color: red !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

yup...this css worked. thank you. one more thing.. 

The  colour choice for the "sale price" inside the block can be changed in design page. however the "sale price" in the gallery cannot ? Is there a code for this as well for both views via compter and mobile? these are features that i am surprised are not automatically included in the plan per template. 

Also there are only 2 badges embedded in the programming-->  one is SALE as shown in the attachement and the other is SOLD OUT. there should be atleast 3 so CLEARANCE can be included or PRE-ORDER , or NEW so items stand-out for the consumer. 

Anyhow, so just to make the SALE PRICE in gallery red would help.  see attachment. 

Thanks again for the CSS for mobile. 

 

 

sale price - colour change.jpg

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.