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!! Is there any way I can make the space between the text and buttons smaller for mobile only as well?
  2. Radhika22
    Site URL: https://www.jivamorelife.com/links Hi - How can I make the photo of myself smaller on the mobile view of the site? It is small on the web view but enlarges on mobile (photos below). This page is supposed to look like a "linktree" page, but it is hosted on my website. @tuanphan - Can you help?
  3. Radhika22
    @tuanphan Thank you!
  4. 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/
  5. Radhika22
    @tuanphan Thank you!!
  6. 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.
  7. Radhika22
    @tuanphan Yes, those fixes would be really helpful!! How would you suggest I fix them?
  8. Radhika22
    Yes. Also, why is it not showing on desktop?
  9. 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/
  10. Radhika22
    @tuanphan Thank you!!
  11. 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
  12. 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?
  13. 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; } }
  14. 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
  15. Radhika22
    Thank you!! Can I do the same thing for these 2 sections? https://www.jivamorelife.com/
  16. 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/
  17. Radhika22
    Thank you for catching that! Yes, I am able to click it and add a title, but it doesn't show up once I save it. Do you know why that would be? I've attached images showing this below. I've also listed the custom css I have in case that is interfering. /* 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; } /* 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; } }
  18. Radhika22
    Site URL: https://www.jivamorelife.com/links Hi. I am creating a replica of a "linktree" landing page but on my website. I was able to format it correctly on the website view, but when you look at the mobile view, the image (a photo of me) is really large and takes up most of the screen so you have to scroll down to see the links (image below). How can I make the image smaller in the mobile view so you can see at least 4 links without scrolling?
  19. Radhika22
    @tuanphan That worked! thank you.
  20. Radhika22
    Thank you Dan, but there is no "Add section" available when I look to edit my blog. I can only add posts. Look at the screenshot below. Is there a way to get around this?
  21. Radhika22
    Yes. How can I make the header height of the mobile view smaller?
  22. Radhika22
    Thank you! It worked.
  23. Radhika22
    Site URL: https://www.jivamorelife.com/blog I want to add a title to my blog's landing page that says "You are Limitless. The Blog". I can't add blocks to the blog landing page so I think I need custom code to add it in. How can I do that?
  24. Radhika22
    @tuanphan I meant the header (not the banner), so I'm looking to resize the header for mobile only.
  25. 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; } }
×
×
  • 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