Hello,
I would like to ask you about a solution of one problem.
I have problem to make a responsive masthead in mobile phones.
In Custom CSS I have:
/* Full header logo */
header#masthead {
padding: 0 !important;
}
header#masthead hgroup {
padding: 0 !important;
}
header#masthead hgroup .logo img {
width: 1080px;
}
.main-navigation {
margin: 0 !important;
}
body.responsive header#masthead hgroup .support-text, body.responsive header#masthead hgroup #header-sidebar {
display: none !important;
}
When I try to open a website in mobile phone it dosen’t work good.
If you can please, help mi to resolve this problem.
Best regards,
Martin
Hi Martin
Try the following under Appearance > Custom CSS:
header#masthead { background-size: 100%; background-repeat: no-repeat; } @media (max-width: 680px) { header#masthead .hgroup { padding-top: 95px; padding-bottom: 0; } }It’ll remove the header widget area below 680px, I think that works best. It can be done differently if required.
Hi Andrew,
Thank you very much for an answer.
It is working very good, but I have one more question in this topic.
When I open the website on smartfon it's look like this (image below).
My question is – it is possible to reduce distance between a masthead and menu?
I would like to aks one more question. After last update to newest version of WordPress I have some problems with distanace of the box on the end of the site. If you can please write me where can I change the distance of the box to get it in the one line (grey and yellow).
Thank you very much for your help.
Best Regards,
Martin
2015-03-17 14:28 GMT+01:00 Andrew Misplon <
forum+9282-u19173-e47205c9e8a3afdaa34f8dbdb283bfd203d977f0@siteorigin.com>:
Hi Martin
Sorry, the forum unfortunately can’t attach images from emails just yet.
In the Custom CSS I sent, there is a 95px value. You could reduce that to 89px and it would cut 6px out from the masthead on mobile.
Try adding the following to Appearance > Custom CSS to help out the background image:
/* Background Image */ body.custom-background { background-repeat: no-repeat; background-size: 100%; }