Park_Brewing_Company

I've uploaded screenshots for reference.

Hey tuanphan, I mean the image of the dark lager cans, when this image is in design "overlap" it has the issue, I'll revert the image to overlap, as I had changed it to "card" to temporarily avoid the issue. There seems to be an overflow issue. I can not recreate the issues I am having with the banners and tilt effect on other devices, it seems to only be my devices which are logged in that display the issue.

Site URL: https://www.parkbrewing.company/ I have been using a custom script (https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1) for background image parallax, but recently it became buggy and started having lots of issues displaying correctly. I fought with it for a while and had some success, but finally decided to dump the script and revert back to the native square-space image effects. Our site mostly uses the tilt effect, but when I apply native image effects on background images, the image often flips horizontally (or vertically?) it displays upside down. What gives, why is this happening and what can I do? I just want to have slight parallax on background images to add some depth to our artwork. I've also noticed that the background images that are flipped (displaying upside down), travel or tilt in the opposite direction (or correct direction for proper parallax). I've tested on a couple of different devices and browsers and the issue isn't isolated to the editing browser. Can you change the native tilt direction of the image, assuming we can sort out these other issues first? Also the first image on this page https://www.parkbrewing.company/lineup is somehow cut off by a white box, I imagine its some type element style - overflow "hidden" issue or image card wrapper, but I can't resolve this.

Any answers on this? or anyone found a solution elsewhere's.

@creedon This worked absolutely amazingly, the margin edit is perfect as well, I have been able to position the banner just how I like it. Honestly, this is like magic, I have no idea how you did it, but man is it ever impressive. Greatly appreciate the service, I owe you one.

Error: "Operation on an invalid type" anyone know what this means, or how to address this? Never had this issue before. I saved the code above in my css, starting at line 604. I do have this css added to the #blocks { padding-top: 17px; padding-bottom: 17px; }

whats the issue? how do you have your settings, or format set on the store page.

redirects me to this url, https://viola-seahorse-l65k.squarespace.com/config/?frameUrl=%2Fshop not sure what the issue is, but the code I posted will nest the sidebar on mobile, and you can get it to position at top only on mobile. this is the full code and how I have mine structured. //NEST-CATEGORY-MOBILE-HIDE-CATEGORY/// @media screen and (max-width: 640px) { .tweak-products-nested-category-type-sidebar .products.collection-content-wrapper .nested-category-children { display: none !important; } } .nested-category-tree-wrapper { display: flex !important; } @media screen and (max-width: 640px) { .products.collection-content-wrapper .nested-category-tree-wrapper { float: inherit; min-width: 220px; max-width: 300px; margin-top: 30px; margin-right: 40px; margin-bottom: 15px; } } .products.collection-content-wrapper .nested-category-tree-wrapper { margin-right: 20px; }

you need to send a link to the actually website, which isn't /config/ that is the url to login in and edit, not the public url

This sets it to the top for mobile only. this is what I have. sorry, never copied this part of the code. @media screen and (max-width: 640px) { .tweak-products-nested-category-type-sidebar .products.collection-content-wrapper .nested-category-children { display: none !important; } } .products.collection-content-wrapper .nested-category-tree-wrapper>ul { display: none !important; }

Maybe you can help with one more thing. I can't seem to get this right, I have been trying to make the text in the yellow sections to overflow, I have achieved the look I want but having done it in the right way, and the text to the right renders, causing the screen (entire page) to scroll right. //DUTY-MAY-APPLY-YELLOW-BANNER//////// #block-5fb5944149cf9601e09fc226, #block-yui_3_17_2_1_1605929460558_8712, #block-6abf4af40022f5066af2, #block-cb9455c62fd1addc441b { overflow-wrap: normal; margin-right: -500px !important; margin-left: -500px !important; } This is what I used to create the look of the banner I like, but as mentioned it creates a side scroll of the whole page. How can i prevent this, I was trying to get the text box to text-overflow: clip, or overflow-hidden. but couldn't make it work. https://www.parkbrewing.company/store-front access: password

Wow thank you, that is humbling to hear. We are excited to see the site go live soon, I have never built a website, or a brewery before so this is all a first for us. I couldn't have done it without help from yourself and others. I have been very fortunate to self-learn some css, purchase some code, and use some plugins, which have drastically transformed our site from the vanilla SS version. SS has it pros and cons, and the biggest pro is definitely the community.

Absolutely perfect. You don't know how greatly appreciated your response has been. This is a huge thing for us as we are trying to prepare the launch of our site. Thank you sincerely,

How can I edit the shoping-cart page to do the same. I am unable to edit the header of the shopping cart page, and the default colour code which is applied across my page has white text, and now its against a white background. body#cart header#header * { color: black; fill: black; stroke: black; } This is code I used to edit the cart header, but my problem is with the drop down when on the folder in the nav. My "STORES" folder doesn't display properly on the shoping cart page. I just want the background to be this color. hsl(184, 55%, 44%) https://www.parkbrewing.company/cart Access: password

Site URL: https://www.parkbrewing.company/products-attack-the-block I have four store pages, I call them "Collections:" Collection: Attack-the-Block Collection: Park Brewing Collection: Sask Rec. Collection: Dub-Dub! The issue I am having is when you are on one store page for example "Collection: Attack-the-Block". There is no navigation ability to switch between store pages. I would like to access the other three store pages "Collection: Park Brewing" etc. for example. I have done a number of edits to the {products.collection-content-wrapper .nested-category-tree-wrapper} etc. and nested the sidebar menu on mobile. My biggest request would be to add these store page links into the side-bar category navigation. I would be happy with that outcome. If possible and practical Ivwould like the store pages to be structured like this. As a drop down menu. The menu wouldn't have to actively change when you clicked on other store pages. But would just change when we moved pages from the "Collection: Attack-the-Block" to "Collection: Sask Rec." It would function like this... Collection: Attack-the-Block Shipped From Canada Shipped From Europe Shipped From USA Tees & Shirts Hats & Beanies (Toques) Hoddies & Jackets Accessories Collection: Park Brewing Collection: Sask Rec. Collection: Dub-Dub! --- Collection: Attack-the-Block Collection: Park Brewing Collection: Sask Rec. Shipped From Canada Shipped From Europe Shipped From USA Tees & Shirts Hats & Beanies (Toques) Hoddies & Jackets Accessories Collection: Dub-Dub! If it isn't simple or easy to achieve the drop down affect, I would appreciate a sidebar like this. With the four store pages above the categories, and just to display the categories of the active page, and with the active page underlined and bold. Collection: Attack-the-Block Collection: Park Brewing Collection: Sask Rec. Collection: Dub-Dub! Shipped From Canada Shipped From Europe Shipped From USA Tees & Shirts Hats & Beanies (Toques) Hoddies & Jackets Accessories main page: https://www.parkbrewing.company/ store page: https://www.parkbrewing.company/products-attack-the-block access: "password"