jealevy Posted April 11, 2014 Share Posted April 11, 2014 I'd really like to reduce the Bedford template's homepage's banner height, while retaining its headline functions, and keeping the site mobile-friendly. I know a little html and css, but am not a developer; I've tried some "code injection" tips from the forum about increasing the banner size, but have not been able to get anything working. Any advice? As background, I'm working with a client who really likes this template. Her site is pretty simple, so we are using copies of the homepage-style template for every page in the site. She doesn't have a lot of content in the banner area though, and I feel that the banner takes up too much screen space, pushing the subsequent content too far down the page. Link to comment
e2astudio Posted April 12, 2014 Share Posted April 12, 2014 Consider posting a link to your site so people in the community can help. The banner area size is controlled in a few different ways, depending on the content. Link to comment
jealevy Posted April 15, 2014 Author Share Posted April 15, 2014 Thanks for the tip! It's drlifaustino.com Link to comment
e2astudio Posted April 15, 2014 Share Posted April 15, 2014 Add this code snippet to the CSS Editor found inside the Style Editor to adjust the banner area padding: .transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail-wrapper { padding: 180px 0 155px; } Adjust the top padding (180px) and the bottom (155px) values to your preferred sizes. Link to comment
jealevy Posted April 15, 2014 Author Share Posted April 15, 2014 Worked like a charm, thank you so much! Link to comment
squareology Posted January 31, 2015 Share Posted January 31, 2015 If you want this to affect only the homepage (or any other single page), add it to the Page Header Code Injection in the Advanced tab of your Page Settings, and add Style tags around the code like this: <style> .transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail-wrapper { padding: 180px 0 155px; } </style> Link to comment
bweismann Posted May 31, 2015 Share Posted May 31, 2015 This works, but how does the image size itself effect how it is displayed? Do I need to ensure the images I upload all have the same dimensions? I've got 12 different images I'm using and when displayed on my site, they range in size from 336 px - 649 px. I'm adding Link to comment
bweismann Posted May 31, 2015 Share Posted May 31, 2015 Perfect! What about individual blog posts? Link to comment
julie1020 Posted November 30, 2015 Share Posted November 30, 2015 When I test this in Mobile, it does not seem to make a difference there. Is there any way I can shrink the height in Mobile mode as well? Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.