Jump to content


  • Posts

  • Joined

  • Last visited

Reputation Activity

  1. Love
    BriWau reacted to Elzburg in Size Chart Light Box on Product Page   
    Here is a link to code to a size chart I made. Feel free to use 🙂
    View demo: https://frone.zone/shop-mens-unisex/frone-zone-embroidered-short-sleeve-unisex-t-shirt-1 This is a modal/lightbox with a pre-built size guide. It uses assets from w3schools.com (w3 CSS) and printful.com (images and text). It features customizable CSS that you can implement as an external style sheet to style all of your size charts across your website at once, or just include it in your code block (tutorial below). It is completely mobile responsive.
    Since it took me foooorever to make this and iron out all the kinks, I want to help other people out who see this so they don't have to 1. spend money and/or 2. slave away at this like I did.
    Step-by-step implementation:
    Go to the page you want to implement your modal/lightbox, and enter Edit mode Insert a code block Copy and paste the following code into the code block: <head> <style> </style> </head> <body> </body> Open this link: https://codepen.io/ellalalaa/pen/WNjGZNM, copy all of the code in the HTML section, and paste it in the middle of your <body></body> tags Go back to the link, copy all of the code in the CSS section, and paste it in the middle of the <style></style> tags Customization:
    To change the styling (text colours, background colours, font sizes, etc.) of the size chart, try to find the class of the section you want to edit by looking at the <body>/HTML code, and then find that class in the <style>/CSS code to edit the property you desire

    To edit the content of the size chart, look in the <body>/HTML code to find the section you want to edit.

    Why did I write this whole manual? ... This is how I procrastinate doing work... I hope this helps someone!!!!!!!!!!!! I don't understand why in the world a commerce website maker doesn't have a built-in size chart!!!!!!!!!!!!!!!
  2. Like
    BriWau got a reaction from tuanphan in Help with Mobile Footer Custom CSS   
    Thank you for your help!
  3. Like
    BriWau reacted to tuanphan in Help with Mobile Footer Custom CSS   
    Try adding to Design > Custom CSS
    /* Mobile Footer */ @media screen and (max-width:767px) { div#page-section-61327de5de6fca3c925dac4c .span-6:first-child { display: flex; } div#block-65bf60229674cc25fad6 p:last-child { white-space: nowrap !important; } }  
  4. Like
    BriWau reacted to HoaLT in Help with Mobile Footer Custom CSS   
    1st Point:
    You can try the Design > Custom CSS with the following setting
    @media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1632274074310_17542 .sqs-block-button-container--right { text-align: center; } #block-yui_3_17_2_1_1632274074310_17542 a { padding: 1em 1.404em; } [data-section-id="614a87c7f80dc06b128e4478"] .content-wrapper { padding-bottom: 0 !important; padding-top: 25vmax !important; } section[data-section-id="614a87c7f80dc06b128e4478"] { height: 36vh !important; } section[data-section-id="614a87c7f80dc06b128e4478"] .section-background { bottom: unset; } }
  • 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.