Hi – There is an alignment error for an ad that appears in the page header of my Web site piracymonitor.org
See screenshot – https://ibb.co/K0BCDK7
My header logo graphic images have the default sizes of 272×90 and 544×180. The ad graphic image has the default image size of 728×90.
When the iPad is in ‘portrait’ (vertical) view, the header graphics re-size but the header itself is taller than it should be, and the ad is forced downward so it is not in alignment with my site’s header logo.
Do I have something wrong? Or is there a work-around? Or is this an error with the Newsmag template?
Thank you
Best regards,
– Steve
Hi,
I have checked your website and I saw that you have added a custom border at your header container and that’s why, on some devices, the ad spot falling down. You need to remove it with the code below:
.td-header-container{
border:none!important;
}
Also, if you want to keep that border, you will need to add your code in the Advanced Custom CSS code section from here -> https://www.screencast.com/t/NFdEJzR6J Also, please note that when you add this border, practically you will add 1 px for both directions (left and right) and also, you will increase the width with 2px and that’s why your header will look broken.
Thank you!
Hi Catalin, If I want to keep the border around the header, can I do a work-around for the image, by reducing the size of the header image by 2px x 2px? To offset the extra 2px x 2px that the border created?
Thank you.
Hi,
Yes, that should work.
If you nee more help, or you have other questions, just let us know, we are here to help you!
Thank you!
Hi – Thanks for the reply. Reducing the size of the header ad image did not work – I tried the image as 726×88 and 724×86 – so I un-did the change. The default is 728×90.
Regardless of the size of the image, if I put a 1px border around the header, the header ad becomes mis-aligned.
I would prefer to have a 1px border on each side of the header so I can have a lighter shade of background behind the pages, but unless you can think of another work-around, it looks like that is not possible. But thanks for trying!
Hi,
If you want to have borders like this http://prntscr.com/ooeh1p then you can try this custom css
.td-header-container .td-header-header{
border-left: 1px solid #222;
border-right: 1px solid #222;
}
@media (max-width: 1023px) and (min-width: 768px){
.td-header-container .td-header-sp-logo {
width: 246px;
}
}
The code need to be set in Theme panel>Custom code>Custom css
http://prntscr.com/ooeh9s
Hope this will help you!
Thank you!
