collgrimes

I am using this code to round all images on my website (blog images, summary blocks etc) but I don't want it to apply to my header logo. Is there a way to do this with css? img { border-radius: 20px!important; }

I updated it so that this only happens on desktop not mobile which is definitely better. Would like to figure out a solution for blog posts as the header completely disappears there making it hard to navigate back to the home page. <script> $(document).ready(function(){ // Check if the screen width is 768 pixels or more (desktop) if (window.innerWidth >= 768) { if (!isEditMode() && !isBlogPage()) { $('header#header').insertAfter('article section:first-child'); } } }); function isEditMode() { // Check for a class or attribute that Squarespace adds in edit mode return $('body').hasClass('squarespace-edit-mode'); // Adjust as needed } function isBlogPage() { // Check if the URL contains '/news', indicating it's a blog page return window.location.pathname.includes('/news'); } </script>

That's right - I know why it isn't working ( there are no sections in blog posts) and am wondering if there is another way to achieve this on blog posts. The section I've placed above the header here is what I want to keep at the top. This is what it looks like on the blog pages:

Yes that is what it's doing currently so the code I am using is working for every page but blog posts. I would like also like it to apply to the desktop only if possible but that isn't a priority.

I am using the following code injection to position a section above my navigation header on every page. The issue I am having is this solution doesn't work for the blog page and blog posts. The website is www.mimicojunioralacrosse.com Password is: colleen <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ if (!isEditMode() && !isBlogPage()) { $('header#header').insertAfter('article section:first-child'); } }); function isEditMode() { // Check for a class or attribute that Squarespace adds in edit mode return $('body').hasClass('squarespace-edit-mode'); } function isBlogPage() { // Check if the URL contains '/news', indicating it's a blog page return window.location.pathname.includes('/news'); } </script> <style> header#header { position: sticky !important; position: -webkit-sticky !important; top: 0 !important; background-color: white !important; } </style>

The position of my site title is off in the mobile menu. I am sure it's a result of something I have done with css but can't figure out what it is that is making it do this. Has this happened to anyone else?

A client of mine is using this content block with the Infinite Scroll togged on but the content isn't scrolling. Is there a better way to do this using css?

@paul2009 - thank you!

@tuanphan @paul2009 This is the code I am using to colour code my blog categories: /* Colour code blog categories */ a.blog-categories[href="/blog/category/Empowering+Our+People"] { background-color: #346bd2; color: #FFFFFF; font-weight: bold; padding-left: 5px; padding-right: 5px; } This is the code I am using to accomplish the same concept in the summary block: .summary-metadata-item--cats a[href*="category=Empowering+Our+People"]{ background-color: #346bd2; color: #FFFFFF; font-family: futura; font-weight: bold; font-size: 12px; padding: .4em .7em;} For some reason, the same hex codes are showing up faded in the summary block. Is there a better way of doing this?

@tuanphan just fixed! Password should be password

I am wondering if there is anyway to add the date in the square [Nov 30] from the event page to the summary list I have on my homepage? https://helicon-cobalt-597e.squarespace.com/ password is password

@SaranyaDesigns I put it back and it looks like it works now but it seemed off to me the about page before.

I thought that worked but it was still off a bit. I tried adding this but that didn't work either. .header-title-logo { text-align: right; } This is the full code I am using but open to other ways of doing this. .header-display-mobile .header-burger { order: 2 !important; } .burger-inner.header-menu-icon-doubleLineHamburger .top-bun { height: 1.5px !important; transform: translateY(-10px); } .burger-inner.header-menu-icon-doubleLineHamburger .patty { background-color: #ffffff !important; height: 1.5px !important; transform: unset !important; } .burger-inner.header-menu-icon-doubleLineHamburger .bottom-bun { transform: translateY(10px); height: 1.5px !important; } .header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title { text-align: unset; } .header-burger { display: flex; } .header-nav { display: none !important; } .header--menu-open .header-menu { opacity: 1; visibility: visible; } .header-title-logo { text-align: center; }

I am using the code below to use a mobile menu on desktop but it is causing my logo to not be centered. Is there a better way to do this? Site: https://ocelot-harmonica-9zfb.squarespace.com/about Password: password .header-display-mobile .header-burger { order: 2 !important; } .burger-inner.header-menu-icon-doubleLineHamburger .top-bun { height: 1.5px !important; transform: translateY(-10px); } .burger-inner.header-menu-icon-doubleLineHamburger .patty { background-color: #ffffff !important; height: 1.5px !important; transform: unset !important; } .burger-inner.header-menu-icon-doubleLineHamburger .bottom-bun { transform: translateY(10px); height: 1.5px !important; } .header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title { text-align: unset; } .header-burger { display: flex; } .header-nav { display: none !important; } .header--menu-open .header-menu { opacity: 1; visibility: visible; }

I used this code to customize the button font across my site but encountered an issue I have never seen before when I click "Add a Block". Screenshot attached shows what the Squarespace platform looks like after adding this code. I removed the code and it goes away. Is there a better way to do this? .sqs-block-button a, [class*='button'], [class*='btn'] { font-family: 'NYRO' !important; letter-spacing: -.2rem; }

Hi there - the site I am trying to do this for is www.themintocup.com on the homepage the black section that is currently the second section on the page - I would like to move it above the navigation.

I am also having this problem and this is all I was able to figure out: When the block width is smaller than 600 pixels, titles, event times, and excerpts display, but not featured images.

I used this code and it works but the section above the navigation is HUGE on desktop - how can I fix the size? <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.2.2/twcsl.js"></script> <script> document.addEventListener("DOMContentLoaded",function() { const header = document.getElementById('header'); const firstSection = document.querySelector('.page-section:first-child'); firstSection.after(header); }); </script> <style> @media screen and (min-width: 768px) { #header { position: sticky; top: 0; display: none; } main .page-section:first-child + #header { display: block; } main .page-section:first-child { min-height: calc(100vh - 93px)!important; } } </style>

I have custom css for products and pricing in my store but they don't show up on mobile. Any suggestions?

@bycrawford thank you so much!

I am using this to customize my blog title font and the letter spacing is fine everywhere on the site but in the blog title the letter spacing seems to be off... any suggestions? /* blog title font */ h1.blog-title, h1.entry-title, a.summary-title-link { font-family: 'DRAFT NIGHT' !important; }