Jump to content

ccxwood

Member
 View Profile  See their activity

  • Posts

    37

  • Joined

  • Last visited

 Content Type 

Everything posted by ccxwood

  1. ccxwood
    body#item-64bf680894c511552be6a23a.header--menu-open header#header img { filter: invert(0) !important; -webkit-filter: invert(0) !important; } Solved, Credit: Tuanphan
  2. ccxwood
    I want to invert the logo on each product detail page on when the mobile menu overlay is open. I'm only targeting the mobile menu overlay, I do not want to change the desktop appearance nor the mobile logo when the menu is closed. Page example - https://www.sartorigroup.us/lapel-accessories/p/yellowgold, #item-64bf680894c511552be6a23a body.homepage.header--menu-open header#header img { filter: invert(1) !important; -webkit-filter: invert(1) !important; } The above code does exactly what I'm looking for though it only targets the Home Page. I've attempted to customize that solution but have not been able to target other pages.
  3. ccxwood
    @tuanphan I would like to apply this exact solution to one specific item that's not on the homepage. Specifically #item-64bf680894c511552be6a23a How would I restructure this code to target that item during the menu overlay?
  4. ccxwood
    @tuanphan https://www.sartorigroup.us/new-page
  5. ccxwood
    I'm attempting to test the JS + CSS solution found here: 100vh problem with ios safari but unsure how to successfully insert it into cone injection. It seems to me that the code is lacking script tags. Additionally if there is a better solution or recommendation on how I can solve this issue please share. Thank you. I'm targeting: section[data-section-id="659641a7793d7440f55a4f47"] const appHeight = () => { const doc = document.documentElement doc.style.setProperty(‘ — app-height’, `${window.innerHeight}px`) } window.addEventListener(‘resize’, appHeight) appHeight() :root { — app-height: 100%; } html, body { padding: 0; margin: 0; overflow: hidden; width: 100vw; height: 100vh; height: var( — app-height);
  6. ccxwood
    The section that is split between the image block and text,title and button blocks arranges well at the resolution that i've been designing. section[data-section-id="651495100bb58c52a34fd07e"] When the page is viewed in larger dimensions the formatting is changed and the text becomes improperly aligned. I don't mind the picture resizing but how can I make it so that the text,title and button blocks stay arranged properly in the center without extending the boxes themselves to the the distance of the window?
  7. ccxwood
    @tuanphan @creedon @Ziggy @Lesum I have had this same issue for the past couple days as I've been testing. Sometimes 9, sometimes 2, the amount varies but is irrelevant. Each time my cart is confirmed empty but shows a quantity on "some", not all pages. This issue is present on Chrome, Safari MacOS & Safari ios and even Chrome Incognito" I've cleared all chrome cookies and to be sure I cleared my all-time browsing data. I enter my site as a visitor and it shows (9) items in cart and when I open the cart even though it's empty. I've attached a screen recording showing cleared cookies, history and the issue present. Squarespace Recording Cart Quantity.mov
  8. ccxwood
    @tuanphan @creedon @Ziggy I have had this same issue for the past couple days as I've been testing. Sometimes 9, sometimes 2, the amount varies but is irrelevant. Each time my cart is confirmed empty but shows a quantity on "some", not all pages. This issue is present on Chrome, Safari MacOS & Safari ios and even Chrome Incognito" I've cleared all chrome cookies and to be sure I cleared my all-time browsing data. I enter my site as a visitor and it shows (9) items in cart and when I open the cart even though it's empty. I've attached a screen recording showing cleared cookies, history and the issue present. Squarespace Recording Cart Quantity.mov
  9. ccxwood
    @Ziggy The grid was not distributed between 2 columns but the size was reduced to 48%.
  10. ccxwood
    At the moment desktop view has one horizontal row with (4) individual products. Mobile view has one column with each product stacked. I would like to target the widths between 767px - 1045px and have my (4) products distributed evenly between two columns. Site: https://sartori7.squarespace.com/lapel-accessories PW: 1237
  11. ccxwood
    Perfection, Thank you!
  12. ccxwood
    The code affects the first 4 form fields great, but it seems though that this code now hides the checkbox option all together.
  13. ccxwood
    The code targeting the formatting forms/newsletters are working but the it has broken the checkbox function that was working correctly prior to the code. 1. How can we fix this in a way that maintains the current format and styling of the form while allowing the checkbox to work properly? 2. How can we close the vertical spacing of each form field to match how the (3) newsletter form fields are spaced? All Current Code targeting forms and newsletters: .newsletter-form-field-element { outline: none !important; } .form-wrapper .field-list textarea, .form-item input, .newsletter-block .newsletter-form-field-element { font-size: 15px !important; background-color: #FFFFFF !important; border: 0px solid #FFFFFF !important; letter-spacing: .05em; border-radius: 0px !important; } .form-wrapper .react-form-contents .field-list .title .required, .form-wrapper .react-form-contents .field-list .fields .description.required { display: none; }
  14. ccxwood
    I love the design and function of the newsletter form. In particular the Placeholder text size and it simplicity. Is there a way to add more form fields to the newsletter form? I know the customizable form is intended for this but its design with all the functions is not nearly as pleasing to interact with. For instance whenever a field is required is has the text "(required)" next to every form field. Couldn't this simply be an asterisk? Also in order for to have the title of the form field mimic the newsletter you have to leave the field unnamed and add the title as the placeholder which isn't practical. Is it possible to design a form that mimics the newsletter form but with more fields?
  15. ccxwood
    Hey tuanphan, I'm restarting this conversation here with a more accurate title to assist those who may also be searching for a similar solution. Website Page: https://sartori5.squarespace.com/wardrobe-design Password: 1234 The code that I have currently targeting this page and the first three sections that we want displayed within the browser viewport (Responsive, without overlapping the toolbar/navbar is referenced below: (Screenshot 1) displays what the page currently looks like. Section 1,2 & 3 combine to fill 100% of the viewport but ios safari does not include the bottom navbar in that equation causing the third section to be hidden under navbar. (Screenshot 2) I adjusted section 2 height to 46vh to display on a test mobile device an example of how I want the page to respond to the viewport. Device: iphone 11 (15.5) /* Wardrobe Design */ /* First section */ section[data-section-id="6493722ef8b8345b59d4b6c8"] { min-height: unset !important; height: 55vh; } /* second section */ section[data-section-id="6493722ef8b8345b59d4b6cb"] { min-height: unset !important; height: 35vh; } /* third section */ [data-section-id="6493722ef8b8345b59d4b6ce"] { min-height: unset !important; height: 10vh; } /* Mobile-Wardrobe Design */ @media screen and (max-width:767px){ /* First section */ [data-section-id="6493722ef8b8345b59d4b6c8"] { height: 30vh !important; } /* second section */ [data-section-id="6493722ef8b8345b59d4b6cb"] { height: 60vh !important; } /* third section */ [data-section-id="6493722ef8b8345b59d4b6ce"] { min-height: unset !important; height: 10vh; } }
  16. ccxwood
    @tuanphan Thank you, adjusting the numbers cleaned up the overlapping header. I changed the color of the "scroll down" section to make it easier to discern the section transitions. I realized that the screen shot that showed the overlapped header seemed to show the third section align to the navigation bar but instead it simply expanded it height and the text deceivingly lined up properly. The webkit touch callout code wasn't able to fix the issue. I adjusted the numbers to mimic how I want the page to respond the mobile browser. The screen capture below shows what I hope to have the page function as. Squarespace example 1.MP4
  17. ccxwood
    @tuanphan With this code in place the first section now overlaps with the header section. I’ve attached the screenshot. The third section does align with navigation bar nicely though.
  18. ccxwood
    @tuanphan Would I need to add a javascript solution to account for mobile browser address & navigation bars? For example how the first section https://grailwatch.com/ responds to the actual viewport in ios safari.
  19. ccxwood
    @tuanphan That is fantastic, thank you. It looks and functions amazing on desktop. How might we also account for the content being mobile responsive to the mobile browser viewport? If found an article that discusses the topic but am unsure of how to apply it to our site. https://dev.to/nirazanbasnet/dont-use-100vh-for-mobile-responsive-3o97
  20. ccxwood
    'm looking to have the third section align dynamically to the bottom of the browser window page open. I'm not looking for it to fix to the bottom of the window but align with it dynamically at page open. Similar to if I was to add this code to the first section: min-height: 100vh !important; height: 100vh !important; https://sartori5.squarespace.com/personal-styling-updated Password:1234
  21. ccxwood
    I'm looking to have the third section align dynamically to the bottom of the browser window page open. I'm not looking for it to fix to the bottom of the window but align with it dynamically at page open. Similar to if I was to add this code to the first section: min-height: 100vh !important; height: 100vh !important; https://sartori5.squarespace.com/personal-styling-updated Password:1234
  22. ccxwood
    @tuanphan Password: 1234
  23. ccxwood
    bump
  24. ccxwood
    Hey, Good Evening I am looking for a way to make the 1st section background media on my Homepage fill the height & width of the visitor browser window dynamically. I want the first section media to resize as the window size changes, in imitation of the homepage of https://grailwatch.com Site URL: https://sartori.squarespace.com
  25. ccxwood
    This is a question so many creators and artist have. Squarespace needs to provide a solution to this. Hopefully they are aware of this issue, especially if hosts such as Shopify have addressed it on their platform.
×
×
  • 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