ccxwood

Hey @creedon

After playing around I seem to have built something that is working exactly how I would like it.

I thought I would share it in here so other people can use it, see if it makes sense to you that it hopefully shouldn't cause errors.


Page Header Injection Code below:
<style>
    #page .page-section:first-child.section-height--medium {
    min-height: 83svh !important;
    max-height: 83svh !important;
    } 
  section[data-section-id="6352d6d11a264cad7f4e2927"] {
    min-height: 17svh !important;
    max-height: 17svh !important; 
    }
  </style>
 
CSS code:
 
//Title Bar Section - Content Wrapper Padding//
section[data-section-id="6352d6d11a264cad7f4e2927"] {
  .content-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
}


Explanation:

I am using this code to set the custom heights that way. I have set the section height on my banner image to be "Medium".
I then set the section height of my title section below it to my desired custom height, "17" 

Then in the page header injection code, I set the min and max values of height to the custom height i want my banner image. In this case 83svh. I believe this means that the section height will always be 83svh which is exactly what we want. 

Then below this, I have added the section ID for that page's title section.
I have set min and max heights of 17svh to match my initial custom height of 17. This completed the 100svh viewport total.
83svh + 17svh = full viewport using two sections. 


Then the final part of this to make it work was to remove the content-wrapper for my title bar section.

I did this in CSS using the code above.
The code is simply targeting the title section's section ID and setting the padding of the content-wrapper to 0px for the top and bottom.


This all seems to be working and behaving exactly how I would like it to.

Any thoughts or suggestions on this would be great because as I say, I am very new to this still. 


Thanks very much,
Jon 

Perfection, Thank you!

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; } }  

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.

Has there been an answer to this as yet? This seems to pop up again and again with Squarespace and was a reason why I was going to use Shopify. I still would like to know how to do this for a Squarespace site!

I'm also looking for a better answer to this. I'm building a website for my mom to sell her jewelry, and for her necklaces, the chains are an add-on that you can buy along with her pendants. What I ended up doing was creating a separate, unlisted product for each chain and linked to it from the appropriate pendant page (saying "this listing is for the pendant only - if you'd also like the chain, click here" and having that take you to a listing for the chain only, but pictured with the pendant again as the chains are curated to each pendant). It's not ideal but it's better than accidentally selling two of a one-of-a-kind pendant or listing the relatively inexpensive chain alongside the expensive pendant and having the listing show the lower price.
I'm definitely interested if anyone has a more streamlined way, to include an 'add-on' type lower priced item directly in the listing without the listing showing the price of that lower item as a "priced from ___" on the main page.

Hi Ahmed, were you able to find a solution for this? I'm in the same boat!

Site URL: https://guppy-lychee-gsyb.squarespace.com/
Heya!
I'm working on an art website, and the client basically wants to offer an original artwork (only 1 in stock) but with framing options. If framing is selected, price should change. I tried adding an option and creating two variants of the product, but then when I was test purchasing the product, I noticed the variant I have purchased was sold out, but the other variant was still in stock. Obviously both should go out of stock in my case. Is there any way to do this?
Please do let me know if there's any other information you need me to supply you with. Otherwise, the site i'm working on is mentioned in the post.
 
Cheers and thanks in advance,
 
Ahmed R