Jump to content

Daniellerose

Circle Member
  • Posts

    9
  • Joined

  • Last visited

Posts posted by Daniellerose

  1. On 10/17/2021 at 3:25 AM, tuanphan said:

    Use this new code

    @media screen and (min-width:768px) {
    .ProductItem-gallery-slides-item {
        opacity: 1 !important;
        width: calc(~"50% - 10px") !important;
        position: relative !important;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 10px;
    }
    .ProductItem-gallery-slides {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
    }
    section.ProductItem-details {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
    }
    }

    image.thumb.png.5466e623a7b127a34106169005ad1a52.png

    Hi Tuanphan, Is there any way for me to have this layout change only on desktop not mobile? On mobile, it seems to work better as the original slideshow. Thank you in advance for your help!

  2. On 10/17/2021 at 3:25 AM, tuanphan said:

    Use this new code

    @media screen and (min-width:768px) {
    .ProductItem-gallery-slides-item {
        opacity: 1 !important;
        width: calc(~"50% - 10px") !important;
        position: relative !important;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 10px;
    }
    .ProductItem-gallery-slides {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
    }
    section.ProductItem-details {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
    }
    }

    image.thumb.png.5466e623a7b127a34106169005ad1a52.png

    Thank you so much that worked perfectly!

  3. 12 hours ago, tuanphan said:

    Try adding to Design > Custom CSS > Then save & reload the site

    @media screen and (min-width:768px) {
    .ProductItem-gallery-slides-item.sqs-pdp-gallery-slide {
        opacity: 1 !important;
        width: calc(~"50% - 10px") !important;
        position: relative !important;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 10px;
    }
    .ProductItem-gallery-slides {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
    }
    section.ProductItem-details {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
    }
    }

     

    This looks great, except it didn't create 2 rows is the only part missing. The sticky part is working great, but would love 2 rows like in this photo so that the image fits closer to the fold:) Thank you SO MUCH for your help, I really appreciate it.

  4. On 11/17/2020 at 1:23 AM, tuanphan said:

    With Indigo Template, add this to Home > Design > Custom CSS

    section.ProductItem-details {
        position: sticky;
        position: -webkit-sticky;
        top: 20px;
    }

     

    Sorry to bother you again, but I tried this and don't think it was working. I want to swap the product page to stacked format, but I want to do 2 columns instead of 1 single and would like to make one side sticky to scroll through photos/description. 

    Here is a link to an example page: https://www.madigancashmere.com/shop-all/houndstooth-scarf

    And I have attached a photo of the result I was looking to achieve if it is possible? Thanks so much!

    Screen Shot 2021-10-09 at 2.44.47 PM copy.jpg

  5. On 3/25/2020 at 10:23 AM, tuanphan said:

    Add to Home > Design > Custom CSS

    .product-variants {
        column-count: 2;
    }
    #productDetails .product-variants .variant-option {
        margin-top: 0;
    }

     

    Hi Tuanphan, this is not working for me, can you possibly help? I am using the swatch plugin so maybe this is the issue?

    Trying to get the colour and size variants all on one line with add to cart button below or if that is not possible, if I could reduce the spacing between price, variants and add to cart button that would help too.

    Here is one product page for an example:https://kokorozenwear.com/loungewear/p/retro-tshirt

    Attached is what I would like it to look like ideally:) Thanks so much in advance

    Screen Shot 2021-10-06 at 9.36.21 AM copy.jpg

×
×
  • 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.