[Support request] how to keep site-logo aligned with content while removing site-title?

[Silvio]

I am trying to keeping site logo aligned with the content while removing site title and description. I find out how to keep it aligned in both desktop and mobile, but I cannot target tablet.

could you help with that?

(id supersilvio pwd v1v3r3I!)

I even find that docs about site title and logo lack something to understand how they work. or at least it could be a little better explained how to play with padding and margin to keep things aligned.

[Tom]

Hi there,

Can you double-check your URL? It’s not loading for me.

Are you using CSS to adjust things? If so, you can target tablets like this:

@media (max-width: 1024px) and (min-width: 769px) {
    /* tablet CSS in here */
}

[Silvio]

url updated.

I tried to add some css in the customizer, but it didn’t work. Maybe do I need to check on the iPad for or can I trust the WP customizer?

[Silvio]

inside the wordpress customizer and in safari iPad view in portrait mode, when I go to the tablet view, it use the rule max-width:768px

the same rule works good when it comes to landscape mode

how can I target the portrait orientation?

[Tom]

You can target portrait mode on iPad like this:

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    / * CSS in here */
}

[Silvio]

for I don’t know what reason, in the iPad portrait mode the website gets the style setup for mobile.

I have this code and it doesn’t work nor on the wp customizer nor on the safari responsive design view, nor on my iPad Air 2

.site-logo {
	float:left;
padding-left: 40px;
}

@media (max-width: 768px) {
	.site-logo{
		padding-left:0;
	}
	.inside-header {
		padding-left:10px;
	}
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
	.inside-header {
		padding-left:30px;
	}
}

both site title and description are hidden

[David]

Hi there,

can you try changing -webkit-min-device-pixel-ratio from 1 to 2?

[Silvio]

there’s no difference at all

[Tom]

Let’s try this:

1. Set your header to “Contained” in Customize > Layout > Header.
2. Remove your padding-left CSS.

That should technically align your logo by default.

Let me know 🙂

[Author]

Posts