melody495

If you share a link to your website, can check

Hi, can you check Read More is enabled? Click on edit on your summary block -> Design -> Read More Link. Try and let me know how it goes.

Hi, what type of section are you using? If you don't need a specific functionality from that pre-made section, you could create your own section with more design control.

If you need to use a pre-made section, can you please share a link to your website so we can help easier. Can you explain more? Where will the button click through to? (internal or external link?) What roll over effect are you looking for?

Hi, what code did you change/add? Have you tried removing/reverting your code changes?

Hi both, @haleyisabelle @ShortAngryViking do you have a link to an example of what you are looking to do?

Hi, please share a link to your website so we can help easier

15 hours ago, MaesMarket said:

I was able to figure it out 🙂 The code that worked for me: 

.products-list .category-item {font-family: med;}

Thank you for your help! 

👍 You're welcome, glad you figured it out!

4 hours ago, HeatherV said:

This "New CSS" given above, where does it go in the code? In the SEO Header or Footer? Or elsewhere in the code found within the Themes. Thanks!

This is the code I'm referring to:

@media screen and (min-width:901px) {
img {
    pointer-events: none;
  -webkit-touch-callout: none;
}
}

Hi, CSS goes in Custom CSS. You can find it here: Website -> scroll all the way down to Website Tools -> Custom CSS.

Hey, the selector might be different from the video, but have you tried this?

https://www.youtube.com/watch?v=22l29BbD5cs

Hi, you can try the below. Put it in Custom CSS.

.header .header-title--use-mobile-logo .header-mobile-logo img {
	max-height: 50px; /* change number to increase/reduce logo size */
}

Let me know how it goes.

Hi, not sure this is the exact code that is on your website, as the colour references are all blue, not orange. Try to replace with the below code. I added .header-menu-nav-item-content, used after on this selector rather than the a. Because the a is spanning the full width of the screen, that's why the line was long. 

Try and let me know how it goes.

Replace this line

div.header-menu-nav-item a::after {

with this line (1st line)

// mobile menu nav item
div.header-menu-nav-item a .header-menu-nav-item-content::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: #43c6ff;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s;
}

17 hours ago, BrockDB said:

@melody495 Can you see my site? www.brockbyersphotogrpahy.com

Hi, the link doesn't work, maybe a typo?

Edit: got it. https://www.brockbyersphotography.com/

1 hour ago, MaesMarket said:

@melody495 Thank you, the sold out padding worked PERFECTLY. Still having problems with side panel. I took screenshot of how I have entered into Custom CSS. Any ideas as to what I am doing wrong?

Hi, copy my code above. It's font-family 'med', with the single quote. This is because that is how you've loaded the font. You could change your font code to just med instead of 'med', but they need to be used consistently.

Hope that helps!

Hi, looks like you've changed the navigation layout, from right to centre 🙃

Try this instead?

//Home page no menu//
#collection-654e393a3cb0792dfdc5c996 {
  .header-layout-nav-center .header-nav-list {
    display: none;
  }
}

1 hour ago, niteshifte said:

That is insanely useful!! wow. just downloaded the extension but my products disappear when I use it. Do you happen to know what's happening here?! Thanks again!

You're welcome. I see Web_Solutions resolved it for you 🙂

Hi, 

For the categories side panel, try the below

.products-list .category-item .category-item a {
	font-family: 'med';
}

For Sold Out padding

.product-lists-item .product-mark.sold-out {
	margin-top: 10px; // adjust to the amount of space you need
}

For the $9.00+, could target using CSS, but I'm not sure if that's the best way to do it. 

4 hours ago, niteshifte said:

Thanks for that! That works for one of the calendars but not the other calendar or the gift bag?

Hi, you can install SquareSpace ID Finder for your browser, example below for chrome

When you turn it on, you will then be able to find the relevant ID for that specific product you need to remove the sale from

You can select multiple of them like this (with the comma)

div#block-yui_3_17_2_1_1695637693483_52329, #block-95ef6b014537c903a2f1 .sale {
    display: none !important;
}

You can do that for all that you need to remove the sale text from. Try and let me know how it goes.

Hi, just double checking that you are editing the relevant theme to change the Announcement bar text colour? Scroll to the top of the page where the announcement bar is visible, then click Site Styles -> Colors, you can should be able to see the theme, might have to hover over the header/announcement bar area.

1 hour ago, curlybirdie21 said:

Thanks so much for the reply!

But it doesn't look like it's displaying the header font correctly

You are welcome!

Try replacing with the below

@font-face {
    font-family: 'Raleway';
    src: url('https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683eeb4aeb55afb815413/1699120111134/Raleway-Regular.ttf');
} 
 
@font-face {
    font-family: 'Orbitron-Bold';
    src:       
url('https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683bfb95974717c78d3e9/1699120063509/Orbitron-Bold.ttf');}

In loading the font, I've added single quotes around the font-family name and around the url. Save and refresh page, let me know how it goes.

20 minutes ago, thereal_ay_ay_ron said:

Hey, it's not working:

Hi, missing single quote around the url. Try replacing with the below

@font-face {
  font-family: 'Gilroy-Medium';
  src: url('https://static1.squarespace.com/static/64dd22a529ad6406a072bf80/t/65459ea1136a786901d3a4c0/1699061409261/Gilroy-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'TR-909';
  src: url('https://static1.squarespace.com/static/64dd22a529ad6406a072bf80/t/65459ea35a2091267abcc8e4/1699061411786/TR-909.ttf') format('truetype');
}

Not sure what font you want to use, but need to replace 'font-name' what with you want

/* Contact Page - Contact Form */
div.form-block * {
    font-family: 'font-name' !important;
}

Let me know how it goes

Hi, please try this step-by-step guide. Do come back if you're stuck on anything!

https://www.sparkplugin.com/blog/custom-fonts-in-squarespace

Hi, can't check without a link to your website or more details, but try the below. This will not show the selected element. You will need to replace with your block selector.

@media only screen and (max-width:640px) {
	your_line_block_reference {
		display: none!important;
	}
}

1 hour ago, AT76 said:

That worked great, thank you!!

You're welcome! 

5 hours ago, AT76 said:

Hi! Also looking to make the X darker and slightly larger on all portfolio pages images, please see example:

https://altatseng.com/play/inside-out-project-portrait-photography

Hi, try adding the below to Custom CSS?

// style lightbox close button
.yui3-lightbox2 .sqs-lightbox-close {
	color: red !important; // the colour you want
	scale: 2 !important; // make it bigger
	translate: 10px 10px !important; // move it away from the edges after scaling
}

Let me know how it goes.

You are very welcome 😊 Glad it's working for you!