Alignment of site title

  • Unknown's avatar
    neil25586 · Member ·

    Hi Guys,

    Sorry for so many posts in the last couple days, i’m slowly getting there! I’ve added a custom header image to my site and i’m happy with it, i’ve managed to change the size of the header manually to a size i’m happy with, the issue i’m having is the positioning of my site title.

    I want it to be optimised for viewing on tablets, desktop and mobile, i can’t seem to have the site title appear in the same place on all 3 platforms.

    It seems the text size on mobile can’t be changed or perhaps i’m missing something. I’ve used the below CSS to format it perfectly for mobile but this causes the desktop version to appear way lower than i want, ideally i want it to be centred from a vertical alignment point of view, on all 3 platforms:

    .site-title {
    font-size: 75px;
    font-weight: bold;
    line-height: 1;
    margin: 0;
    padding: 50px 0 10px;
    }

    Apologies if i’m overlooking something here, i just can’t seem to figure it out, if i have it padded to suit desktop it puts it way too high on the mobile site and when its perfect on mobile its too low on the desktop!

    Many thanks in advance for any help you can provide.

    Neil.

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

  • supernovia · Staff ·

    You can apply this CSS only on small screens, like so:

    @media screen and (max-width: 335px) {
	.site-title {
		font-size: 75px;
		font-weight: bold;
		line-height: 1;
		margin: 0;
		padding: 50px 0 10px;
	}
}

    There’s actually already some of that in play, which is why your site title is not really showing up as 75px tall on mobile. I hope that helps!

  • The topic ‘Alignment of site title’ is closed to new replies.