lu.diehl

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. 

Copy and paste the code below to your Custom CSS. Change the height value to what you want. Let me know if this works... 
.collection-type-page.has-promoted-gallery #promotedGalleryWrapper .sqs-block, .collection-type-page.has-promoted-gallery .promoted-gallery-wrapper .sqs-block, { max-height: 500px!important; } .sqs-gallery-design-stacked-slide { height: 500px!important; }

Which sections?
add to Home > Design > Custom CSS
@media screen and (max-width:640px) { div#block-yui_3_17_2_1_1573840832712_204829+.row { display: flex; flex-direction: column-reverse; } }  

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 @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 @lu.diehl,
Thanks so much for your help.  I really appreciate it.  I was able to solve my problem and the Squarespace Collection/Block Identifier was  a real time saver and help.  
Thanks again.

You add the code to the blog page you want to remove the metadata, and not to the site wide custom CSS. To do so, go to your portfolio page settings, choose Advanced > Page Header Code Injection and add the code between <style> </style>
If you want further help, please share a link to your website 🙂

Hi, thank you both for your support. In the end i took Graemetg's adive and change the logo to text rather than an image.
 

Hi @doshea Find the unique ID of the image, change "#block-unique-ID" to your image ID and apply the code below:
/* mobile screens */ @media only screen and (max-width: 640px) { #block-unique-ID{ width: 50%; } } /* tablet screens */ @media only screen and (max-width: 768px) { #block-unique-ID{ width: 100%; } } Let me know if it works 😉 If you need further help, please share a link to your website and pwd if needed.

@Emmyk1 can you share a link to your website?

Copy and paste the code below to your Custom CSS. Change the height value to what you want. Let me know if this works... 
.collection-type-page.has-promoted-gallery #promotedGalleryWrapper .sqs-block, .collection-type-page.has-promoted-gallery .promoted-gallery-wrapper .sqs-block, { max-height: 500px!important; } .sqs-gallery-design-stacked-slide { height: 500px!important; }

Sure it's https://www.druglink.co.uk/
Thanks!

Hi @lu.diehl thanks for your answer, very useful and should work I think.
It's not for me though, I answered the original question - I was just wondering if @doshea could use text instead of an image for the logo, in particular in the footer.

Hi @doshea Find the unique ID of the image, change "#block-unique-ID" to your image ID and apply the code below:
/* mobile screens */ @media only screen and (max-width: 640px) { #block-unique-ID{ width: 50%; } } /* tablet screens */ @media only screen and (max-width: 768px) { #block-unique-ID{ width: 100%; } } Let me know if it works 😉 If you need further help, please share a link to your website and pwd if needed.

The code you have should work, but if you want me to take a look please share a link (and pwd if needed) to your website.
/* HIDE THE PRIMARY NAVS */ #collection-5d58db8548099500014d80bb .Header-nav--primary { display: none!important; } /* HIDE THE PRIMARY AND SECONDARY NAVS */ #collection-5d58db8548099500014d80bb .Header-nav { display: none!important; }