Banner Padding and Height

Banner Padding and Height


On my site I am using the Paris Blog theme with tall-banner pages. I like it, but the banner is a bit too tall. I've tried everything I can to limit the height of the banner in the CSS, but can't get it to get any shorter. Anyone have a clue?

Re: Banner Padding and Height


HI @ZenMonkey

 

What is your URL.. i'll have a look at your site and give you instructions on changing the height of the banner.

 

If you do not want the URL to be public, please PM me the URL.

Kind Regards,
Webfire Themes - The Best Premium Weebly Templates on the Planet! - https://webfirethemes.com

Re: Banner Padding and Height


www.proactiveevolution.com

 

Of course, I want the banner to stretch ("background-size: cover;") but want to constrain the vertical window.

Re: Banner Padding and Height


Hi @ZenMonkey,

 

If you are still looking for modifying this banner height for your blog,

there is a min height set to 350px and obviously your content extends it, especially the image you have added, you could modify the minimum height of the banner and change the dimensions of that circle logo image.

 

So instead of creating your div for the logo by using padding in percentage you could set the height of the div in pixels and remove the padding. 

 

In this case the settings modified are:

.tall-header-page .banner-wrap{
   min-height: 100px;
}

and the settings for your div you added:

.banner-wrap .pelogo {
   padding: 0;
   height: 100px;
}

Changing those codes would change it for all your tall header banners, so make sure to verify it before.

If you have more questions, I'd be happy to assist you.

 

Hope it helps a little.

Re: Banner Padding and Height


If i put

.banner-wrap .pelogo {
   padding: 0;
   height: 100px;
}

The logo disappeared., however, if I put:

.banner-wrap .pelogo {
   padding: 10% 0;
   height: 100px;
}

The logo got smaller and the header was shorter.

 

Thanks

 

Re: Banner Padding and Height & footer issue


I also noticed that the footer doesn't update like the menu and there are some anomalies in the formatting. I added the "Calendar" page, and then had to manually add it to the footer. Additionally, when the window is just wide enough so that the page doesn't switch to a single column, the footer looks as follows:

 

Re: Banner Padding and Height & footer issue


Hello @ZenMonkey

 

 I went in to look at the footer and it looks great did you get this figured out already?

Re: Banner Padding and Height & footer issue


No. I didn't get it figured out. It seems to happen as soon as the Hamburger appears.

 

As I narrow the browser window it will go from

 

to this:

 

 

If I look at it in the site editor, when the window is wide enough, "Contact" appears in a box the same size as all the others. However, when I shrink the window down a bit more, the "Contact" Title Box spans the entire right column, while the other four menu options are grouped under the left column.

 

Wide enough:

 

Not wide enough:

 

 

 

Re: Banner Padding and Height & footer issue


No follow up?

Re: Banner Padding and Height & footer issue


Hi @ZenMonkey

 

My apologies, we've been a bit snowed under over the past few weeks and had to juggle our workload a bit...

 

In the main_style.css you'll find this code:

.tall-header-page .banner-wrap {
    display: table;
    width: 100%;
    min-height: 100px;
    max-height: 350;
    padding-top: 80px;
    text-align: center
}

If you change it to

.tall-header-page .banner-wrap {
  display: block;
  width: 100%;
  height: 400px;
  max-height: 400px;
  padding-top: 80px;
  text-align: center;
}

 

The height:400px can be tweaked accordingly, however you are limited to only reducing it so much due to the size of the caption.

 

Let me know if this helps.

 

 

Kind Regards,
Webfire Themes - The Best Premium Weebly Templates on the Planet! - https://webfirethemes.com

赞 (0)

Comment

2+6=