Jump to content

Radhika22

Member
  • Posts

    33
  • Joined

  • Last visited

Posts posted by Radhika22

  1. @tuanphan Can you help me show 2 products per row on mobile for the section highlighted below on the homepage? https://www.jivamorelife.com/

     

    On 7/19/2021 at 9:18 PM, tuanphan said:

    Add this CSS

    /* mobile products 2 items */
    @media screen and (max-width:640px) {
    div#page-60f5f9d54b723e0609c06f6c .span-3 {
        width: 50% !important;
        float: left !important;
    }
    
    div#page-60f5f9d54b723e0609c06f6c .span-3:nth-child(2n+1) {
        clear: left !important;
    }
    div#block-0af3a012f3c9b4da3f05 ~ .row .span-3 {
        width: 50% !important;
    }
    }

     


    image.thumb.png.de3ad23679e3ff7c174f1d82dfb32ccd.png

     

  2. On 7/22/2021 at 11:40 PM, tuanphan said:
    /* sticky announcement bar mobile tablet */
    @media screen and (max-width:900px) {
    .sqs-announcement-bar-dropzone {
        position: fixed;
        top: 55px;
        z-index: 999;
        left: 0;
        width: 100%;
    }
    }

    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.

  3. On 7/23/2021 at 2:19 AM, tuanphan said:

    Do you need to help with these?

    Site URL – https://www.jivamorelife.com/

    1. (Mobile – Quick view) Increase text width?

    https://www.jivamorelife.com/

    jivamorelife.com-01-min.png

    2. (Desktop – Blog posts) Reduce space?

    https://www.jivamorelife.com/blog/grow-past-your-fears

    jivamorelife.com-02-min.png

    3. (Mobile – Menu) Reduce space between Collections and Testimonials?

    https://www.jivamorelife.com/

    jivamorelife.com-03-min.png

    4. (Mobile – Collections) Align text?

    https://www.jivamorelife.com/collections

    jivamorelife.com-04-min.png

    5. (Tablet – Header) Menu is cut into 2 lines.

    https://www.jivamorelife.com/

    jivamorelife.com-05-min.png

    6. (Tablet – Shop) Scroll bar at the bottom of page.

    https://www.jivamorelife.com/shop/pink-lemonade-dreams

    jivamorelife.com-06-min.png

    @tuanphan Yes, those fixes would be really helpful!! How would you suggest I fix them?

  4. 13 hours ago, tuanphan said:

    Add this CSS

    /* mobile products 2 items */
    @media screen and (max-width:640px) {
    div#page-60f5f9d54b723e0609c06f6c .span-3 {
        width: 50% !important;
        float: left !important;
    }
    
    div#page-60f5f9d54b723e0609c06f6c .span-3:nth-child(2n+1) {
        clear: left !important;
    }
    div#block-0af3a012f3c9b4da3f05 ~ .row .span-3 {
        width: 50% !important;
    }
    }

     

    @tuanphan Thank you!!

  5. On 6/18/2021 at 12:11 AM, tuanphan said:

    Use this code

    /* 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;
    }
    }

     

    @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

  6. @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.

     

    image.thumb.png.cfa4f51cb93a980c06e5e5e0c6516735.png

    /* 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;
    }
    }

    image.png

  7. @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

  8. On 6/11/2021 at 12:09 PM, Wolfsilon said:

    Hello,

    From the looks of it, just above the "Blog | Add Post | Manage Posts..." tool bar, you can see the tool bar for "Intro | Edit" section. You'd add the banner/intro section by using that tool bar that instead of the editing tools for the actual blog section. It's appearing slightly transparent and seems to also be behind the "Home" and "Collections" header too, I can't say definitively but it looks like you may have some Custom CSS applied to the page that is overlapping the editor tools for the "Intro | Edit" tools, which would make it more difficult to select.  

    -Dan

    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;
    }
    }

     

    image.thumb.png.5cd3929028b2ae31641d9ca755ceb0c7.png

    image.thumb.png.ac674dfc0a2c4d6fe3c2cb2ea1887d53.png

  9. 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?

     

    image.thumb.png.df32c55dfec7fb067f68e039c135ed17.png

  10. On 6/9/2021 at 1:04 PM, Wolfsilon said:

    Hello,

    On certain templates for 7.0, you can add an intro section to the top of the blog page and add any bit of content that you'd like.

    On 7.1 -- Go to your blog > edit > "add section".  Add a template section or blank section. You should then be able add text or other content to the top section of your blog page.

     

    Hope this helps,

    -Dan

    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?

     

    image.thumb.png.3825ba5eac28bcd1edb74a7a894b6604.png

  11. 21 hours ago, tuanphan said:

    Use this new code

    
    /* 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;
    }
    /* 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;
    }
    }

     

    Thank you! It worked.

  12. @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.

Hire a Designer

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