I am trying to get a larger header and a smaller ad space (400 x 80) similar to my current site.
http://www.screencast.com/t/KHAOcM7K
I also like the way that the header currently sits just above the navigation bar.
I have attempted to change the CSS and have gotten the header and ads close to what I want on a desktop, but it does not look right on a landscape tablet.
.td-header-style-1 .td-header-sp-logo {
width: 560px;
margin-left: auto;
margin-right: auto;
}
.td-header-sp-recs {
width: 410px;
margin-left: auto;
margin-right: auto;
}
http://www.screencast.com/t/EYYaWfSRneHZ
What do I need to change to get the header and ad to stay on the same level and not drop below each other on a tablet?
http://www.screencast.com/t/RHoHHIHvI
If there is not a way to keep them on the same level, is there a way to center them?
Is there a way to center the top ad on the mobile version, too?
http://www.screencast.com/t/mNQqebRb
Hello hcnsupport,
For your first request, you can adjust the width of both element (logo+ads) but you should be careful because the width it changes according to the device used and there will not be responsive. To achieve this, are required more customization.
I recommend you to use the second option. You can use the header_style_10 with some customization in properly file, like this -> http://screencast.com/t/hbieYxNHNJ3 -> http://screencast.com/t/7SwsdnqL and then you have the banner ad centered under your logo, like this -> http://screencast.com/t/aJrMC5yQt
Hope this helps and let us know how it goes!
Thank you for the message!
Catalin
Thanks for the suggestion. I changed the custom CSS to
.td-header-style-1 .td-header-sp-logo {
width: 50%;
float:left;
margin-left: auto;
margin-right: auto;
}
.td-header-sp-recs {
width: 50%;
float:right;
margin-left: auto;
margin-right: auto;
}
And it appears to be working like I want. I may tweak the tablet portrait so that the image is not as small for it. But it showing the ads on the same level like I want.
What is the best way to make the gap smaller between the header and the navigation menu bar?
Thanks,
Rick
Hello hcnsupport,
Please provide your website because I need to work directly on this to fix your problem. I cannot recreate exactly the same layout on my side and because of this, I need him.
Thank you for your understanding!
Catalin,
I have it working pretty well now. I am working on a test site at txcraigs.com. My main site that I am going to switch to Newspaper is hcnews.com.
This is the custom css I am using. It might not be the best way to do it, but it is working. There is a difference between Chrome and Firefox browsers in that there is no space between the banner ad and the nav bar in Firefox (Mac) and there is a gap (which I want) in Chrome. But that is not a big deal.
.td-header-style-1 .td-header-sp-logo {
width: 50%;
float:left;
margin: 28px 0px 0px -50px;
}
.td-header-sp-recs {
width: 50%;
float:right;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 767px) {
.td-header-sp-recs {
width: 100% !important;
margin-left: auto;
margin-right: auto;
}
}
Thanks for a great theme and outstanding support.
Rick
Hello hcnsupport,
I’ve checked your website and I saw the difference. You should try the code below and place it in Theme panel->Advence CSS area->Ipad Portrait section, like this -> http://screencast.com/t/Up6y4wbG and see how it works.
@-moz-document url-prefix() {
.td-header-sp-recs img, .td-header-sp-recs .adsbygoogle {
top: -5px;
}
}
Hope this helps and let us know how it goes!
Thank you for the message!
You da Man…
Works like a champ. I appreciate all the support.
Rick
Hello hcnsupport,
Glad that I could help!
Thank you for the message!
