SaranyaDesigns

13 hours ago, tuanphan said:

You can use this Text Block ID to target it

#enter-text-block-id + .row >.span-8>row:nth-child(1)

Reference: https://www.w3schools.com/cssref/css_selectors.php

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

Try this in your custom CSS @tyler427438

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

@matthewyoung68 Can you share a link to the page you need help with so we can inspect where the current breakpoint is and provide some custom CSS to adjust it?

@tyler427438 can you share a link to the page you need help with, so we can have a closer look at the code in action? You may be able to achieve this with some custom CSS.

@Cre8tiveVision can you share a link to the page you're having trouble with so we can see the code in action?

@nassim yes this might be possible with some custom CSS, if you share a link to the page you need help with, we can have a closer look?

@kajumi10999 yes you can do this with some custom CSS. If you share a link to the page you need help with, we can have a look at the code in action?

@emmaburtonblog you will likely need to add some custom CSS to target each page individually, which could become cumbersome depending how many different pages you have. If you share a link to your site, we can have a closer look?

@Margaux try this in custom CSS:

a.user-accounts-text-link.header-nav-item:hover::after, .user-accounts-link.header-nav-item:hover::after {
	background: transparent;
}

@Darine It looks like the image in this template is set to start at the top of the page behind the navigation in desktop mode regardless of how tall the navigation bar is, which is why that's happening. So the navigation is covering the top of the image. You can add padding or margin to the first block of content on every page in your custom CSS to overcome that like this:

@media (min-width:800px {
	.page-section:first-of-type .section-background {
		top: 100px !important;
	}
}
@media (min-width:641px) and (max-width:799px) {
	.page-section:first-of-type .section-background {
		top: 150px !important;
	}
}

Or if you JUST want this to happen on these two specific pages and not all the rest of the site, then you can include the body ID to limit your code just to those specific pages, like this:

@media (min-width:800px {
	#collection-651a42029bd6d313af619e60 .page-section:first-of-type .section-background, #collection-651a2e096ce641658310faa8 .page-section:first-of-type .section-background {
		top: 100px !important;
	}
}
@media (min-width:641px) and (max-width:799px) {
	#collection-651a42029bd6d313af619e60 .page-section:first-of-type .section-background, #collection-651a2e096ce641658310faa8 .page-section:first-of-type .section-background {
		top: 150px !important;
	}
}

Let me know if that works?

@LucyBold ah I see, looks like there is a border radius on the div... but it's not showing in any of my browser tools, so probably browser-specific... what kind of phone do you have and what browser are you using?

You could start by setting the border radius to 0... 

.sqs-search-ui-button-wrapper.color-dark .search-input {
	border: 1px solid #000;
	border-radius: 0 !important;
}

If that doesn't work, I would remove the border entirely and put it on a containing div instead, so swap that bit of code for this:

#yui_3_17_2_1_1700581249574_997 {
	border-bottom: 1px solid #000;
}
.sqs-search-ui-button-wrapper.color-dark .search-input {
	border: 0 !important;
}

let me know?