changing head-banner size

• 

  vivoforto · Member · Aug 9, 2016 at 2:22 pm

  • Copy link
  • Add topic to favorites

  I’ve been trying to change the size of the head-banner of my site for quite a long time. I want to change its height to 800 px. I can change it on my computer but not in the CSS of wordpress. I’m using port theme.

  The blog I need help with is: (visible only to logged in users)

• 

  hallluke · Member · Aug 9, 2016 at 2:44 pm

  • Copy link

  The height is set via javascript so it can be a bit tricky to override. Also it’s set to be dynamic based on the size and orientation of the screen it’s being viewed on (so that your visitors don’t have to scroll endlessly to reach your actual content).

  What CSS have you tried that worked locally and what sort of effect are you trying to achieve?

• 

  vivoforto · Member · Aug 9, 2016 at 2:55 pm

  • Copy link

  I tried to make it smaller, because now it is filling up the whole screen. I believe it now is 1337 px, and I find it too big.

  <div id=”home-banner” class=”has-background” style=”height: 1321px; background-position: center -165.333px;”>
  <div id=”down-button”></div>
  </div>

  here I can change the height, bus in CSS it wont work

• 

  hallluke · Member · Aug 9, 2016 at 3:16 pm

  • Copy link

  Try resizing your browser window or viewing your site on a tablet or smartphone and you’ll find the image still takes up the availabe screen space. Are you trying to reduce the height of the image just on larger screens? This still might be tricky due to the way the theme is designed specifically to adjust the image to match the screen height, but let me know.

• 

  vivoforto · Member · Aug 9, 2016 at 3:18 pm

  • Copy link

  I want to reduce size on every device. Not just on larger screens. It takes up all the screen now and I want to reduce its height so you can see some other content as well

• 

  vivoforto · Member · Aug 9, 2016 at 3:20 pm

  • Copy link

  Can you see what I mean on my website?

• 

  vivoforto · Member · Aug 9, 2016 at 3:20 pm

  • Copy link

  In my own browser I can change it, but when I try it on the CSS section it doesn’t work

• 

  hallluke · Member · Aug 9, 2016 at 3:26 pm

  • Copy link

  I can’t see a good way to do this, as it is a premium theme you could try asking the theme author on the Port theme support forum as they would be best placed to help. If I think of anything I’ll let you know.

• 

  hallluke · Member · Aug 9, 2016 at 3:31 pm

  • Copy link

  You can override the javascript-added height with something like the following:

  #home-banner {
    height: 800px!important;
    background-size: contain;
    background-color: #fff;
  }

  but that will be set for all devices and you might not want to make it so big on mobiles.

• 

  vivoforto · Member · Aug 9, 2016 at 3:36 pm

  • Copy link

  Thank you, I believe it worked! I think it is fixed now. Thank you so much for helping! <3