lgassoc Posted March 31, 2017 Share Posted March 31, 2017 For the Harris template, you can select a variety of sizes for the banner, but the gap between small and medium is quite large. Is there any way to set a custom size for the banner that is somewhere between these two default template setting? Much appreciated!! Link to comment
TylerC Posted March 31, 2017 Share Posted March 31, 2017 Hey @Igassoc ! Just curious, are you referring to banner width or height of the banner? Thanks! Tyler Link to comment
lgassoc Posted April 3, 2017 Author Share Posted April 3, 2017 Hey @tylerc. Thanks for the response. It's the banner height we'd like to tweak. Sorry I wasn't clear! Link to comment
TylerC Posted April 3, 2017 Share Posted April 3, 2017 @Igassoc Not a problem! Try this, it's what I use on my site. Of course, you can experiment with the px until you find a height you like: #banner-area-wrapper { height: 250px !important; } Given that different template families have differing classes, this may or may not work, but I'm thinking it should. Also, give it a try without the "!important" tag first to see if it's effective. Generally, using !important everywhere isn't considered good practice, but is sometimes needed to override Squarespace's template defaults. Hope this helps! Tyler Link to comment
lgassoc Posted April 3, 2017 Author Share Posted April 3, 2017 Hi @TylerC. Thanks for the code. Unfortunately it didn't affect the banner height at all -- even with the !important tag. Could the code related to height be something other than #banner-area-wrapper?? Much appreciated. Link to comment
TylerC Posted April 3, 2017 Share Posted April 3, 2017 Tried doing some digging, and inspected the banner element on another Harris site. Try this instead: 1) #page-banner-wrapper { height: 250px !important; } 2) .page-banner-wrapper { height: 250px !important; } Just like before, try the code without the !important tag applied, first - starting with snippet 1. I believe the problem with my original offering was that I use the Five template, and the selectors are not the same between the two templates. However, one of these two options should get the job done. Tyler Link to comment
lgassoc Posted April 4, 2017 Author Share Posted April 4, 2017 Code 2) worked (with !important tag). Thanks @TaylorC! Unfortunately, the issue now is that it also affects responsive banner heights/rendering...any way of having this custom code only work with full-width site?? Link to comment
TylerC Posted April 5, 2017 Share Posted April 5, 2017 Sure thing, sorry about that! You just have to wrap it in a mobile query: @media only screen and (min-width: 769px) { .page-banner-wrapper { height: 250px !important; }} This will ensure that the respective change will only effect the desktop version of your site. Hope it helps! Tyler Link to comment
TylerC Posted April 5, 2017 Share Posted April 5, 2017 Sure thing, sorry about that! You just have to wrap it in a mobile query: @media only screen and (min-width: 769px) { .page-banner-wrapper { height: 250px !important; }} This will ensure that the respective change will only effect the desktop version of your site. Hope it helps! Tyler Link to comment
lgassoc Posted April 19, 2017 Author Share Posted April 19, 2017 Hi, @TylerC. One final issue we just noticed -- this also affects banner heights for blog pages -- which simply adds a big block of blank space to the top of blog posts based on the manual height code. Is there any way of excluding this code for blog posts? Much appreciated!! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.