Position and size of logo

emilypshea · Member · Jan 26, 2017 at 4:27 am
Copy link

Add topic to favorites
I added a logo to the heading of my page, and I don’t want it to sit on top of the title. I would like the logo to go to the right or left side of the title, and possibly be bigger.

Site I need help with: http://theeverydaytravelers.com

I added a logo to the heading of my page, and I don’t want it to sit on top of the title. I would like the logo to go to the right or left side of the title, and possibly be bigger.

The blog I need help with is: (visible only to logged in users)
eallas · Member · Jan 26, 2017 at 1:44 pm
Copy link
Howdy emilypshea!

I added a logo to the heading of my page, and I don’t want it to sit on top of the title. I would like the logo to go to the right or left side of the title, and possibly be bigger.

The following code should do the trick of having the logo to the left side of the title & description. The end piece of the code changes the size of your logo specifically. Let me know if you run into any problems.
```
@media screen and (max-width: 850px){

.site-title {
    position: relative;
    top: 25px;
    left: 25px;
}

.site-description {
    position: relative;
    top: 20px;
    left: 25px;
}

.site-logo-link img {
    display: flex;
    float: left !important;
    height: 100px !important;
    width: 100px;
}

}
```
emilypshea · Member · Jan 26, 2017 at 7:33 pm
Copy link
Thank you. If I just copy and paste this code into “Customizing CSS” will that do the trick?
eallas · Member · Jan 26, 2017 at 7:40 pm
Copy link
Yes, by going to https://wordpress.com/customize and clicking on CSS, you can paste it into there and it should do the job.
emilypshea · Member · Jan 26, 2017 at 7:54 pm
Copy link
Hi again! I did that, but it’s not appearing to make any changes on the homepage of my site. What else should I try? Thank you

eallas · Member · Jan 26, 2017 at 8:00 pm

Try this:

{

.site-title {
    position: relative;
    top: 25px;
    left: 25px;
}

.site-description {
    position: relative;
    top: 20px;
    left: 25px;
}

.site-logo-link img {
    display: flex;
    float: left !important;
    height: 100px !important;
    width: 100px;
}

emilypshea · Member · Jan 26, 2017 at 10:27 pm
Copy link
Still no luck. Should I check off the box that says “Don’t use the theme’s original CSS” ?
staff-loquaciousloon · Staff · Jan 31, 2017 at 3:35 pm
Copy link
Hi @emilypshea!

Don’t check that box, no – that would mean you’re writing all of the CSS for the entire site :)

It does look like you’ve managed to shift your logo to the left since your last post. Did you still need a hand?
eallas · Member · Jan 31, 2017 at 4:04 pm
Copy link
It seems I added an extra “{” in my last post and they may have removed it to get it working. My apologies for the delayed response.
emilypshea · Member · Jan 31, 2017 at 6:03 pm
Copy link
No worries, thank you!

The topic ‘Position and size of logo’ is closed to new replies.

WordPress.com forums

Position and size of logo