Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 15, 2022 at 2:05 pm #1348509
    babyboymik

    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,
    M

    April 17, 2022 at 3:21 pm #1348612
    Mike

    Hey 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,
    Mike

    April 17, 2022 at 9:59 pm #1348639
    babyboymik

    Hello 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,
    Mike

    April 17, 2022 at 10:18 pm #1348642
    Mike

    Hi,
    Thank you for the feedback and screenshot, but I don’t believe that you have added the custom classes to the code block elements,
    2022-04-17_003.jpg
    and I see that you still have the Element Visibility options set, please disable these.
    2022-04-17_004.jpg
    I believe this will work because if you note from your screenshot the iPad landscape width is 1366px
    2022-04-17_005.jpg
    and the above css is set to 1440px

    Best regards,
    Mike

    April 17, 2022 at 11:03 pm #1348646
    babyboymik

    Hello 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,
    M

    April 17, 2022 at 11:18 pm #1348650
    Mike

    Hi,
    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,
    Mike

    April 17, 2022 at 11:51 pm #1348653
    babyboymik

    Hello again,

    All seems to be working. Thanks again for the assistance! :)

    BR,
    Mike

    April 18, 2022 at 1:35 pm #1348686
    Mike

    Hi,
    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

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Auto-adjusting banner ads’ is closed to new replies.