Center-justify logo on homepage VERTICALLY

  • Unknown's avatar
    sophiakotullaname · Member ·

    Hi,

    I need help for my website http://www.burnout-praxis.com

    I’m using the theme “Twenty Seventeen”.

    My problem refers to the logo on the homepage. Currently, it is left-justified. I already found out how to center-justify it HORIZONTALLY based on CSS. However, I also want to center-justify the logo VERTICALLY.

    i.e., I do NOT want to have it this way:
    – – –
    – – –
    – x –

    But this way:
    – – –
    – x –
    – – –

    Any ideas?

    Thanks & regards,
    Sophia

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

  • supernovia · Staff ·

    Hi Sophia, something like this may work:


    @media     screen and (min-width: 48em) {
    .has-header-image.twentyseventeen-front-page .site-branding, .has-header-video.twentyseventeen-front-page .site-branding, .has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding {
    bottom: 40%;
    }

    Please adjust that number as needed. Note it’s only for larger screens, too. On smaller screens, aligning to the bottom will give your users a better chance at seeing the header image.

  • Unknown's avatar
    sophiakotullaname · Member ·

    Hi Supernovia,

    I saw your answer today only. Therefore, sorry for my late reply.

    Wow, it looks good, at least in the CSS preview window. However, there are two problems:

    1) When saving the changes, they are not shown in my browser. And when I go back to check the CSS code in WordPress, it shows that everything behind the first { was automatically deleted. Thus, only the following code remains:


    @media     screen and (min-width: 48em) {

    What happens here? What do I have to change so that the entire code will be accepted after saving?

    2) Based on your CSS code, not only the logo, but also the website’s title and subtitle are being center-justified vertically.

    Is it possible to split this, i.e., to have the logo center-justified vertically, but to keep the title and the subtitle at the bottom of the page?

    Thank you!

  • aleone89 · Staff ·

    Hello there,

    Many thanks for reaching back out.

    I was able to add the CSS provided and save it without a hitch, that said, it looks like you require different CSS.

    Is it possible to split this, i.e., to have the logo center-justified vertically, but to keep the title and the subtitle at the bottom of the page?

    The CSS you would require is: 

    

/* Vertically center logo AL */ 

@media screen and (min-width: 48em) {
.custom-logo-link {
    padding-right: 2em;
    padding-bottom: 40%;
}
}

    I hope this helps.

  • Unknown's avatar
    sophiakotullaname · Member ·

    Wow, it works. Thanks a lot!

    Unfortunately, however, I just realized that this design doesn’t look good on mobile devices. So, I just switched back to the original design.

    Anyways, thanks a lot for your help!

  • The topic ‘Center-justify logo on homepage VERTICALLY’ is closed to new replies.