[Kent Hirsch]

Site title
I received information on how to increase the distance between logo and title on the website.

.site-title {
margin-left: 10px;
}

But how do I avoid the headline being placed obliquely under the logo on smartphones?

https://www.hjk.se

[Skandha]

@hirschan: Hello Kent,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.site-branding {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.site-title {
	margin-left: 28px;
	text-align: left;
}

Let me know if this works out!
Kind Regards,
Skandha

[Kent Hirsch]

Didn’t work.

With this code, the logo and title end up centered on page when viewed on a computer.
On a mobile phone, it looks catastrophically bad because it is not responsive. Half the logo is gone and the title is also cut.

My wish:
On the computer logo on the left, title next to the right.
On mobile phone logo in the middle, title centered under logo (preferably responsive).

Kind regards
Kent

[Kent Hirsch]

Now the logo and title are centered when you see it on a computer and that’s certainly nice. But that was not what I wanted. In addition, it looks much worse on a smartphone because responsive display does not seem to work on mobiles.

I was probably unclear in my description of the error. When looking at the website via a computer, the logo is on the left and the title to the right of the logo at 100px intervals. And it looks good, but when you look at the page via a smartphone, the title ends up under the logo a little skewed to the right. I want the logo centered and the title under the logo centered when I use a mobile phone and when looking at the website via a computer I want to see the logo to the left and the title to the right of the logo at 100px intervals.
Is this possible?

Kind regards
Kent

[Author]

Posts