Jump to content

Radhika22

Member
 View Profile  See their activity

  • Posts

    33

  • Joined

  • Last visited

 Content Type 

Everything posted by Radhika22

  1. Radhika22
    @tuanphan Thank you!
  2. Radhika22
    @tuanphan Can you help me show 2 products per row on mobile for the section highlighted below on the homepage? https://www.jivamorelife.com/
  3. Radhika22
    @tuanphan Thank you!!
  4. Radhika22
    Now the announcement bar is sticky on mobile (thank you!), but it is cut off in tablet view, and does not show up on the desktop version. I want the announcement bar below the header.
  5. Radhika22
    @tuanphan Yes, those fixes would be really helpful!! How would you suggest I fix them?
  6. Radhika22
    Yes. Also, why is it not showing on desktop?
  7. Radhika22
    The Announcement Bar banner only shows up on mobile, not on desktop versions. Plus, on the mobile version, it is not sticky. https://www.jivamorelife.com/
  8. Radhika22
    @tuanphan Thank you!!
  9. Radhika22
    @tuanphan Thank you! Can you do the same for this page? https://www.jivamorelife.com/candy-clouds-mini-paintings For the collections page, the last item is showing up very large instead of the same size as the others in mobile view. How I fix this? https://www.jivamorelife.com/collections
  10. Radhika22
    @tuanphan Thanks! That fixed it on mobile, but it did not fix it on the desktop where you still can't see it. How can I see this banner on desktop? Also, how can I make this banner sticky so it always shows?
  11. Radhika22
    @tuanphan When I add an Announcement Bar, it doesn't show up on the desktop view, only on the mobile version. Also there is a big space after the Announcement Bar in the mobile version and when you scroll, this bar goes over the header instead of being sticky. How can I fix these 3 issues? (Images below) I've also listed all of the custom css code on my website below. /* Fixed Header */ .Header { position: fixed; z-index: 9999; width: 100%; top: 0px; } .Content-outer { margin-top: 50px; } // fixed header navigation for desktop, tablet and mobile // header, .Mobile { width: 100%; position: fixed; position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; } /* Mobile header */ .Mobile-bar.Mobile-bar--top { padding-top: 0px; padding-bottom: 0px; } a.Mobile-bar-branding { padding-top: 0px; padding-bottom: 0px; } .Mobile-bar-branding-logo { width: 70px; } /* Mobile-Banner side by side */ @media screen and (max-width:767px) { div#page-60c94c80079fbe716535f7e8 .span-3 { width: 50% !important; float: left !important; } } /* Mobile-Homepage-2 columns */ @media screen and (max-width:640px) { section#products-1 .span-3, section#products-2 .span-3 { width: 50% !important; float: left !important; } section#products-1 .span-3:nth-child(2n+1), section#products-2 .span-3:nth-child(2n+1) { clear: left !important; } } /* 2 Column Product Grid */ @media only screen and (max-width:640px) { .products .list-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .products .grid-item { width: 48%; } } /* 2 products columns - Watercolor splatters */ @media screen and (max-width:640px) { div#page-5f489bc95b4e2969d5bf026c .span-3 { width: 50% !important; float: left !important; } div#page-5f489bc95b4e2969d5bf026c .span-3:nth-child(2n+1) { clear: left !important; } } /* product 2 columns mobile */ @media screen and (max-width:640px) { /* Mini paintings */ div#page-60246570a7841d194bd52219 .span-3 { width: 50% !important; float: left !important; } div#page-60246570a7841d194bd52219 .span-3:nth-child(2n+1) { clear: left; } /* polaroids */ div#page-607a494ab14a497e09cc5385 .span-12 .span-3 { width: 50% !important; float: left !important; } div#page-607a494ab14a497e09cc5385 .span-12 .span-3:nth-child(2n+1) { clear: left; } } /* Collections page header */ @media screen and (max-width:640px) { div#block-0af3a012f3c9b4da3f05+.row .span-3 { width: 50% !important; float: left !important; } div#block-0af3a012f3c9b4da3f05+.row .span-3:nth-child(2n+1) { clear: left !important; } }
  12. Radhika22
    @tuanphan - Can you help with the question above? I have a similar question. How can I create a product that includes a bundle of 4 products. Ex: I want to create a bundle of "4 polaroids". So within this product the customer has the option to choose 4 of the polaroids available with better pricing than if they were to purchase each separately. Here are the list of polaroids: https://www.jivamorelife.com/polaroids
  13. Radhika22
    Thank you!! Can I do the same thing for these 2 sections? https://www.jivamorelife.com/
  14. Radhika22
    @tuanphan Is there custom code that would do the same thing for a banner section on a homepage (index) page for a mobile view? (The first section in the link below. Photo attached) https://www.jivamorelife.com/
  15. Radhika22
    @tuanphan That worked! thank you.
  16. Radhika22
    Yes. How can I make the header height of the mobile view smaller?
  17. Radhika22
    Thank you! It worked.
  18. Radhika22
    @tuanphan I meant the header (not the banner), so I'm looking to resize the header for mobile only.
  19. Radhika22
    @tuanphanThe code above worked for collections!! Thank you. https://www.jivamorelife.com/mini-paintings But for the following link, only half of the products are showing 2 per row on mobile. Do you know how to fix it? https://www.jivamorelife.com/mini-paintings I used this code that you sent below: /* product 2 columns mobile */ @media screen and (max-width:640px) { /* Mini paintings */ div#page-60246570a7841d194bd52219 .span-12 .row:nth-child(3) .span-3 { width: 50% !important; float: left !important; } div#page-60246570a7841d194bd52219 .span-12 .row:nth-child(3) .span-3:nth-child(2n+1) { clear: left; } /* polaroies */ div#page-607a494ab14a497e09cc5385 .span-12 .span-3 { width: 50% !important; float: left !important; } div#page-607a494ab14a497e09cc5385 .span-12 .span-3:nth-child(2n+1) { clear: left; } }
  20. Radhika22
    @tuanphan Yes. I would like to make everything in the header smaller at the top. So that would include the navigation button, Logo, and shop icon.
  21. Radhika22
    @tuanphan Thank you!! That worked great. Could you do the similar for this page? https://www.jivamorelife.com/collections
  22. Radhika22
    @christyprice @tuanphan Hi! How can I change the height of the header on mobile only? I'm looking to do this for www.jivamorelife.com. It looks good on the web, but it's taking up more of the screen than I want on mobile. Can we reduce padding / the size?
  23. Radhika22
    @tuanphan Yes, I need it for the following pages: https://www.jivamorelife.com/mini-paintings https://www.jivamorelife.com/polaroids Is there a link that explains how to do it? because I'll need to do it for many more pages in the future.
  24. Radhika22
    @tuanphan Thank you! That worked. I need to do this for other pages as well so where did the find the highlighted number below? Then I can add the additional code that I need.
  25. Radhika22
    Thank you Paul!! That worked!
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources