Sorry Andrew,
I solved the problem is that doing that could not access the web, but the problem with the header remains the same.
I will then copy the contents of the previous message bellow:
(sorry for my english, I’m Spanish and I use the google translate)
Hi, I have a problem with the header in small resolutions.
Here you can see how it is now: http://nimb.ws/7GDrWR
and this is the custom css that I have in the template:
#search-icon .searchform { width: 200px !important; }
.main-navigation ul li a {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 15px 15px;
}
#page-wrapper {
width: 1080px;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
padding-top: 0px;
}
article.post,
article.page {
border-bottom: 1px solid #bbc6e8;
margin-bottom: 40px;
padding-bottom: 40px;
zoom: 1;
}
article.post .entry-header .entry-thumbnail img,
article.page .entry-header .entry-thumbnail img {
width: 50%;
height: auto;
display: block;
padding-left: 180px;
}
article.post .entry-header h1.entry-title,
article.page .entry-header h1.entry-title {
color: #5f6366;
font-family: arial;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
line-height: 1.5em;
}
article.post .entry-header h1.entry-title a,
article.page .entry-header h1.entry-title a {
color: inherit;
text-decoration: none;
}
div.sharedaddy div.sd-block {
border-top: 25px solid ##bcc6e9;
border-top: 25px solid rgba(188,198,233,);
padding: 50px 5px 5px;
margin-top: 25px;
width: 100% !important;
}
/* Vantage Grid Layout Excerpt Height */
.vantage-grid-loop article .excerpt {
height: auto !important;
}
.vantage-grid-loop article {
width: 50%;
border-bottom: none;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: left;
margin-bottom: 30px;
padding: 0 15px;
}
header#masthead .hgroup #header-sidebar {
padding-top: 15px;
padding-bottom: 15px;
margin-left:180px;
height: 100%;
/* position: absolute; */
right: 0;
top: 0;
float: left;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-pack: center;
-ms-flex-align: center;
display: -ms-flexbox;
-moz-box-pack: center;
-moz-box-align: center;
display: -moz-box;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -webkit-box;
display: box;
box-pack: center;
box-align: center;
}
body.responsive header#masthead .hgroup .logo {
float: left;
}This is the result I want for the header: http://esserinstitut.es/wp-content/uploads/2014/10/good-header.png
Can you help?
Thanks in advance and great job with the template
Hi Espígol
It looks like there is a problem in your Custom CSS. If I remove it completely then the header on mobile displays as I would expect.
Because the tagline image has transparent space on the right it doesn’t center on mobile. I’d recommend hiding it on mobile using the below:
/* Header */ @media screen and (max-width: 480px) { body.responsive header#masthead .hgroup #header-sidebar #text-10 { display: none; } }For the overall issue I’d recommend removing all your Custom CSS and then re-adding it to find out what’s causing the header to render incorrectly.
well I suppose that I am going to learn some code one way or another..
so I copy and paste the code above in the page “homepage” with the page builder turned to the code and not the page builder page or visible and paste it there.
I am going ot put a baby picture on the site where my little blue pattern box is for you to know that I am not even a toddler yet in this stuff.
Hi Gary
The Custom CSS provided here is very specific to the thread and won’t work anywhere else. Please start a new forum thread and we’ll help out there:
Page: New Thread
Thanks