MagicForestEmporium

Dang, I was hoping I could have it ask for first name only. I removed it and it's working now, thank you! The mobile menu code looks BEAUTIFUL for the store section! But the first menu options look a little strange in comparison. The text is still large and spaced very close. I would prefer if I could either keep the text large, just with more spacing, or have it match the rest of the menu sections. Honestly whichever is the simplest to accomplish. And the sections with less options are spaced weird. I know I can adjust that in my css, but I'm not confident enough that I won't mess up the section that is correct. I'm pretty sure this is caused from the "even spacing" css I have. The last code for the heading didn't affect anything. Even when playing with it a bit I couldn't get it to change anything. It really only matters on mobile devices since it never overlaps on the desktop version. Thank you for taking the time to help me, I really appreciate it!

Hello! I have a couple issues/questions. I've made a couple posts here, I have no experience, I'm building a website for my mom's art business, all that context stuff. I'm polishing up stuff as I get closer to fully finishing everything, and I'm noticing some issues. I've been unable to figure these out for myself. Firstly, the contact form isn't working right. It accepts the email address but will not recognize the name field. This is after it's filled out. Email was accepted but name was not. Next is the text in the mobile version of the navigation dropdown menu. It's too big, which makes it hard to know where one line starts and ends. It also actually scrolls further than "Explore All" but there's no way for anyone to know that. I would like it to be easier to navigate. Last thing is line spacing on the Homepage. The lines are so close that they kind of overlap, depending on the device you use it's better or worse. I'm sure this is very simple to fix in my current css, but I've been unable to find where I can change those settings since my css is kind of a jumbled mess. Website: https://magicforestemporium.com Password: test123 If you notice anything else that's off, please let me know. I don't have many devices to test on, and I'll be honest, staring at this website for over a month makes some little things slip by my eye. I've been actively scouring everything but I would not be surprised if I missed things. Thank you for reading.

Thank you!

Yea, I don't expect them to perfectly line up, I just want them on the same side so it's easier to navigate. Won't moving the block to the right side make only that spot in the section clickable? Or does the code automatically make the whole section a button?

https://magicforestemporium.com/faq Password: test123

Sorry, my best mock up is just drawing on a screenshot haha. I want to move them so they are all lined up with the accordion block's arrows.

I decided to just go with the ok-ish gradient just adjusted a little bit, and I made the gradient into an image for the shorter store pages. The two really long ones still look weird with the image so I'm just doing the css for those two pages. The gradient might not be best on the main store page anyway since the text isn't in blocks on that page and it could be harder to read. But I'll mark this as solved.

Sorry, I always give too much context but I'd rather give too much than not enough 😅 I want to have some gradient backgrounds for the store pages of my website to match the theme I have going with the rest of the pages. With the smaller sections the simple linear gradient between two colors looks really nice. It's conflicting colors (pinks and greens) so pages with much longer sections, like some of the store pages, take longer to get through the gradient and it makes a huge chunk a mauve-y grey/brown color. On other pages this actually looks pretty nice. But having a huge part of the store background being that color makes it look...less appealing. I used a few sites to try to create a gradient that blends a little better for the long store pages, like 3 color gradients and trying other methods to get a similar effect. Most didn't help much, I have one that's ok-ish but I don't want "ok-ish" for the website. Then I found a site to build gradients layer by layer and I made a beautiful gradient I'm very happy with....except I can't get the code to work on Squarespace. I've fiddled everything I can think of but I don't know what I'm doing. I know it's probably something simple like the code is written in a way SS doesn't understand, it's just not compatible, or I didn't input it correctly. But I need a little help figuring out which it is because if it's just not a compatible code I don't want to waste time trying to make it work. Since the pages are too long for me to screenshot what I mean about each one, I set this page to the original simple linear gradient so you can see what I mean: https://magicforestemporium.com/store Password: test123 And on this page I used the code that looks ok-ish: https://magicforestemporium.com/magic-forest-wands Pawssword: test123 The code for the one that does work and looks ok-ish: section[data-section-id="66831c4119833f6c195ef6a5"] .section-background { background-color: transparent; background-image: linear-gradient(to bottom, #b67467, #c08577, #ca9588, #d4a699, #ddb7ab, #debbab, #dec0ac, #ddc4ad, #cfbf9d, #bcba91, #a4b789, #88b388); } Here's the base code for the gradient I want to use, before I made any changes to it: background-size: 100% 100%; background-position: 0px 0px,0px 0px,50px 50px,0px 0px,0px 0px; background-image: linear-gradient(0deg, #E9CEC42E 1%, #E9CEC485 15%, #b57366 100%),linear-gradient(0deg, #88b388 0%, #B1D1A0B5 27%, #DBEFB900 100%),linear-gradient(0deg, #E9CEC43B 16%, #E9CEC4 100%),linear-gradient(0deg, #DBEFB9FF 0%, #E9CEC4 100%);

