I’ve created this custom CSS to get there…
@media (max-width: 767px) {
.tdi_7 .tdb-logo-svg-wrap {
/* max-width: 26px; */
display: none !important;
}
}
@media (max-width: 767px) {
.tdi_7 .tdb-logo-text-title {
font-size: 20px !important;
display: none !important;
}
@media (max-width: 767px) {
.tdi_7 .tdb-logo-text-tagline {
font-size: 20px !important;
display: none !important;
}
}
@media (max-width: 767px) {
.tdb_header_logo .tdb-logo-text-title {
font-size: 36px;
display: none !important;
}
}
}
.tdi_7 .tdb-logo-svg-wrap+.tdb-logo-img-wrap {
display: block !important;
max-width: 60%;
}
Now I need to figure out how to add some padding underneath the header …
I’ve had a play about and it appears to be linked to the SVG setting in the header.
I edit and HIDE the SVG, but when I save it, it goes back to showing it again, while the logos are deleted.
It doesn’t matter if I clear the cache, turn mobile/AMP on or off, it is just stubbornly resetting itself and displaying the SVG logo.
Have tried some custom CSS to remove it – same result.
I think it’s the span.tdb-logo-svg-wrap and span.tdb-logo-text-wrap elements that need to be hidden. If I delete their lines from Google’s code inspector panel, the logo displays as it should do.
My knowledge of CSS is very, very small, so I cannot figure out how to make the changes stick.
Adding
{
display: none !important;
}
to the classes makes no difference.
**EDIT TO ADD**
It is something to do with the POST LOOP SETTINGS, and I can’t seem to be able to turn it off.
******
Thank you for your reply Anamaria.
I cannot select the element at all. I am not being given an option to do so.
When I hover over the other elements, they have a blue background. Nothing happens when I hover over this bit.
I am sure there is an easy answer, but I am new to this and I cannot see the solution. Thank you 🙂
