Zerif-Lite -Mobile responsive-desktop responsive- header and our team

*gray box = gary

Hello,

1) Please try this CSS

@media (max-width: 767px){
.navbar-inverse .navbar-nav > li {
    background-color: rgba(35, 32, 32, 0.67);
}
.navbar-toggle.collapsed {
    background-color: #808080 !important;
    z-index: 999;
    position: absolute;
    right: 0;
}
.menu-align-center .responsive-logo {
    height: auto;
    width: auto;
}}

2) I think you have added custom social icon which is creating problem in the header.
3) Such problem is not occurring at my side. Please share screenshot of the problematic area.

Thank You.

I emailed you a response let me know if that form of communication is best for the additional issue I stated in the email. I would rather keep that part private. I will respond here for the main issues addressed in the messages above for (Zerif-Lite -Mobile responsive-desktop responsive- header and our team)

Ok so I will try what you said for the issues stated above in this message and post here so others can benefit from this topic! Thank you gouravwptech for coming to the rescue! Major kudos to you!

I love wordpress!~

(p.s I need a few hours to get back to you) as stated in email response.

Talk soon!

gouravwptech,

1.The css.code you gave me + the one I had in my custom css worked together to fix the (Mobile portrait (320×480)

Here is what I had in addition. Which when I pulled from the custom.css it changed it with your code. But when added with your code it made the mobile portrait(320×480) work out the way we are all very happy with. (big thanks)

Ok, there are still issues with

Mobile landscape (480×320)

Small tablet landscape (800×600)

Tablet portrait (768×1024)
&
Tablet landscape (1024×768)(almost perfect but

and the logos in (1024×768) because they are center stacked.. but I can probably try and figure that one out.. but I will wait for your advice because my doings may undo somewhere else…

here is the code I have in the custom css as of now.

@media screen and (max-width: 480px) {
.navbar-brand > img {
max-width: 200px;
}

@media (max-width: 767px){
.navbar-inverse .navbar-nav > li {
background-color: rgba(35, 32, 32, 0.67);
}
.navbar-toggle.collapsed {
background-color: #808080 !important;
z-index: 999;
position: absolute;
right: 0;
}
.menu-align-center .responsive-logo {
height: auto;
width: auto;
}}

@media (max-width: 992px) {
.sidebar-wrap.col-md-3.content-left-wrap {
display: inline-block;
width: 100%;
}
}

.headerright {
width:60% !important;
float: right !important;
margin:0px 0px 0px !important;
padding: 0px !important;
}

formcraft-css .fcb_form {
width: 100% !important;
}

.site-main p {
margin: 0px 0px 24px !important;
}

.headerlower {
width: 50%;
float: right !important;
margin: 0px;
padding: 0px;
}

.headerright {
width: 45%;
float: right !important;
margin: 0px 0px 0px;
padding: 0px

}

.headerright a img {
border: none;
margin: 0px;
padding: 0px;
}

postmetadata .meta-author { display: none; }

ok, Silly question but how do I upload a screen shot from my desktop to this post or topic?,

Thank you gouravwptech,

As a relatively new user it would be infinitely helpful if CSS solutions could have a more specific direction set. As an example I’d think the file reference would be a good start along with the section of the document where the additional code should be placed.

That’s just my two cents as a user – not a developer. The existing gap between the two is already large enough.

My issues with the TEAM and TESTIMONIALS seems to trace to the plugin
W3 Total Cache. Once deactivated the mobile site appears as expected.

Hello @mr.V

Please replace CSS below with the CSS previously i have provided.

@media (max-width: 1000px){
.navbar-brand > img {
    max-height: 100%;
}
.navbar-inverse .navbar-nav > li {
    background-color: rgba(35, 32, 32, 0.67);
}
.navbar-toggle.collapsed {
    background-color: #808080 !important;
    z-index: 999;
    position: absolute;
    right: 0;
}
.menu-align-center .responsive-logo {
    height: auto;
    width: auto;
}}

@teamyoga
Please search any alternate plugin for cache.

Thank you.