I found a way to create hidden page sections with the accordion blocks on them, and have the section above it being the "button" to open that section. So I labeled the sections as if they were the first accordions and clicking them both opens and closes the sections for easier navigation in the FAQ. With all my testing it works across all platforms I have. I'm pretty sure that's the way you're talking about? You can look and see if it is what you are talking about. If it's not, this seems to work unless there's any issues you know about doing it this way. Website page: https://magicforestemporium.com/faq Password: test123 Actually I have one question with this setup, how can I move the arrows on the sections to be on the right side like the accordion blocks below them?

How can I move the arrows to a different part of the code block?

This is a very old thread, but this looks like the perfect option for me to condense the large amount of info on my FAQ page, how do you achieve this?

Since making this post I gave up trying to make them match so I changed the font and that messed a bunch of other things up. But the text works now...

http://Magicforestemporium.com Password:test123 I've been trying to solve some font issues on my site for two days, I finally gave up and decided to set my fonts back to fonts to the Squarespace has. They were the same fonts as anything targeted in my css so I felt like this would be fine. It looked one way on the editor and once I saved and checked the site off of Squarespace it was all messed up. It didn't look like that in the editor or I would not have saved it. I've spent awhile getting the text back-ish to how it was. But there's some elements I spent a long time on that are no longer working correctly and I'm feeling pretty discouraged because nothing I've tried will fix the issue, and it still looks how I want it in the editor no matter what I do so I can't even see if my changes work unless I save and check it elsewhere. My main concern is the shopping cart is supposed to have a different icon for the quantity, the one on it is too close and big, and it is supposed to have a hover effect that makes it bounce up. My header font isn't bold anymore either but it's at least readable. Pictures of how it's supposed to look and how it actually looks

Hello! I have custom font that works great on desktop, but doesn't work on mobile. Originally I didn't care because the mobile font still looked good with the site, but I've done a full rehaul on the website and the default font doesn't look as nice anymore. I don't want to change the font on desktop, I want to change it on mobile without affecting the desktop font. I don't think the font is compatible on mobile so I just want to give it its own font. I don't have experience with css or website building at all, I just made the website for my mom's little craft business and been learning as I go. Here's an example of a spot where the font just looks really off on mobile. Website: https://Magicforestemporium.com Password: test123

Thank you!! That fixed the overlay issue perfectly. The only issue I still have now is the search bar.

I guess it didn't add the url oops Magicforestemporium.com

Hello! I'm having an issue with the overlay I put on my product images, I'm unable to click the product image to get to the info page. I put an overlay to show up over all the product images on the site when you hover over the image. This was working just fine for awhile but somewhere I ended up messing something up and the images are no longer clickable. Right now I tried to remedy it with transparent quick view buttons, which works just fine, they are just small and I don't want people to miss the clickable spot of the image. Another issue I'm having is I put a custom search bar on my page but it doesn't lead anywhere. My other search bars work but no matter the style I choose for those ones they blend into the background and are very hard to see. Password: test123

Worked perfectly! Thank you so much, I appreciate the help.

Thank you SO MUCH for all the help!! That fixed both. Last question I have, I accidentally changed my navigation text color to the same as the gradient and don't remember where I did that to fix it. Thank you again for putting in so much time to help me.

Thank you so much!! That fixed all my issues except two things; The "to top" button on mobile is still huge even with adjustments and I can't seem to get the desktop version to have the gradient in the menu, it only works on mobile. It was fine until I tried to change the colors today while fiddling around again, it's had the gradient for a long time I just wanted new colors and that seemed to have broke it, now it's just solid no matter what I do.

Oops, it's https://magicforestemporium.com/

