SaranyaDesigns

@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%.

@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

@jordanhansen try this in your custom CSS to fix the overlapping titles. You might have to play around with where you want the breakpoint to be, depending how long your titles are:
@media (max-width 950px) { .item-pagination--prev-next { flex-wrap: wrap; gap: 25px; } .item-pagination-link { max-width: 100% !important; } } and then for the box shadows, try this?
.gallery-grid-item img { box-shadow: 5px 5px 30px #2b3652; } Let me know?

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

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

@collgrimes can you put back in the code I suggested so I can have a look at it in action? Some properties might be being overridden - it was working when I tested in the inspector window.
You may need to add in a media query so it doesn't affect the mobile version:
@media (min-width:1025px) { .header-display-desktop { flex-wrap: wrap; } .header-title-nav-wrapper { flex-basis: 100%; } .header-burger { flex-basis: 100%; justify-content: flex-end; margin-top: -46px; /* or whatever the height of your logo is */ } }  

@feedbacksolo weird, ok try adding this as well to prevent them from overlapping each other:
.header-nav .header-nav-item--folder, .header-nav-folder-content { min-width: 100px !important; } and then update the original code I gave you to include the following:
.header-nav-list .header-nav-item:first-of-type .header-nav-folder-content { opacity: 0.7; pointer-events: auto; }  

@CalShark try this in your custom css?
#collection-6520532e3728bb028be82644 .header .header-announcement-bar-wrapper, #collection-6520532e3728bb028be82644 .header { background: transparent !important; } #collection-6520532e3728bb028be82644 [data-section-id="65510299d628a0461e9f54c5"], #collection-6520532e3728bb028be82644 .header-menu--folder-list { padding-top: 0 !important; }  

@lbencur25 it's possible you did but for some reason squarespace forum doesn't publicly display it unless you include the link in the body of the post... it's silly...

Anyway... It looks like the way this particular slider is built is that all the images are already loaded onto the page in one long line like a conveyor belt but hidden from view until the javascript moves them into the viewport... which is going to make it difficult to add a fade action instead of a slide action... it would be rewriting how the whole code block works.
You would start by absolutely-positioning all the image blocks on top of each other with CSS and then writing some javascript to cycle through the opacity or visibility of each block at whatever interval you want. That's beyond my skillset unfortunately, but maybe someone else here can help! sorry!
 

@Rawan for the header/footer issues, try adding this to your custom CSS:
#footer-sections { border-top: 1px solid #e5e5e5; padding: 20px; } .fe-block-yui_3_17_2_1_1699568094161_10922 .sqs-block { justify-content: center !important; } .fe-6550f3052fcc075598117599 { display: flex !important; justify-content: center !important; } I'm not clear on what you mean by "move the links on the left so that it sits in line with the links in my header" can you send a screenshot maybe of what links you are referring to? Same question for centering the links in mobile, not clear on what links you mean?

@LucyBold try this in your custom CSS:
.sqs-search-ui-button-wrapper.color-dark .search-input { background-image: none !important; padding-left: 10px !important; }  

@Jess_FOMO you can target that specific button in your custom css - can you share a link to the page so we can see the button in action?

@MaxFlu did you discover what bit of code was causing the error once you added piece by piece? I'm curious...

Meanwhile, it looks like the extra spacing under the header is caused by this bit of CSS you added at some point:
#page .page-section:nth-child(1) { margin-top: 100px !important; } If you remove that, the extra spacing should go away...

@rocketbase ok start by removing all of your current code for (max-width:1359px) and (min-width:767px). And try replacing with this:
@media screen and (max-width:1359px) and (min-width:767px) { .ProductItem .ProductItem-summary { align-items: stretch !important; } .ProductItem-gallery { float: none !important; } .ProductItem-gallery-slides { height: 100%; } .ProductItem-gallery-slides img { object-fit: cover !important; } } Let me know?

@meliss808 try this in your custom CSS. NOTE: This looks like it will only work for youtube embeds, if you have other types of videos like vimeo etc you may need to adjust or add selectors:
.embed-block-wrapper.embed-block-provider-YouTube { border-radius: 15px; overflow: hidden; }  

@AshlynnW you may find with this adjustment that you also want to add some left-right padding as well:
.blog-item-wrapper .blog-item-title h1.entry-title { background-color: yellow; /* replace with whatever color you want */ display: inline; padding: 0 10px; }  

@georgiamartin I think the CSS transitions are set on the following classes, try applying your code to these selectors?
.image-block-outer-wrapper.combination-animation-slide-up .image-inset, .image-block-outer-wrapper.combination-animation-slide-up .image-block-wrapper, .image-block-outer-wrapper.combination-animation-slide-up .sqs-image-content, .image-block-outer-wrapper.combination-animation-slide-up .image-caption-wrapper, .image-block-outer-wrapper.combination-animation-slide-up .sqs-dynamic-text-container { transition: none !important; will-change: unset !important; opacity: 1 !important; transform: none !important; }  

@jrmyprkr you're close... you found the right block, but it's a class not an ID, so adjust your code to this:
@media only screen and (min-width: 640px) { .block-yui_3_17_2_1_1699765625613_2671 { display: none; } } If that still doesn't work, include !important like this:
@media only screen and (min-width: 640px) { .block-yui_3_17_2_1_1699765625613_2671 { display: none !important; } }  

@amandavanvels if you can't find a way in the design settings to disable breadcrumbs, you can add this to your custom CSS:
.tweak-products-breadcrumbs .products.collection-content-wrapper .nested-category-breadcrumb { display: none; } If that doesn't work, you may need to add !important to override the site styles:
.tweak-products-breadcrumbs .products.collection-content-wrapper .nested-category-breadcrumb { display: none !important; }  

@Pixeltender yeah there doesn't seem to be unique selectors unfortunately, but you could probably use nth-of-type selectors to target each title in order of which they appear, like this...
section[data-section-id="654a793b56fdd568d0daa8a4"] .list-item:first-of-type h2 { color: pink; /*whatever color you want here */ } section[data-section-id="654a793b56fdd568d0daa8a4"] .list-item:nth-of-type(2) h2 { color: purple; /*whatever color you want here */ } section[data-section-id="654a793b56fdd568d0daa8a4"] .list-item:nth-of-type(3) h2 { color: blue; /*whatever color you want here */ } section[data-section-id="654a793b56fdd568d0daa8a4"] .list-item:nth-of-type(4) h2 { color: orange; /*whatever color you want here */ } section[data-section-id="654a793b56fdd568d0daa8a4"] .list-item:nth-of-type(5) h2 { color: red; /*whatever color you want here */ } etc...

@LukeView  try this?
.header .header-nav-wrapper a, .header .language-item a { padding: 1.25em 0; } .header .header-announcement-bar-wrapper { padding: 0 3vw; } You may need to include !important if it's not overriding the existing styles, like this:
.header .header-nav-wrapper a, .header .language-item a { padding: 1.25em 0 !important; } .header .header-announcement-bar-wrapper { padding: 0 3vw !important; }  

@floradouville Perhaps this could work?
.product-layout-side-by-side .tag-nouveau h1.ProductItem-details-title:after { content: 'Bientôt disponible'; display: block; background: #fff; color: #443f41; font-size: 18px; letter-spacing: 1.5px; padding: 0.7rem 1.5rem; width: 200px; /* you may need to play around with this one */ } It would be a pseudo-element, but should achieve the desired outcome?

@Exileking ok so you'll need to upload the image to your site first and then find the direct url for it. then replace the url in the code below, but something like this should work, assuming you want it on all pages of the site? Add this to your custom CSS:
/* remove dark background from all sections of site */ body, .header, .page-section .section-border, :not(.has-background) .section-background { background-color: transparent !important; } /* add repeating seamless background image sitewide - replace url with locally hosted version of image file */ body { background-image: url(https://content.invisioncic.com/p289038/monthly_2023_11/Image.thumb.png.feabc75f3081e1db301ea993557e1567.png); background-repeat: repeat; } Let me know?

@rachy1105 ok I'm assuming you're referring to the two images at the bottom of the page? If so, try adding this to your custom CSS:
.fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper { background-color: #7879a0; } .fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper img { opacity: .25; transition: all .4s; } .fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper img:hover { opacity: 1; } You can play around with the opacity levels to get the color you want. You may have to add "!important" to the opacity properties to override the defaults if the above doesn't work, so like this:
.fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper { background-color: #7879a0; } .fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper img { opacity: .25 !important; transition: all .4s; } .fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper img:hover { opacity: 1 !important; } Let me know?

Ok @CaseyNewton yup I see it. Ok so you need to go into your custom CSS and find this block of code:
@media (min-width: 640px) { .healcode.enrollments table.enrollments tr td.healcode-button-field { position: absolute; right: 5px; top: 50%; transform: translatey(-50%); padding-right: 0 !important; } } Once you find it, just add another line to it that says "z-index: 5;", so the whole thing looks like this:
@media (min-width: 640px) { .healcode.enrollments table.enrollments tr td.healcode-button-field { position: absolute; right: 5px; top: 50%; transform: translatey(-50%); padding-right: 0 !important; z-index: 5; } } That should fix it! If you have trouble finding it, you can just add this to the bottom of your CSS instead:
@media (min-width: 640px) { .healcode.enrollments table.enrollments tr td.healcode-button-field { z-index: 5; } } It should do the same thing. Let me know?