Jump to content

JayVanDyke

Circle Member
  • Posts

    418
  • Joined

  • Last visited

Posts posted by JayVanDyke

  1. @alifelessordinary Try this.

    @media only screen and (max-width: 767px) {
      .ProductItem-gallery {
        .ProductItem-gallery-slides {
          pointer-events: none !important; //stops the interaction that moves the slides
        }
        .ProductItem-gallery-slides-item {
          transform: translate(0,0) !important; //makes sure they don't move over
        }
      }
    
    }

    It does seem to only show the ones that are upcoming since it's setup for that sliding gallery so if you want to fix that for mobile add this like to the slides item element too or just copy and paste this below the current code.

     

    @media only screen and (max-width: 767px) {
      .ProductItem-gallery {
    
        .ProductItem-gallery-slides-item {
          display: block !important;
        }
      }
    
    }

     

  2. Sort of how the title explains it. I have a client that recently had a change in business structure and some ownership and they are trying to give "ownership" to the correct email account that is associated with each business. We have followed the steps here

    Here's our steps we did today that did not work....

    1. logged in as current owner and started a brand new trial site
    2. added payment information but did not sign up for a subscription (this is what their doc says to do)
    3. moved the domain over to the new trial site
    4. invited the new potential owner and they accepted
    5. transferred ownership

    This resulted in the new account becoming the owner of the trial site but not becoming the owner of the domain. They also did not get any permissions to the domain itself at all even though they are the current owner of the site itself.

    Anyone had to do this recently and figured out how to go about it?

  3. @chrisyost21 a popup contact form isn't native in squarespace from a header button. To achieve this you would need a paid plugin like this one https://bergendesign.co/lightbox-anything (affiliate link). This will allow you to make a page with only a contact form on it and then use the plugin to have it popup that other page inside a Lightbox when you click the button.

  4. @Fromswedenwithlove This isn't something you can do without code in SS so to make your life easier I would use this will myers plugin. Lots of other features too so worth the money if you're a developer/designer, in which case I would get the business license (its an affiliate link)..

    https://www.bergendesign.co/split-screen-layout

    Using the platform as is, I would uncheck the "fill screen" box for the section and make the grid spacing 0. Then add 2 images and 2 text blocks, make them each half the screen and full height. To get 100vh you will either need to add some custom code like this below or you'll need to eyeball it. 

    sectionID {
      min-height: 100vh !important;
    }

     

    Screenshot 2024-06-13 at 10.37.21 AM.jpg

  5. @ashgirl2000 you can accomplish all of the same stuff here without setting things to sold out but this should get rid of the sold out text. If you set some to not sold out and want to point me to those products we can add some css for that too, then you don't have to worry about the inventory or pricing at all.

    .products.collection-content-wrapper .grid-meta-status {
      display: none !important;
    }

     

  6. @kkf_magi Try this, when editing switch to your mobile view and make sure your containers are not overlapping each other. First screenshot is with the container over the other box and the next shows where the boxes should be ending. If you make the box bigger than the content then it will allow the text to wrap into that empty space. If you end the box before the next text box it will just bump it down on the page. Sometimes you still need to overlap to achieve a specific design but typically unless you're really careful and know how to make it work it makes sense to have them not be on top of each other.

    image.thumb.jpeg.a95dbded2e983b4ff3df76f45901f811.jpegimage.thumb.jpeg.6c9d0eb6852b02264a5ad7b271fe48e4.jpeg

     

  7. @Terratag try this out. It looks like you have a typo first of all... so let's fix that.

    image.jpeg.90118c6e997496bbe465f5e78719a6dc.jpeg

     

    Try this code. Add or change margins under each one to adjust spacing since its possible that will be off with a different order of elements. Just uncomment the margin and change the 0 to something else.

    #page .ProductItem-details-checkout {
      display: flex;
      flex-direction: column;
      
      .ProductItem-details-excerpt {
        order: 1 !important;
        //margin-bottom: 0px;
      }
      
      .product-variants {
        order: 2 !important; //this looks to be already set.
        //margin-bottom: 0px;
      }
      
      .ProductItem-product-price {
        order: 3 !important;
        //margin-bottom: 0px;
      }
      .ProductItem-quantity-add-to-cart {
        order: 4 !important;
        //margin-bottom: 0px;
      }
      
    }

     

  8. The wide spacing you have is going to be impossible to setup without wrapping with CSS. And achieving some kind of evenness with your logo is possible but totally done by eyeballing it since the two elements aren't actually related to each other in the html. You're now making each nav item 130px plus we have extra padding between each one which brings them around 150px total, then your logo is set at 200px. We're also then leaving an extra 25px for the logo spacing. This puts all this stuff to around 1100px +  with only the padding on either side of the links able to adjust based on screen width.

    You're trying to achieve a responsive split menu (that squarespace doesn't offer) and keep wide spacing even as the screen runs out of room for those large numbers. I honestly don't think there's anyway for you to achieve something that flexible with your constraints and this as a workaround to your menu without changing the width of the nav items to something smaller and then maybe making the padding a different dynamic value and then change that value as the screen gets smaller with different breakpoints.

    The only way to do this without a ton of css code will be to upgrade and use javascript.

    If you want to do breakpoints for the width of the nav items you could use this template and keep trying numbers as you go. These are just arbitrary numbers so you'll need to adjust and possibly add more breakpoints all the way down to 800px when it switches to mobile nav.

    @media only screen and (max-width: 1300px) {
      width: 120px !important;
    }
    @media only screen and (max-width: 1200px) {
      width: 110px !important;
    }
    @media only screen and (max-width: 1100px) {
      width: 100px !important;
    }
    @media only screen and (max-width: 1000px) {
      width: 90px !important;
    }

     

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