Question: One think I like to do is to make the grey header section smaller in height (where the "Volvotreter Homepage" is inside). I'd like to get just a little bit higher than the text is so that it does not waste so much screen height.
Although I was able to make some modifications to the style.css of the used colorlib.com/wp/travelify/ theme, I was not able to figure out how this works. The section of the page is called site-title and its height seems to be dynamically scaled. Any WP/css gurus around?
Regards.
I'm no Wordpress/CSS guru but I do have the Firebug debugger plugin.
I am viewing your HTML source code as outputted via PHP and your CSS (
http://wp.volvotreter.de/wp-content/themes/travelify/style.css) style sheet. Note the following HTML in the <header> section of your sites' pages. I have partially colored three lines of code in blue. Those blue shaded lines of code are referencing a
Class (hgroup-wrap) and two
IDs (branding & site-logo).
Code:
[COLOR=RoyalBlue]<header id="branding"[/COLOR]><div class="container clearfix">
[COLOR=RoyalBlue]<div[/COLOR][COLOR=RoyalBlue] class="[/COLOR][COLOR=RoyalBlue]hgroup-wrap[/COLOR] clearfix">
<section class="hgroup-right"> </section>
[COLOR=RoyalBlue]<hgroup id="site-logo"[/COLOR] class="clearfix">
<h1 id="site-title">
<a rel="home" title="Volvotreter Homepage" href="http://wp.volvotreter.de/"> Volvotreter Homepage </a>
</h1>
<h2 id="site-description"></h2>
</hgroup>
</div>
</div>
<img class="header-image" height="250" width="1018" alt="Volvotreter Homepage" src="http://wp.volvotreter.de/wp-content/uploads/2016/04/header_1.jpg">
<nav id="main-nav" class="clearfix">
</header>
Now that we have an idea where the offending problem(s) may be, lets search your CSS style sheet (
http://wp.volvotreter.de/wp-content/themes/travelify/style.css) for that
Class and those two
IDs. They are in found in two different sections of your style sheet as shown in red:
Code:
[COLOR=Red]#branding[/COLOR] {
margin-top: 15px;
}
[COLOR=Red].hgroup-wrap[/COLOR] {
padding-top: 15px;
padding-bottom: 35px;
}
.hgroup-wrap a {
display: block;
}
[COLOR=Red]#site-logo[/COLOR] {
float: left;
margin-top: 32px;
}
..........................
.....................
..................
[COLOR=DimGray]/* All Mobile Portrait size smaller than 768 (devices and browsers) */[/COLOR]
.............................
........................
.................
[COLOR=Red]#branding[/COLOR] {
margin-top: 15px;
}
[COLOR=Red].hgroup-wrap[/COLOR] {
padding-bottom: 25px;
padding-top: 0;
}
.hgroup-right {
margin-top: 32px;
}
.hgroup-right .social-icons {
display: none;
}
[COLOR=Red]#site-logo[/COLOR] {
margin-top: 25px;
}
If Wordpress has a "Sandbox" area in the ADMIN area maybe you can make the necessary changes in there and view the result before committing your changes. If not, you'll either have to change stuff on the fly as your site is live, or take it down for maintenance. You decide.... personally I work mine hot.
Anyway, search your CSS style sheet for those IDs and Class and alter the "margin-top: xxpx;" and "padding-bottom: xxpx;"numbers.
The
<header id="branding" ID doesn't appear to be used on your site so you can probably reduce that setting to 2px or so, without wrecking anything, in each section of your CSS sheet. You may have to experiment with
#site-logo and .hgroup-wrap px settings, reducing one or both, as I can't advise you on your layout since I'm working from a debugger, and not the actual source code.
Hope this helps, have fun with it.
