-
Content Count
36 -
Joined
-
Last visited
Personal Information
- Website
-
Location
Atlanta, GA
Recent Profile Visitors
-
Custom CSS Not Working on Shopping Cart Page
WillMyers replied to logang's question in Coding and Customization
@creedon, that would have been my first guess as well. @logang2, are you seeing the font label styles change? It’s possible there’s some weird specificity issue happening so you’d need the !important; tags on each value for it to work. -
logang2 reacted to an answer to a question: Custom CSS Not Working on Shopping Cart Page
-
Custom CSS Not Working on Shopping Cart Page
WillMyers replied to logang's question in Coding and Customization
Hey Logang, try using this bit of CSS to remove the sidebar: body.cart #sidebar-one-wrapper { display:none; } All the other items are a bit more complicated. It doesn't look like they're using a default class naming convention with random classnames. But these bits of CSS might do the trick: /*Borders*/ body.cart .cart-container .qrq0lfTEB{ border-top: 1px solid white; border-bottom: 1px solid white; } /*Label Fonts*/ body.cart .cart-item-list-labels { font-family: 'El Camino' !important; } -
tuanphan reacted to an answer to a question: Summary Block - Space between Image and Excerpt
-
tuanphan reacted to an answer to a question: Summary Block - Space between Image and Excerpt
-
Hey Zack, just responded to your email re:Image above the tabs. Should be possible, but you'll need to use a :before pseudo-selector. I'd definitely recommend my Tabs (For Sections) over the Secondary Nav for your other question though. The secondary nav is meant to be more similar to a site navigation rather than a page navigation.
-
WillMyers reacted to an answer to a question: Click a button/hyperlink and have the page respond with content (txt, imgs, etc)
-
nickstein reacted to an answer to a question: Form Formatting Issues - Date and Checkbox/Numered
-
Summary Block - Space between Image and Excerpt
WillMyers replied to juliusgeis's question in Coding and Customization
Ahhh, try adding this second media query to adjust things on mobile. @media(min-width:767px) { #block-yui_3_17_2_1_1617916128409_10322 .summary-thumbnail-container{ padding-right:0px !important } #block-yui_3_17_2_1_1617916128409_10322 .summary-thumbnail-outer-container { width: ~'calc(50% - 17px)' !important; margin-right: 17px !important; } #block-yui_3_17_2_1_1617916128409_10322 .summary-content{ width: ~'calc(50% - 17px)' !important; margin-left: 17px !important; } } @media(max-width:767px) { #block-yui_3_17_2_1_1617916128409_10322 .summary-thu -
Summary Block - Space between Image and Excerpt
WillMyers replied to juliusgeis's question in Coding and Customization
Hey Julius, interesting question and I can confirm this is more difficult that it seems. The problem we run into here is with alignment. In a summary block, that spacing is controlled by the padding of the image. But if we adjust that padding, it will misalign this block with the others on the page. You can see what I mean by adding in this bit of Custom CSS .summary-thumbnail-container{ padding-right:40px !important } So what we need to do is remove that padding entirely. Add in margins on the content element and the image element and then resize those elements. This CSS should do i -
Adding meta description to cart icon for accessibility
WillMyers replied to spongebob-smc's question in Coding and Customization
So what we want to do is add content before and after the cart quantity count that works with screenreaders, but doesn't show up on the screen. So we'll be using Javascript to inject some code. Squarespace has this CSS Class called "Visually Hidden" which hides text on the screen, but keeps it accessible to Screen-readers, like voiceOver. What we want to do its check out the DOM and add a span before and after the cart quantity count element with the text that we want the voiceOver to speak. That's what my JS below is doing. Be sure to put this in the footer of the website. L- 2 replies
-
- accessibility
- css
-
(and 1 more)
Tagged with:
-
WillMyers reacted to an answer to a question: Need Help With Block Organization on Mobile
-
jdillagodzilla reacted to an answer to a question: Styling Footer on Search Page
-
deoracatherine reacted to an answer to a question: Need Help With Block Organization on Mobile
-
Styling Footer on Search Page
WillMyers replied to jdillagodzilla's question in Coding and Customization
Hey! What I'd recommend is a bit of Javacsript to see if a user is on the search page, and if they are, then add a class to the body. Then you can add some Custom CSS that could hide the footer, or style it however you'd like! Place this in your site header code injection area. <script> if (window.location.pathname == "/search") { document.querySelector('body').classList.add('search-page'); } </script> Custom CSS: .search-page #footer-sections{ display:none; } Hope that helps! -
Need Help With Block Organization on Mobile
WillMyers replied to deoracatherine's question in Coding and Customization
Hey deoracatherine, this has to do with the way Squarespace manages and combines blocks into columns & rows. As you add and move blocks, pay close attention to where the "Insertion Point" (the blue line) is as you add in or move content. What I'd suggest is add that first row of three blocks next to each other. Then add in a spacer block under ALL 3 of them. Now add your other two blocks next to each other under the spacer (you can add another spacer block on the right so the blocks remain the same size). This should get all the blocks organized correctly. You can then delete th -
tuanphan reacted to an answer to a question: Coding an image to flip smoothly on Safari
-
tuanphan reacted to an answer to a question: Image Block Button position
-
Coding an image to flip smoothly on Safari
WillMyers replied to Larkin's question in Coding and Customization
Hey Larkin, gotta move that overlay with the image. .design-layout-poster img, .design-layout-poster .image-overlay{ transition: 1s } .design-layout-poster:hover img,.design-layout-poster:hover .image-overlay{ transform: rotateY(180deg); transition: 1s } .image-card-wrapper{ transform:rotateY(180deg)!important; opacity:0; transition: 1s; } .design-layout-poster:hover .image-card-wrapper { opacity:1!important; transform:rotateY(0deg)!important; background: purple; transition: 1s; } Does that do it? -
Main navigation color change on only 1 page
WillMyers replied to magnin.jonathan's question in Coding and Customization
Hey Jonathan, you'll want to select the specific page first, then the header on that page. CSS should be this: #collection-5b04518e88251b9e5e84a20f .Header--bottom{ background:blue; } Video link here if you're curious how I got it. (Warning, I talk fast) Let me know if that does it for you!- 5 replies
-
- navigation
- color
-
(and 1 more)
Tagged with:
-
gallery image links not working when hover is in place
WillMyers replied to kimimischke's question in Coding and Customization
Hey kimimischke, yeah, I'd imagine it's because of the overlay that that's overlapping with the link. I'll need to take a look at your site to see exactly where the issue is though. Your site is showing up as Private, could you set it to Password Protect? -
Add Custom Padding Between Carousel Content
WillMyers replied to simkrys's question in Coding and Customization
Hey Simkrys, what you're looking for is margin not padding. I've first targeted the specific summary block you're using then the summary items within it. Use this bit of CSS: #block-yui_3_17_2_1_1616980247371_7874 .summary-item { margin:10px; } Hope that helps!- 6 replies
-
- css
- custom-css
-
(and 1 more)
Tagged with:
-
Hey Neet, the CSS property you want to use here is probably margin-top. First target the block-level element then go for the button within in. This Custom CSS should do it: #block-yui_3_17_2_1_1616704237618_71403 .image-button-wrapper{ margin-top:-75px } Let me know if that does it!
-
Adding a Logo to the Home Page Banner Video
WillMyers replied to SHDMarketing's question in Coding and Customization
Ahh, yes. The default for the background property is to repeat (to me this seems like a relic of Internet past). So we'll need to set the background-repeat property to no-repeat and let's also center that logo up with background-position. Add these two into that :after pseudo-element: #collection-5e909ca0ed1cf41f4de09f7b .banner-overlay:after { background-repeat: no-repeat; background-position: center; } -
LinkedIn "follow company" code not working?
WillMyers replied to Alex85's question in Coding and Customization
Hey Alex, sounds like you have "Display Source" checked at the top right in your code block. This will display the actual code instead of running it.