![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: overlap
-
AuthorPosts
-
April 15, 2022 at 2:05 pm #1348509
Hello,
I don’t have a service for ads yet. I created my own ads where I added a code block and in advance settings, for certain screens, I just apply one banner to respond to small screens and another to large screens. However, due to the layout of the theme, the large width banner ad (728×90) on landscape mode of certain tablets activates as it is detected as a large screen and might overlap the sidebar which also activates on landscape mode on larger tablets (I recently turned off a sidebar for tablets and mobile phones on landscape mode but I guess this screen size is slightly different). I’ve attached a screenshot of this in private.
Also, I would like to know if I will have this issue with other ads, or will they adjust accordingly with ad services? Or maybe if there’s no coding if there is a plugin?
Note: the device in the screenshot is a Galaxy Tab S4 with these specs:
Viewport: 1134×712
Screen Size: 10.5″
Monitor size: 15.4″Thanks in advanced:)
KR,
MApril 17, 2022 at 3:21 pm #1348612Hey babyboymik,
Thank you for your patience and the screenshot and the link to your site, to solve your issue with tablet landscape I recommend using a custom class for your banners and custom css with orientation media queries to be more precise than the theme display options. These custom classes could be used for all of your banners sitewide.
For example, mobile-banner & desktop-banner
and an example of media queries would be like this:@media only screen and (max-width: 767px) and (orientation: portrait) { .mobile-banner { display: block; } .desktop-banner { display: none; } } @media only screen and (max-width: 767px) and (orientation: landscape) { .mobile-banner { display: none; } .desktop-banner { display: block; } }
But I believe with your large banner if you are going to display your sidebar the minimum width should be 1440px, like this:
@media only screen and (max-width: 1439px) { .mobile-banner { display: block; } .desktop-banner { display: none; } } @media only screen and (min-width: 1440px) { .mobile-banner { display: none; } .desktop-banner { display: block; } }
with this setup you should not need to use orientation because there are no tablet that trigger 1440px at landscape, they trigger 1366px.
Give this a try and let us know if it helps.Best regards,
MikeApril 17, 2022 at 9:59 pm #1348639Hello Mike
Thanks for the response. I tried adding the second set of coding you recommended:
@media only screen and (max-width: 1439px) {
.mobile-banner {
display: block;
}
.desktop-banner {
display: none;
}
}
@media only screen and (min-width: 1440px) {
.mobile-banner {
display: none;
}
.desktop-banner {
display: block;
}
}However, I still get the 728×90 banner overlapping when it’s on the Ipad Pro landscape mode, the sidebar is triggered and there isn’t enough space. I tried to switch off the setting on the code block for this coding to apply and also while the settings were ticked in each code block but still get it to trigger on a device and the overlapping. I added a screenshot in private.
For example, to make it more clear, on my home page at the top (and other pages), I have one code block for mobile/tablet ads and one code block for desktop ads. Am I doing something wrong and this code isn’t working?
BR,
MikeApril 17, 2022 at 10:18 pm #1348642Hi,
Thank you for the feedback and screenshot, but I don’t believe that you have added the custom classes to the code block elements,
and I see that you still have the Element Visibility options set, please disable these.
I believe this will work because if you note from your screenshot the iPad landscape width is 1366px
and the above css is set to 1440pxBest regards,
MikeApril 17, 2022 at 11:03 pm #1348646Hello again,
Thanks for that. Ok so I add custom classes (mobile-banner & desktop-banner) to each code block and in enfold>general styling in quick CSS, I add the above codes? one of the two? correct?
BR,
MApril 17, 2022 at 11:18 pm #1348650Hi,
Please try this css in your Quick CSS:@media only screen and (max-width: 1439px) { .mobile-banner { display: block; } .desktop-banner { display: none; } } @media only screen and (min-width: 1440px) { .mobile-banner { display: none; } .desktop-banner { display: block; } }
After applying the css, please clear your browser cache and check.
Best regards,
MikeApril 17, 2022 at 11:51 pm #1348653Hello again,
All seems to be working. Thanks again for the assistance! :)
BR,
MikeApril 18, 2022 at 1:35 pm #1348686Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Auto-adjusting banner ads’ is closed to new replies.