Tagged: 

Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • April 12, 2022 at 11:08 am #1348075
    babyboymik

    Hello there

    I have tested my website through various devices with different resolutions and different modes.

    1. The first issue I detected is landscape mode mainly on android devices. When switched to landscape, the right sidebar appears and some content is cut off. I have the option in settings turned on where for mobile devices, sidebars are switched off. In portrait mode, the sidebar does not appear. But when switched to landscape, it appears and nothing auto-adjusts. The thing is I want the mobile version on android and iPhone to be without sidebars, both landscape and portrait modes. I have attached a screenshot with the landscape mode in private content.

    2. I have tested my website on other resolutions where the logo, menu, etc. overlap on certain resolutions. I have attached images of these devices in private content.

    My extra coding consists of the following incase there is something in there that needs a minor change:

    #scroll-top-link, #av-cookie-consent-badge {
    color: #000000;
    background: #f6971a;
    border: 2px solid #000000;
    }
    @media only screen and (max-width: 479px) {
    .responsive #top .logo img {
    max-height: 100px !important;
    }
    }
    .cmc_global_data ul li .global_d_lbl {
    font-weight: 600;
    font-size: 90%;
    background: transparent;
    color: #00000;
    border: transparent;
    margin-right: 0px;
    }
    .cmc_global_data ul li .global_data {
    font-size: 11px;
    white-space: nowrap;
    display: inline-block;
    }
    @media only screen and (max-width: 767px) {
    #header_meta {
    display: none;
    }
    }
    h1 {
    font-weight: bold;
    color: #000000;
    font-size: 24px;
    }
    h2 {
    font-weight: bold;
    color: #fff;
    font-size: 18px;
    }
    .slide-meta {
    display: none!important;
    }

    #top #wrap_all .avia-post-nav {
    background: rgb(246 151 26 / 72%);
    height: 150px;
    }
    .avia-post-nav:hover .entry-info-wrap {
    width: 300px;
    }
    .avia-post-nav .entry-info {
    width: 275px;
    height: 120px;
    }

    Let me know as soon as possible how to fix these issues :)

    • This topic was modified 2 years, 8 months ago by babyboymik.
    April 12, 2022 at 2:32 pm #1348106
    Rikard

    Hey babyboymik,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 1120px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

