Archived topic
how to keep site-logo aligned with content while removing site-title?
8 replies · Started by Silvio on December 3, 2018
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.
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 */
}
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?
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?
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 */
}
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
Hi there,
can you try changing -webkit-min-device-pixel-ratio from 1 to 2?
there's no difference at all
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 :)