Layers overlap in smaller views

Here's the ultrabig screen - everything is fine - the header and the logo: https://yadi.sk/i/qmtjJgQqfbcEv
But the smaller screen makes these two (logo and the header) overlap: https://yadi.sk/i/yVTzODsffbcYf
Needs to be fixed.

Could you please post an url to your site?

Could you please post an url to your site?

Oh, sorry, it's http://v-boge.org

What will you say if I suggest to reduce logo size on small screens?

What will you say if I suggest to reduce logo size on small screens?

I will say that it's not a fix, but a workaround. Moreover that, this screen shows it ain't gonna help: https://yadi.sk/i/_x5GueqOfbzdz It just has to somehow handle the layering differently - the whole text has to flow around the logo spot. Now the text goes from side to side leaving no place for logo whatsoever...

The text is placed exactly at the center without affecting the flow of other elements. That's why I have suggested to reduce logo size as it is the easiest method. The layout works fine with original - small - quark pseudologo.

Hi

I was asked to join discussion.

There is really not much place for the logo now. I would suggest a different change. Please add this code to css and let me know if You like it.

Code: Select all

@media only screen and (max-width:821px) {
#gkHeader #gkLogo {
position: relative;
margin-top: 0 !important;
}

.dark-bg #gkMobileMenu i, .dark-bg #gkMobileMenu i::after, .dark-bg #gkMobileMenu i::before {
    background: none repeat scroll 0 0 #222 !important;
}
}


Hi

I was asked to join discussion.

There is really not much place for the logo now. I would suggest a different change. Please add this code to css and let me know if You like it.

Yeah, it's alot betteer. Needs some play around, will do it when have more time later. https://yadi.sk/i/Hw87aSgafdWaF

Thank you both of you for helping out!

Hi

It doesn't look right on Your screen. Here is how it's like on my device and this is what I was aiming for.

Hi

It doesn't look right on Your screen. Here is how it's like on my device and this is what I was aiming for.

The Home page looks like that for me too, but any page down - looks different. Like this: https://yadi.sk/i/sIrbeooeffx5p

Hi

Ok. I see now. Here is couple of additional classes.

Code: Select all

@media only screen and (max-width:821px) {
#gkHeader #gkLogo {
position: relative;
margin-top: 0 !important;
}

.dark-bg #gkMobileMenu i, .dark-bg #gkMobileMenu i::after, .dark-bg #gkMobileMenu i::before {
    background: none repeat scroll 0 0 #222 !important;
}

#gkPageContent {
    padding-top: 0;
}

.single-page, .blog-page {
    margin-top: 0 !important;
}

.single-page > .header, .blog-page > .header {
    margin: 0;
}
}


Here is couple of additional classes

Yeah, now it's much better. But one more thing needs to be fixed - in tablet.css "padding 100px" now makes it look like this: https://yadi.sk/i/q0eUegZIfjnyJ if I rem it, will that be ok? Or I should do something different? https://yadi.sk/i/a5Ak_nqNfjoJe This one on FireBug seems to fix it...

Hi

Screens stopped showing. I always see "Nothing found" message, but I'm also checking it with firebug to come up with solution, so if You have found the way of fixing it than it has to be fine. Just copy this class into the part we've made already in override.css just to separate the changes.

Code: Select all

@media only screen and (max-width:821px) {
YOUR CODE HERE
}