And the rest // Background Colour // #block-yui_3_17_2_1_1663984350025_214993 { background: rgba(0,0,0, 0.3); padding-top: 1vw; } // Outline text // div#block-yui_3_17_2_1_1663984350025_197866 { background: transparent !important; } div#block-yui_3_17_2_1_1663984350025_197866 span { text-shadow: -1px 0 1px #000, 0 2px 1px #000, 1px 0 1px #000, 0 -1px 1px #000; letter-spacing: 2px; } // change sale price // .product-price { color: #E9CEC4; } .product-price>* { color: #000 !important; } /* sale color */ .product-mark.sale { color: #BDF48F !important; } //Text shadow homepage// #block-yui_3_17_2_1_1664050093261_179121 { text-shadow: 2px 2px 2px #000; } //Nav folder color// //Curved menu edges// .header-nav-folder-content{border-radius:15px} //Menu nav arrows// header.header#header { .header-nav-item--folder .header-nav-folder-title::after { font-family: 'squarespace-ui-font'; content: "\e009"; vertical-align: middle; margin-left: 3px; } //menu backround// .Header-nav-folder{background:linear-gradient(to bottom, #E9CEC4,#BDF48F) } /* dropdown items color */ .header-nav-item:hover a { color: #660033 !important; } .header-nav-folder-item a { font-color: #660033 !important; }} //mobile nav color// .header-menu-bg { background-color: #edb9b9; background: linear-gradient(to bottom,#945c5c,#521f1f); } //Cart Color// .header-actions-action--cart .icon { stroke: #ccac93!important} //Search page// .sqs-search-page-input {border-radius: 25px} .sqs-search-page-input input {color: #4d1201} .sqs-search-page-input {background: #85a647} .sqs-search-container-item em {background:#85a647} .sqs-search-container-item .sqs-content .sqs-content {padding-left: 1rem; border-left: 2px solid #4d1201} #page .system-page, #page { background-color: #fff4e0; } // Shopping Cart Title // .cart-title { color: #57042e; text-align: center } // Cart Content // .cart-container{ background: #d18773; border-radius: 15px; padding: 1rem; border:1 px solid #333; width: 80vw; margin:auto } // Product Image // .cart-row-img{ border-radius: 15px } // Product Title // .cart-row-title { color: #592c35!important; } //Footer font// footer.sections * { font-family: TANGERINE } //FONT// @font-face { font-family: TANGERINE; src: url(https://static1.squarespace.com/static/61f766ee342c712a17f289f9/t/653ee0c2cec7956ac25ae8b6/1698619586725/Tangerine-Regular.ttf); } .sqsrte-small { font-family: 'TANGERINE'!important; } //text shadow category page// #block-yui_3_17_2_1_1698620173621_23729 { text-shadow: 3px 5px 3px rgba(0,0,0,.6); } #block-yui_3_17_2_1_1698620173621_66485 { text-shadow: 3px 2px 3px rgba(000,000,000,.8); } #block-yui_3_17_2_1_1698620173621_74924 { text-shadow: 3px 3px 3px rgba(7,140,12,.8); }

Oh, ok. I'll delete that one and split it into two. // Product Category and Breadcrumbs - Center On Mobile - Ghost // @media only screen and (max-width: 600px) { .products.collection-content-wrapper .nested-category-breadcrumb, .products.collection-content-wrapper .nested-category-title.nested-category-title-padding { text-align: center !important; display: block !important; } } // Sticky Product Category Sidebar // .products.collection-content-wrapper .nested-category-tree-wrapper { top: 60px; position: -webkit-sticky; position: sticky; z-index: 9999; } // Cart Text Pill Style - Ghost // .header .cart-text-link { color: #000 !important; background: #fff !important; border: 1px solid #fff !important; padding: 5px 15px !important; border-radius: 50px !important; } // Thicker Product Image Gallery Arrows - Ghost // .ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control:after { border-width: 4px 4px 0 0; } // Background Colour // #block-595f8c6f965b2fbfac10 { background: rgba(0,0,0, 0.6); padding-top: 1vw; } // Outline text // div#block-yui_3_17_2_1_1698555536053_7483 { background: transparent !important; } div#block-yui_3_17_2_1_1698555536053_7483 span { text-shadow: -1px 0 1px #000, 0 2px 1px #000, 1px 0 1px #000, 0 -1px 1px #000; letter-spacing: 2px; } //Back To Top Button Styles// #wm-back-to-top { z-index:999; position:fixed; display:flex; bottom:0; right:0; min-width: 50px; min-height: 50px; flex-direction: column; gap: 8px; align-items:center; justify-content:center; box-sizing:content-box; margin: 19px; padding: 5px; cursor:pointer; opacity:0; overflow:hidden; transform: translateY(0px) scale(1); background:transparent; border-radius: 0px; border-width: 0px; border-color: #41271f; border-style:solid; visibility:hidden; transition: opacity .3s ease, transform .3s ease, visibility 0s ease .3s; will-change:transform; backdrop-filter: blur(0px); &.show{ transform: translateY(0px); opacity:1; visibility: visible; transition: opacity .3s ease, transform .3s ease, visibility 0s ease 0s; } .icon{ position:relative; display:flex; justify-content:center; line-height:0; height:auto; width:auto; } .text{ position:relative; margin:0; font-size: 0.8rem; font-weight: 700; color: #883d54; text-transform: uppercase; } svg{ width: 20px; height: 20px; } path{ stroke-width: 5px; stroke: #802d52; } .btt-background { box-sizing:border-box; position:absolute; top:0; left:0; height:100%; width:100%; background-color: #ffdbb3; opacity: 1; transition: opacity .3s ease; } &:hover{ transform:translateY(-3px); opacity: .85; } &:active{ transform: translateY(-3px) scale(.95); } }

It says my reply needs to be approved, did I do something wrong? Is there a correct way to post it?

I have 291 lines of code, I think there's some empty space in there I need to clean up, too. I'm not sure how to grant access to the site so I would need a walkthrough.