SaranyaDesigns

@tuanphan oy that makes it very cumbersome... annoying that they won't just generate static IDs for all the blocks, that would make targeting for CSS MUCH cleaner overall. Silly choice by Squarespace!

@sarahgracestudio ok it looks like the gallery controls (the left/right arrows) are interfering with the caption, they are absolutely positioned on top, so they cover the link which is why you can't click it. I suggest adjusting the position of the left/right arrows to only come down 50% of the height instead of 100% and then positioning at the bottom of the flexbox. They may not be exactly half the height of the page, but it will be close enough visually and fix your interference. So add this to your custom CSS: .gallery-lightbox-controls { height: 50% !important; align-items: flex-end; } Let me know?

@Ross003 hmmm strange yeah that looks correct to me, the first version, not the one without the space. I tried to have another look, but now your website is asking for a password, can you share? Are you pulling all the icons from Font Awesome? Have you tried the code injection method instead of using the @import version in CSS? Here is a reference: https://fontawesome.com/docs/web/use-with/squarespace

@JenGlenn876 Ah, bummer I was hoping the calendar might included classes indicating the categories on the divs that you could target, but it doesn't look like this template does that... you might be able to write some custom javascript to get the categories to show up as div classes for this, but that's out of my area of expertise, unfortunately... someone else might have a more helpful suggestion, sorry!

@Ross003 looks like the @import rule you added is being ignored by the browser because it's out of order, see screenshot of inspector window showing errors. Try adding it at the very top of your custom CSS instead?

@tuanphan this is great information to have... but what if all the blocks ONLY have #yui ids? how would I target this block, for example?

@JenGlenn876 Are you able to add categories to your events? If so, can you create a category for "available" and then target those event categories with custom CSS? If you setup the categories and share a link to the page, we can have a closer look...

@Ross003 can you share a link to your site so we can inspect for errors?

@sarahgracestudio can you share a link to the page you need help with so we can have a closer look?

@tyler427438 try adding !important after the 85%, like this: @media (min-width:800px) { .header-title-nav-wrapper { order: 1; flex-basis: 85% !important; } .header-actions--left { order: 2; } .header-actions--right { order: 3; } .header-layout-branding-center-nav-center .header-actions--left { justify-content: flex-end !important; } }

@TheLiqueurist am I correct in understanding that you want some whitespace to the left of the product image? Then the image center and the information on the right? As if there were 3 columns but the first column is always empty? If so, try adding this to your custom CSS: @media screen and (min-width: 768px) { .ProductItem-summary .ProductItem-gallery { width: 30%; margin-left: 30%; } } You may find that it makes the images too small, so you can play around with the percentages to get the ratio you want, but the total must equal 60%.

@nassim Looks to be working on my end 🙂

@TheLiqueurist can you share a link to the page you need help with?

@lb111 add this to your custom CSS .portfolio-grid-basic .portfolio-text { display: none; }

@nassim try adding this to your custom CSS: .header-actions .language-picker-desktop .language-picker-content { opacity: 1; background: transparent; display: flex; position: relative; } .header-actions .language-picker-desktop .language-picker-content .language-item:first-of-type { padding-right: 10px; margin-right: 10px; border-right: 2px solid; } .header-actions .language-picker-desktop .current-language { display: none; } If that doesn't work, trying playing around with adding !important to certain properties to override the existing styles, like this: .header-actions .language-picker-desktop .language-picker-content { opacity: 1 !important; background: transparent !important; display: flex; position: relative !important; } .header-actions .language-picker-desktop .language-picker-content .language-item:first-of-type { padding-right: 10px; margin-right: 10px; border-right: 2px solid; } .header-actions .language-picker-desktop .current-language { display: none; }