lu.diehl

Hey @tantrum - try adding the code in the response above, if it doesn't work since it is a different template please share a link to your website (and psw if needed)

@Monte63 - sorry for the late response. Let me know if this works: .collection-type-page.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow { height: 450px !important; background-color: #FFFFFF; } @media only screen and (max-device-height: 640px) .collection-type-page.has-promoted-gallery.transparent-header #promotedGalleryWrapper .sqs-gallery-block-slideshow, .collection-type-page.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow { height: 200px !important; background-color: #FFFFFF; }

Hi @Monte63 - can you share a link (and password if protected) to your website?

Hi @lucia_123, the code you shared looks confusing... which template are you using for your website?

For the <a> another style is using a rule that is more important than what you are writing, in this case you need to add ! important after the color code, which makes it stronger and ignores all the subsequent rules. For the <h1> there's a typo - in color code you should write color without 'u'. However, I recommend you changing your header colors using the native tools instead. Go to Design > Style and change your main colors there 😉 a{ color: red!important; } h1{ color: red; }

Hi @lucia_123, can you share a link to your website and/or share how you are writing your code?

Yes, you can actually change the min-device-width to whatever you want, but for general iPad layouts use 768px. //* For general iPad layouts *// @media only screen and (device-width: 768px) { /* Code goes here */ }

Hi @DaleBoettcherPhoto, the code I wrote before isn't great actually... I would try it differently this time. If you're looking to change it only in one page then add the code below to the page setting > Advanced instead of adding it the general Custom CSS. If you're looking to change it all pages, add it to Design > Custom CSS and remove the <style> tags. <style> @media only screen and (min-device-width: 640px){ .promoted-gallery-wrapper { height: 500px!important; } .sqs-gallery-design-stacked-slide { height: 500px!important; } .sqs-gallery-controls .next, .sqs-gallery-controls .previous{ top: 250px!important; } } </style> Let me know how it looks... if you need further help, please share a link to your website.

Add !important at the end to the color code, it should work. for transparent background: .header-nav-folder-content { background-color: rgba(203,242,246,.6)!important; } for white background: /** SOLID WHITE BACKGROUND **/ .header-nav-folder-content { background-color: #FFFFFF!important; }

I can see you're missing a semicolon ( ; ) in your HTML code after the span style attributes in both blocks. It should read style="color: black;" in the first block and style="color: red;" in the second block. Not sure if this is what is going to fix your problem, I'd have to take a look at your website so if you're still having problems please share a link to your website.

Hi @PMDesigner - I would add PNG images with transparent background with the icons and buttons in white only. Then add a red background to the static images with CSS and a hover effect changing the color. That's super simple to achieve. If you need further help, please share a link to your website and password.

They are both the same exact link. Can you explain further what the issue is and what you want to achieve?

Hi @AThompson_social - I've used this in the past and it worked well for me on Brine template: 1. Add this to Settings > Advanced > header code injection: (Change the scroll height you wish to change the color, here it is set to 400 px) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(window).on("scroll", function() { if($(window).scrollTop() > 400) { $(".Header").addClass("on-scroll"); } else { $(".Header").removeClass("on-scroll"); } }); </script> 2. Add this to Design > Custom CSS Change the background color you wish to use. If your navbar is transparent at the starting point, then remove the last piece of code (.Site-inner) .Header{ background-color: blue!important; position: fixed!important; transition: 0.2s all linear; -webkit-transition:background-color .4s; -moz-transition:background-color .4s; transition:background-color .4s; } .on-scroll{ background-color: red!important; } .Site-inner{padding-top: 50px;} Let me know how it goes! Your website is pwd protected... if you want further help, please share the password 😉

Hi @coralinart The lines weight look fine on my end, but if you want to make it thicker, increase the border thickness to 2px: body:not(.tweak-transparent-header) .burger-inner::before, body:not(.tweak-transparent-header) .burger-inner::after { background-color: #FFF!important; border: 2px solid #fff; } I don't understand what you mean by only showing the navigation while it's inactive... isn't it what it is doing? Can you clarify?

@New_Designer try looking for the image block ID. The block ID starts with "block-" followed by a set of numbers, for example: id="block-5a6263c01ea450cffcf0" as shown in the image attached. If you need further help, please share a link to your website 😉 If you use the Google Chrome browser there is this really helpful extension called the Squarespace Collection/Block Identifier which saves me time identifying any block ID in Squarespace. It shows the Squarespace page collection ID and permanent block IDs when you enable it. https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde