Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by 2Eyeballs

  1. website: https://www.elizabethhayt.net/cybermonday23 password: SALE25 I am trying to change the color of the sale tag on an entire page with many products, not just on individual product pages. The sale tag is currently black. I want to make it pink. It doesn't work, but my latest attempt was plugging this into css: div#sqs-product-mark-wrapper .product-mark.sale { color: #dc9395 !important;} help!
  2. I specifically got your code to work for the individual products, but how can I make it apply to all products on a page? I tried this code to try to change the color of the sale price only, but it doesn't work: #product-price .visually-hidden .v6-visually-hidden { color: #dc9395 !important; }
  3. @Beyondspace I am also using 7.0 and trying to change the color of the sale tag. I plugged it into my css and it worked once, but then stopped working. My page is https://www.elizabethhayt.net/cybermonday23 password: SALE25 thank you for any help'!
  4. https://www.elizabethhayt.net/cybermonday23 password: SALE25 A few questions: 1. Can I change the color of the 'Sale' tags? It is currently black and I want it to be a soft red/pink. 2. How to change olor of the 'sale' typeface from white to dark grey? 3. Give 'SALE' word more padding inside the ribbon? 3. How to change the color of the sale price underneath the item photo to be red, so the customer can see the discount. I am using SQSP 7.0. I used this css code: #productList .product .product-mark, #productDetails .product-mark { background: #E77679 !important; padding: 15px; } but it's not working now. Any help much appreciated
  5. https://www.elizabethhayt.net/cybermonday23 Is there css to create space between the title and the price when products are displayed as a gallery? Right now my title and price is smashed together. The link is above. Thanks!
  6. I fixed half of this after finding the 'design' option in the accordion build out area.
  7. Hi, How can I change my font size + color of my Accordion header? It is labeled 'More Information' and is currently too large and too dark. I also want to make the lines bordering the top and bottom of the accordion a different color. And why is the margin for the text in the accordion so large? I'd like that information to stretch all the way across the screen. https://www.elizabethhayt.net/rose-2022/nina
  8. Hello @tuanphan , I've fixed everything except for making the toggle to increase or decrease the quantity of the product on the individual product page match the design of the quantity field on the cart page. Find pictures attached. You can see that on the product page there is just a arrow to increase or decrease. I want a plus sign and minus sign to be on either side of the number, like it is on the cart page. You can see this on any product page, but here is a link for your ease: https://www.elizabethhayt.net/table-accents-1/cocktail-napkin-with-violet-colored-edge
  9. Thank you @SaranyaDesigns ! It works, but at the expense of font size. I want to make my font size in the button bigger while maintaining the same smaller size button. Is there a way to do that?
  10. https://www.elizabethhayt.net/table-accents-1/green-botanical-napkins-pair How can I make certain parts of the product description a collapsible field? I want to put 'dimensions' and 'materials' into a collapsible field that you can read but clicking a link that says 'Details and Care' which will then expand the text field. Right now my text under product description looks messy. Is this possible?
  11. Why are my 'Add to Cart' and 'Submit' Buttons so Big? When you navigate to this page of my site: https://www.elizabethhayt.net/table-accents-1/green-botanical-napkins-pair you can see that both buttons are very big. The submit button can be seen at the bottom of the page. However, my other buttons in the site are smaller, which is what I want. If you go to this page of my site: https://www.elizabethhayt.net/about and scroll down, you will see the 'Read More...' buttons are smaller. I'd like to keep all the buttons the same size site wide - this smaller size is ideal. I've attached screenshots too. Thanks!
  12. How can I increase the font size of the text 'Add to Cart' in the button? Find a screenshot attached. I am using SQSP 7.0 Website is: https://www.elizabethhayt.net/table-accents-1/red-flower-napkin-ring Thank you!
  13. In the product page, how can I make different variants show their matching image when clicked? I am using sqsp 7.0 For example, when you select the color green from the Color option, I want the green version of the product to show as the main image. Right now it shows the red option by default, unless you click through the product carousel. Find a screenshot attached. The page is: https://www.elizabethhayt.net/table-accents-1/red-flower-napkin-ring
  14. @dwinnbrown That worked like a dream. Thank you! Can you also advise: 1. How to change the font size of the 'ADD TO CART' button? 2. How to increase the margin between the word 'quantity' and the item number field? 3. I'd also like to change the look of the item number input field itself, from the current white field to the input option that you see in the cart page itself. See the screenshots attached.
  15. How can I change the font size of my shopping cart variables? The font size for price is too small, and for Quantity and Variable are too big. I'd also like to change the typeface for Quantity and Variable to match the rest of the fonts across the site. My site: https://www.elizabethhayt.net Find my current shopping cart CSS below, and a photo attached. /* cart buttons order */ #productDetails { display: flex; flex-direction: column; } h1.product-title { order: 1; margin-top: 0; /* Adjust as needed */ } .product-price { order: 2; margin-top: -5px !important; } .sqs-add-to-cart-button-wrapper { order: 3; margin-top: -20px !important; } .product-quantity-input { order: 4; margin-top: -20px !important; /* Adjust as needed */ } .product-variants { order: 5; padding-bottom: 10px; } .product-sharing { order: 6; padding-top: 20px; } .product-excerpt { order: 7; margin-top: 30px; /* Adjust as needed */ }
  16. Hello, How can I increase the top margin of my shopping cart and 404 error page? I am using sqsp 7.0. Find screenshots attached. My website is: https://www.elizabethhayt.net/
  17. https://www.elizabethhayt.net/about Hello, In the press section of my site as linked above, some of the 'Read More...' buttons, meant to open a larger version of press coverage, prompt a download. Other buttons open a new page, as they are supposed to. Can anyone help with this?
  18. Hello, My captions for Press are all very tiny. In my Stacked Style sheet the Title and Subtitle are both supposed to be 28 and 24 point or thereabouts. However the font displays as very tiny. Please help. https://www.elizabethhayt.net/about Thanks
  19. of course, https://www.elizabethhayt.net/table-accents-1/cocktail-napkin-with-violet-colored-edge
  20. Hi, I have rearranged my add to cart buttons, but I cannot manage to make the margins smaller between the buttons. I input margin values both negative and positive and they dont do anything. Can anyone help? Right now I have the following code in my Custom CSS. /* cart buttons order */ #productDetails { display: flex; flex-direction: column; } h1.product-title { order: 1; margin-top: 0; /* Adjust as needed */ padding-top: 0; /* Adjust as needed */ } .product-price { order: 2; margin-top: -10; /* Adjust as needed */ } .sqs-add-to-cart-button-wrapper { order: 3; margin-top: -20px; /* Adjust as needed */ padding-top: 0; /* Adjust as needed */ } .product-quantity-input { order: 4; margin-bottom: -10px; /* Adjust as needed */ } .product-variants { order: 5; padding-top: -10; } .product-excerpt { order: 6; padding-bottom: 0; /* Adjust as needed */ } .product-sharing { order: 7; padding-bottom: 0; /* Adjust as needed */ }
  21. When I target my products, in css, it moves everything down across my site. What is the actual class or selector of my products? Please help! I removed my z-index's, thinking that would help, but it doesn't. https://www.elizabethhayt.net/rose-2022/paris you can see in this link my products are at the top of the page, in places they are not supposed to be. On my landing page, my first item is now at the top. Why does this code (injected into html header site wide), and setting the margins as seen in bold, move everything up across my site? /* Style for individual product */ .product { position: relative; margin: 50px auto; /* Center horizontally by setting auto margins */ margin-top: -100px; padding-left: 20px; /* Adjust the left spacer as needed */ padding-right: 20px; /* Adjust the right spacer as needed */ z-index: 1; }
  22. Here are two images. I want to constrain my product images by 65 percent on desktop, and have them extend across the screen on mobile. But they are 65 percent on both desktop AND mobile, which I do not have in my code. See below an excerpt of my code with the problem area in bold, and then below that, screenshots of the problem. Please help! /* Product gallery styles */ .product-gallery { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: -50px; /* Adjust the margin as needed */ } /* Style for product images */ .product-container img { max-width: 100%; /* Limit the maximum width of each product */ height: -50px; /* Maintain the aspect ratio of the image */ } /* Style for individual product */ .product { position: relative; z-index: 2; max-width: calc(65% - 1px); /* Limit the maximum width of each product */ margin: 0 auto; /* Center horizontally by setting auto margins */ margin-top: 30px; } /* Target product title headings */ .product-title { font-size: 22px; /* Adjust the font size */ line-height: 1.2; /* Adjust the line height */ } @media (max-width: 768px) { /* Adjust the font size for mobile */ .product-title { font-size: 20px; /* Adjust the font size for mobile screens */ max-width: 100%; /* Allow product listings to occupy full width on mobile */ } .product { position: relative; margin-top: -10px; /* Adjust the negative margin to move the product listings up */ padding-left: 0px; /* You can adjust this as needed */ padding-right: 0px; width: 100%; /* Set the width to 100% to occupy the entire page width */ } .logo { width: 200px; /* Adjust the width as needed */ height: auto; /* Automatically adjust the height to maintain aspect ratio */ top: 40px; /* Adjust the top position to move the logo down */ padding-bottom: 0px; } .footer { position: relative; z-index: 5; /* Ensure that the footer has a higher z-index value than your products */ /* Other styling properties for your footer */ } } </style> 1. Here is my current desktop, which is constrained to 65 percent of it's size, which I like: And here is the mobile, which squishes the image with a margin. I don't like this big margin, I want it to run all the way across the page.
  • 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.