dnesci Posted March 13, 2014 Share Posted March 13, 2014 I am looking to change the banner size on the Bedford template. my site is http://spearhead.to I have tried: .desc-wrapper { height: 300px !important } This code brings the bottom of the banner up, however, the header content does not align to the centre of the banner. I am a Toronto realtor and owner operator of Spearhead Property Management Ltd. I am a partner in a few other companies in printing, restaurant and software industries. Link to comment
George_SQSP Posted March 13, 2014 Share Posted March 13, 2014 The height of what we call the Page Banner (i.e. a banner created by uploading a thumbnail image to a page or blog list, event list, or product list, and editing the page description) is determined by padding. You can change it here (edit 180px and 155px to whatever you want): .transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail-wrapper{ padding: 180px 0 155px; } To make the content appear vertically centered with the transparent header, the top and bottom padding are not exactly the same, so you'll have to eyeball it a little. Link to comment
dnesci Posted March 13, 2014 Author Share Posted March 13, 2014 beautiful. thank you very much. I am a Toronto realtor and owner operator of Spearhead Property Management Ltd. I am a partner in a few other companies in printing, restaurant and software industries. Link to comment
dnesci Posted March 15, 2014 Author Share Posted March 15, 2014 I have chosen to go with a fixed header. However I find that the bsnner image is cut off at the top. Is there a way to adjust that? I am a Toronto realtor and owner operator of Spearhead Property Management Ltd. I am a partner in a few other companies in printing, restaurant and software industries. Link to comment
keinocycles Posted March 15, 2014 Share Posted March 15, 2014 added this css editor at style editor,, i dont see changes,, am missing something? Link to comment
dnesci Posted March 15, 2014 Author Share Posted March 15, 2014 keinocycles: is your banner fixed, or transparent? I am a Toronto realtor and owner operator of Spearhead Property Management Ltd. I am a partner in a few other companies in printing, restaurant and software industries. Link to comment
neiladots Posted March 16, 2014 Share Posted March 16, 2014 This works great, but not so much for mobile (depending on the size you pick I'm sure). Is there a way to have the mobile rendering of the site ignore this code and behave how it normally would? Link to comment
George_SQSP Posted March 17, 2014 Share Posted March 17, 2014 @NeilaDot – The mobile padding is set separately using a max-device-height @media query. Since that selector would be more specific than the code I provided, it would override any padding you set above. You may not see it as such on desktop since the @media query uses device-height, but if you look on your phone you should see it. Link to comment
whattingh Posted April 6, 2014 Share Posted April 6, 2014 I am really struggling to get this to work. Am I doing something wrong? I am trying to paste this into custom CSS, but it's not responding. .transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail-wrapper{ padding: 180px 0 155px; } Any help? Link to comment
blonde40744 Posted April 9, 2014 Share Posted April 9, 2014 Its not responding for me either, tried it in page settings and custom css. My banner is transparent so idk what I'm doing wrong either. Link to comment
Guidum80 Posted April 21, 2014 Share Posted April 21, 2014 It’s because you need to declare the #collection-id in front of the suggested CSS.So it becomes: .collection-xxxxxxxxxxxxxxx .transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail-wrapper { padding: 180px 0 155px; } Link to comment
Guest Posted April 22, 2014 Share Posted April 22, 2014 How did you have one fixed size of the banner on your homepage AND info pages but a shorter one for services and requests? When I input the coding, it changes the banner height for all pages. Link to comment
dwhaite Posted June 17, 2014 Share Posted June 17, 2014 This doesn't seem to work if the first element on the page is an image gallery, which is what is necessary to have a carousel on the page. Here is the link to the how-to on creating the carousel: http://answers.squarespace.com/questions/42720/make-heromarquee-image-a-carousel-in-bedford-template Any CSS that will work in this case to shrink the banner image size? Thanks! Link to comment
caroline.leonard Posted April 29, 2015 Share Posted April 29, 2015 Have you worked out how to decrease this carousel banner page? Thanks, Link to comment
Jukkernaut1570047940 Posted May 11, 2015 Share Posted May 11, 2015 I tried the CSS but it doesn’t seem to do anything for me. Any ideas how to decrease banner image height here: mats-vuorenjuuri.squarespace.com ? Link to comment
Guest Posted June 23, 2015 Share Posted June 23, 2015 How do you make this work for a NON-transparent banner? Link to comment
Shaun P Posted November 5, 2015 Share Posted November 5, 2015 Yes Please! I also use a non transparent banner and have issues with this. I've used the adding line breaks trick to the page description but I've realized the image size is then drastically different on different computers. Link to comment
owb777 Posted November 29, 2015 Share Posted November 29, 2015 The CSS code above does not appear to work for fixed banners in the Bedford template. Does the code above need to be tweaked to work for fixed banners? This has been a challenging one to fix...any help would be greatly appreciated! Link to comment
Guest Posted December 8, 2015 Share Posted December 8, 2015 Has anyone figured out a solution for shrinking the banner height with fixed banners? I would be SO grateful! Thanks! Link to comment
Guest Posted December 8, 2015 Share Posted December 8, 2015 Has anyone figured out a solution for shrinking the banner height with fixed banners? I would be SO grateful! Thanks! Link to comment
geismapa Posted December 9, 2015 Share Posted December 9, 2015 The best solution I found (and I'm not a coder) is that the amount of text you put over the banner is what drives its height. When I reduced the lines of text, the banner got shorter. Maybe that can help you, too? Link to comment
Guest Posted April 14, 2016 Share Posted April 14, 2016 @sproutedstudio try this out.. .view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper {min-height: px;height: px;width: 1100px;padding: 5px 0 !important } .banner-thumbnail-wrapper{height: 500px} Link to comment
Guest Posted April 6, 2017 Share Posted April 6, 2017 This works great, but how to center text? Link to comment
Guest Posted June 7, 2017 Share Posted June 7, 2017 Hi George. I am looking for help to increase / decrease the top banner height for each individual page in my website and also how to create a border around the text in my top banner. Please help, I do not come with a coding background. my website is - https://raj-gupta-mdb9.squarespace.com/config/ Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.