Moving and resizing home site title

  • Unknown's avatar
    elkalina · Member ·

    Hi there! I have a custom CSS page set up and have been experimenting with some changes to the them. A couple of things are proving difficult, however:

    I want to move the home page title upwards to be in the same position that it occupies on other pages. I played with the site.header’s padding-bottom and padding-top properties, but maybe I’m not getting it right.

    I also don’t like how the background shading behind the title extends across the screen. I tried setting the width 25% and the margin-left and left both to 38%, but this causes the text to get broken up (within a single word) when the screen narrows. I’m sure there’s a simple solution here, I just don’t know exactly what it is.

    My site is http://markbaum.net

    Thanks!

    Mark

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

  • Unknown's avatar
    elkalina · Member ·

    .site-header {
    padding-bottom:1em;
    padding-top:1em;
    }

    .site-title {

    border-radius: 5%;
    padding: 2%;
    background-color:rgba(0,0,10,.5);
    width: 25%;
    margin-left:38%;
    left:38%;

    }

  • Unknown's avatar
    elkalina · Member ·

    Actually, I just observed a little more closely and understand better the difference between the home page and the other pages. If I make the window very short, the home title text starts at the same position as on the other pages. But as I maker the window higher and higher, it moves downwards as if anchored to the bottom of the window.

    I want to fix it in a static position near the top of the window.

    (And of course deal with the shaded background/width of element issue as well).

    Thanks!

  • Unknown's avatar
    elkalina · Member ·

    It looks like I need to understand the properties listed here…

    .home .site-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-align: center;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-line-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    }

    .home .site-branding {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    }

  • Unknown's avatar
    elkalina · Member ·

    For the top alignment, this has gotten me pretty close. What can I cut or change here?

    .home .site-branding {
    padding-top: 1.55em;
    }

    .home .site-header {
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-line-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: start;
    justify-content: start;
    }

  • Unknown's avatar
    elkalina · Member ·

    So aside from cleaning that change up, my remaining problem is having my title read “Mark<br/>Baum” with a reasonable amount of padding around it, in a box that resizes proportionally to the content, and stays centered.

    I suspect that the same sorts of commands are what I need here, rather than the old fashioned (and unsatisfactory) approach I took…

    Hoping to hear from someone about this tomorrow. Thanks!

    Mark

  • Unknown's avatar
    elkalina · Member ·

    Here’s one more thing that would be neat to do: have the home page background image have a different level of transparency/opacity than on the other pages. Is that something I could adjust in my child stylesheet?

  • Unknown's avatar
    elkalina · Member ·

    Just checked in here and see there are no replies. Anyone out there who can help me out? Thanks!

  • Unknown's avatar
    ravichahar · Member ·

    Hey Mark,

    You use the standalone WordPress software and your website is hosted on Inmotionhosting.

    We’re here able to help only with the websites hosted on WordPress.com.

    To seek any kind of help regarding a self-hosted WordPress site, you should ask your question in WordPress.org forums.
    https://wordpress.org/support/forums/

    To do so, you need to create an account on WordPress.org.
    https://login.wordpress.org/register

    WordPress.com and WordPress.org are two different platforms. To know more, please read this.

    WordPress.com vs. WordPress.org

  • Unknown's avatar
    elkalina · Member ·

    Thanks for the heads-up on this. I’ll copy my content here and then delete this thread. Cheers — Mark

  • The topic ‘Moving and resizing home site title’ is closed to new replies.