Changing header and header image size

Hi, @tezartdesign

Let’s take it step by step. Although centered might be intuitive, it does’t work. Instead, this does the trick: margin:0 auto;

Also, background-color should be either in rgb: rgb(135,173,155) or in hex: #87ad9b but not both.

Full code below:

.site-header {
background-color: #87ad9b;
max-width: 70%;
position: relative;
width: 70%;
z-index: 4;
margin:0 auto;
}

I notticed that on mobile devices the header had a unecesary margin to the right. This can fix it:

@media screen and (max-width: 767px)
.site-header .site-branding {
    width: unset!important;
}

As for the position of your image, this code makes its width 70% (same as site-header) and centers it.

#wp-custom-header{
    width: 70%;
    display: block;
    margin: 0px auto !important;
}

To manually hide your header site description, you would need to find out what ID each page has (inspecting the element) and then add the following (Forum page ID is 98).

.page-id-98 .site-description {display:none;}

Add the above CSS in Dashboard – Appereance – Customize – Additional CSS in the Customizer

You can learn how to use the Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS.

As far as I know, to completely change the position of your header image, you have to edit your theme’s files / create a child theme (CSS is not enough.), but maybe your theme gives you this option.

I recommend asking at https://www.ads-software.com/support/theme/aeonblog/ so the theme’s developers and support community can help you with this.

Hope this helps,
Kind regards!

Thank you so much, this is very helpful and really appreciated! It helped me out a lot! However, I run into a few little problems, maybe you could shine some light on them:

1: The WP header code works, but it works differently on different browsers. 63% for example is a perfect fit for firefox, but 70 is for edge, how is this possible and how can it be resolved?

2. When I go to mobile firefox I notice a few things: The text Life to Legend is not aligned in the middle. The text is centered onto itself, but not on the responsive page width. This counts for the text right under it as well. Your code seems to have partially solved the unnecessary space on the right, but not fully. Also, I think on mobile it would be better if it used say, 95% of the width, it looks a bit weird now on mobile devices to have so much text but no banner or images or anything (I can’t place any in there sadly, might be a limitation of the free version of that template).

3. Is it possible to have two different banner sizes? One larger for the mobile version? I think I would have to resort to full width on that one, so it’s kinda related to the question above. If that’s not possible it’s fine, I mean to change it anyways when I have the right art available, but I like to have a bit more insights on the matter so I know what’s the best route to take.

4. And finally, whenever I go to another page but the homepage, I get this location bar (Home/Archive for example) Can I just shut it down manually or is that really a template thing?

I’m sorry for asking so many questions, I came from building Joomla sites with no technical background at all (took me 3 years to get friends with joomla) I’m still trying to figure out how everything works here and what the limitations are (or not) and where they come from (If it’s the template or WP). Thank you so much for making it easier for me!

First of all, sorry. I have a typpo in my 2nd block of code, the one starting with @media. (I missed an extra set of { } ). You don’t need to fix that, because that is the exact piece of code I will ask you to change, in order to achieve no.2 and 3 from your list.

So please replace the 2nd piece of code with:

@media screen and (max-width: 767px){
.site-header .site-branding {
    width: unset!important;
}

.site-branding{
    max-width:80%!important;
    margin:0 auto;
}

.site-header, #wp-custom-header{
    max-width:100%!important;
    width:100%!important;
}

}

Explanation: This CSS block is only for devices that have a width less than 767px (mobile devices). On those devices, I set the width of your text-descrpition to 80% and the size of your image banner and menu to 100%. You can change those as you wish.

works differently on different browsers.

My guess is that it depends on window size. Here’s a tutorial on responsive layout

For the last part, those are called breadcrumbs and you should be able to disable them from your theme settings. If not possible (I don’t know your theme possibilities – but developers on the forum I linked to above know) then you can add this CSS code:

.breadcrumbs {display:none;}

If it’s the template or WP

Everything we have covered in this topic is template related – created by your theme and modified trough custom CSS. WordPress only makes use of this template/theme to display your content.

Kind regards.

Again, thank you so much for your help, it’s working like a charm now!I will dig into the tutorial, but so far I’m very happy with the results, your elaborate explanation was very helpful!

Happy to help and I’m glad it works!
And wow! That header image with eyes looks stunning ??

If your question has been answered, we would love if you would mark this topic as resolved in the sidebar. This helps our volunteers find the topics that still need attention and more people will get helped, possibly like you did.

Thank you and good luck with your website!
Kind regards!

Thanks Vlad, yea I drew that one myself, art will be part of that blog, it’s a great way to vent! Thanks so much for all your support, that was a pleasant surprise coming fresh into WordPress.

~Tess