Pique theme : position Site Title and tagline

mluyten · Member · Oct 30, 2017 at 2:33 pm
Copy link

Add topic to favorites
Hello, I have a premium account at https://marcialuyten.nl but i am doing testing and modifying at https://marciadev.wordpress.com

My question is, how to position the Title and tagline with custom css, so it doesn’t cover the face. In this screenshot you see what i mean.
https://www.dropbox.com/s/6me6sg9eh1ug4gk/30-10-2017%2011-54-35.jpg?dl=0

Thank you,
Rob

The blog I need help with is: (visible only to logged in users)
jessestu · Member · Oct 30, 2017 at 5:51 pm
Copy link
Hi Rob,

Your testing site is marked private, which is good for your own development site. Only WordPress.com staff will have access to that site, so I’m using your published site (https://marcialuyten.nl) for my testing. If there are any code or theme conflicts, my code will not work on your test site.

I created these three positions depending on screen size, so it always stays a bit to the right and moves down on a wider screen.

You can tweak any of this code as you like.

Best,
Jesse
```
@media screen and (max-width: 559px) {
  .site-branding {
    left: 70%;
    top: 28%;
  }
}
@media screen and (min-width: 560px) and (max-width: 899px) {
  .site-branding {
    left: 70%;
    top: 50%;
  }
}
@media screen and (min-width: 900px) {
  .site-branding {
    left: 64%;
    top: 70%;
  }
}
```
mluyten · Member · Oct 31, 2017 at 8:50 am
Copy link
Great Jesse, much better!
What do we add to align both the site-title AND the tagline LEFT?
jessestu · Member · Oct 31, 2017 at 1:33 pm
Copy link
This code will move both the title and tag line (they’re both inside a divider box with a class tag of “site-branding”, which is what this code affects). If it’s not doing that on your end, let me know.

To make them show left of center, change the value of the “left: x;” above. It’s a percentage, so inverse all three: 30%, 30%, and 36% from top to bottom in the above code.

What else are you wondering about?

Best,
Jesse
mluyten · Member · Oct 31, 2017 at 1:56 pm
Copy link
Fixed it with this

#masthead .site-branding .site-title a {
font-size: 150%;
font-weight: bold;
}
#masthead .site-branding .site-description {
font-size: 125%;
}
jessestu · Member · Oct 31, 2017 at 2:11 pm
Copy link
I’m glad you got it working how you wanted! Post again for more fixes and we’ll be glad to help.
siobhyb · Member · Oct 31, 2017 at 3:11 pm
Copy link
Thanks so much for your excellent help @jessestu! 🙌
jessestu · Member · Oct 31, 2017 at 3:22 pm
Copy link
Thanks so much! 😁

No items found.