@media only screen and (max-width: 767px) {
.logo img {
    max-height: 80px;
}
}

    Best regards,
    Rikard

    April 12, 2022 at 5:45 pm #1348137
    babyboymik

    Hello Rikard

    Thanks for the coding but I don’t see any changes. I added the coding, cleared the cache, and tested and I get the same. If I run a test on these devices I get the same result, as well as landscape mode on Android still having a sidebar. Any other solutions?

    I contacted someone about this and told me that the theme is not responsive at every pixel and told me might need 500 lines to fix site at every pixel lol. I’m not an expert, I just asked to get a second opinion on what is going on with certain devices not responding properly to the px.

    Anyways, hope that is not the case as he said. I will wait for your response! :)

    April 12, 2022 at 6:58 pm #1348151
    Rikard

    Hi,

    Thanks for the update. The resources on your site are served from a CDN, could you turn that off temporarily so that we can see if the CSS is being added or not please?

    Best regards,
    Rikard

    • This reply was modified 2 years, 8 months ago by Rikard.
    April 12, 2022 at 9:07 pm #1348157
    babyboymik

    Hello again,

    Ok i switched it off…

    April 13, 2022 at 11:20 am #1348206
    Rikard

    Hi,

    Thanks for that. I’m still seeing the resources being served via a CDN though, please see example in private. I’m not sure how to turn that off, but you might be able to if you reach out to your hosting provider. If you should need further help, then please include admin WordPress login details in private.

    Best regards,
    Rikard

    April 13, 2022 at 12:48 pm #1348228
    babyboymik

    Hello,

    I am not sure what that is but most likely from a plugin WP-Optimize. I disabled CDN through hosting though.

    I’ve sent you temporary access through a link in private…

    April 13, 2022 at 1:30 pm #1348242
    Rikard

    Hi,

    Thanks for that. I cleared the cache and minfication from your plugins, and the CSS is applying now. Please review your site.

    Best regards,
    Rikard

    April 13, 2022 at 2:32 pm #1348251
    babyboymik

    Hi again,

    Thanks for that, but I tested landscape on android devices and still get a sidebar…it hasn’t fixed. I cleared cache from browser also and checked on a couple different browsers. Check also if you have a samsung s21 s22 or similar. I’ve checked with a couple.

    I haven’t tested the other issues with the other screen resolutions.

    April 13, 2022 at 4:52 pm #1348264
    Rikard

    Hi,

    On which screen sizes do you want to remove the sidebar?

    Best regards,
    Rikard

    April 13, 2022 at 5:29 pm #1348281
    babyboymik

    Hi,

    On all mobile devices (including portrait and landscape mode) and tablets….

    KR,
    M*

    April 13, 2022 at 6:44 pm #1348291
    Rikard

    Hi,

    Thanks for the clarification. Please try this CSS as well:

    @media only screen and (max-width: 1024px) {
.sidebar {
    display: none; 
}

main.template-page {
    width: 100%;
    border: none;
}
}

    Best regards,
    Rikard

    April 13, 2022 at 6:56 pm #1348295
    babyboymik

    Hello,

    Thanks for the coding again but I still get the same result…
    I clear the cache and tried again but nothing changed…

    April 14, 2022 at 11:33 am #1348346
    Rikard

    Hi,

    I’ve adjusted the CSS for you, and it’s applying now. Please review your site.

    Best regards,
    Rikard

    April 14, 2022 at 12:00 pm #1348353
    babyboymik

    Hi,

    I’ve tested it and now there is more issues. Now the burger menu on mobile doesnt open/work when you click the three lines on top right, the blog slider on top of home page doesnt work and still landscape mode shows sidebar…

    April 14, 2022 at 12:17 pm #1348361
    babyboymik

    Also, search doesnt work now…

    April 14, 2022 at 3:37 pm #1348409
    Rikard

    Hi,

    The burger menu and search works fine on my end, how can we reproduce what you are seeing on your end? Also, the CSS I gave you applied to all screen sizes 1024 pixels wide and below, are any of your devices wider than that? If so, then you can simply adjust the media query.

    Best regards,
    Rikard

    April 14, 2022 at 4:01 pm #1348421
    babyboymik

    Hello,

    I’ve attached a link in private of a video showing slide not working on mobile device as well as menu not working and search bar not popping up after the previous changes made with coding.

    I am using a s22 plus so not sure what dimensions are but when switched to landscape mode, sidebar still appears. I will screenrecord what I get on android devices in next post.

    April 14, 2022 at 4:03 pm #1348422
    babyboymik

    Here is the other screenrecord in private link

    April 15, 2022 at 10:54 am #1348489
    Rikard

    Hi,

    Thanks for that. I see that it’s working on some pages, but not on others. It’s not working on the home and the news page for example, but it is working on search result pages. Please try removing all customisations, then add them back one by one, to see which one is causing this problem. We haven’t given you any CSS which would only apply on some pages.

    Best regards,
    Rikard

    April 15, 2022 at 12:59 pm #1348503
    babyboymik

    Hello Rikard

    Thank you for that. I had to figure out what the issue was and found it was because there was minify on CSS processing and was causing this issue for some reason after you had put the new coding with the search and menu. The screen on landscape mode now works on android as well as the search and menu. Thank you very much! :)

    KR,
    M

    April 16, 2022 at 12:15 pm #1348540
    Rikard

    Hi,

    Great, I’m glad that you found the problem, and thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    April 17, 2022 at 11:15 pm #1348649
    babyboymik

    Hi,

    You can close this topic :)

    Thanks again.

    BR,
    Mike

    April 17, 2022 at 11:27 pm #1348652
    Mike

    Hi,
    Glad to hear that you have this sorted out, 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 24 posts - 1 through 24 (of 24 total)
  • The topic ‘Various resolutions on certain devices not auto-adjusting (overlap or cutoff)’ is closed to new replies.