How To Increase Gazette Template Height And Maintain Equal Spacing Above And Below The Logo
Sean Carney
I am using the Gazette template and have tried to increase the height of the logo because our logo is two lines and an image. So, it needs to be somewhat taller.
The problem is when I increase the height from 26 (quickstart setting) to 110 then the row becomes uneven with too much space above the image no space below the image. I am wondering what I can do to create enough height so that there will be an equal spacing above and below the logo and the search field:
Default Gazette logo with height increased to 110 pixels: https://drive.google.com/file/d/1rFdgxUkUeaCHZ7QWSVN1gPWc5CedrDgg/view?usp=share_link
ShalomAventure Logo at 26 (default) pixels height: https://drive.google.com/file/d/1LpWazLL8lr0Ii9EPiEsQyadwWhSUmY3F/view?usp=share_link
ShalomAdventure logo increased to 110 Pixels: https://drive.google.com/file/d/1GrTLymo99OWSz89kiGpvpuCNDgPnzlwv/view?usp=share_link
Mehtaz Afsana Borsha
Accepted AnswerYou should set the header height and logo height same
Try this one
.logo-image {
height: 100px !important;
}
#sp-header{
height: 100px !important;
}
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us. Did you try the CSS? It seems like this when I set the height by using custom CSS
Is this ok for you?
-Regards.
Sean Carney
Accepted AnswerIf that has the height increased by usinig CSS then I would say it worked perfectly. But, from what I see it looks like the quickstart.
Can you give me the css that you suggest that I use and tell me where you put it?
I have selected our logo for the logo space and set the height to 110 pixels. If you can give me CSS to make the logo and the search field center alight vertically, I will be grateful.
Currently there is too much space above the image and the search box and not enough space below the image and the search box.
Mehtaz Afsana Borsha
Accepted AnswerUse this custom CSS
#sp-header{
height: 110px !important;
}
Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.
Sean Carney
Accepted AnswerThat definately worked. I am wondering if there is any simple css to reduce the whitespace slightly both above and below the logo and search field?
Sean Carney
Accepted AnswerI accepted the answer because it worked but because I had a second related question after seeing how it worked, I rejected the answer. But, it was not because I was not happy with what you provided. I was concerned that I might not receive the answer to the second quesion if this was marked and solved. Sorry for the inconvenience.
Mehtaz Afsana Borsha
Accepted AnswerJust reduce the sp-header height. You can use 80/90px .
Sean Carney
Accepted AnswerThank you for your answer. It almost works and I had already tried a variety of heights. In order to have it appear close to balanced with the space above and below being the same height, I need to use the 110px. If I reduce the number to 90px then the white space below the logo and search field is reduced but the space above is not affected. So, it is not balanced or even. That is what I was hoping to achieve.
height to 110 https://drive.google.com/file/d/1tiRXMf9KqVsIw9F3ULWiMo_tcRR41jvj/view?usp=share_link
height to 90 https://drive.google.com/file/d/1yl8smxL_k4ykcnolsgPJroWGtioFvznt/view?usp=share_link
So, it seems that I may need a bit of another css code to reduce or increase the space above the logo and image.
Mehtaz Afsana Borsha
Accepted AnswerYou are always welcome! It would be very kind of you if you can manage some moment to give us feedback here:
https://extensions.joomla.org/extension/sp-page-builder/
https://www.trustpilot.com/review/www.joomshaper.com
Please let me know your name on the review.Thanks for being with us :)