Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • November 1, 2021 at 5:46 am #1327259
    hostworks

    I’ve got some strange things going on with mobile and tablet views.

    1) I’m getting extra white space on mobile pages
    extra white space on mobile
    2) Getting vertical line when burger menu is present
    Vertical white line
    3) On most subpages, the burger menu is shifting on mobile to the left on top of the logo
    Subpage in nav
    Burger menu shift
    4) Also, when the burger menu shifts to the left, the second search entry field and button disappear (Search Urantia Book)
    Urantia book search disappears
    5) between about 760 and 973 the page title is covered by header
    1119 px (good) https://snipboard.io/bGpRf3.jpg
    973 px (page title covered) https://snipboard.io/UjV7wa.jpg
    760 px (page title covered) https://snipboard.io/yVqXi4.jpg
    Thank you so much. Sorry to throw a lot at you, but some are related. Thanks.

    November 2, 2021 at 5:58 am #1327386
    Rikard

    Hey hostworks,

    1. You have this CSS in the WordPress customiser

    @media only screen and (max-width: 425px){
#header_meta {
height: 250px;!important;
}
}

    Please remove or adjust it. Also please note that you have an extra semi-colon after the pixel value, which should not be there.

    2. The screenshot is not working, and I can’t see anything like that on my end. Please provide a working screenshot, and let us know on which screen sizes you are seeing the problem

    3. This screenshot is not working either, please provide us with a working one, and link directly to a page where we can see the actual problem.

    4. Please try this in Quick CSS:

    @media only screen and (max-width: 767px) {
.av-main-nav-wrap {
    float: right !important;
}
}

    5. The first two screenshots are not working. Please post a link to where we can see this actual problem happening.

    Best regards,
    Rikard

    November 2, 2021 at 8:08 am #1327388
    hostworks

    Ok, sorry,

    1. Thanks, adjusted.
    2, Vertical white line
    3. sub page in nav – never mind this screenshot.
    Burger menu shifted to left on most sub pages
    Wait, your code you listed for # 4 fixed #3 (left shifted burger menu)
    4. Search Disappears
    5.
    760 px
    973 px
    1119 PX
    The only open ones are #2, #4 & #5

    • This reply was modified 3 years ago by hostworks. Reason: Edits. only open ones are #2, #4 & #5
    November 2, 2021 at 1:09 pm #1327451
    Rikard

    Hi,

    2. Please try this CSS:

    .avia-menu.av_menu_icon_beside {
    border-right-width: 0;
}

    4. I can’t see that field disappearing on any screen size on my end, could you let us know how to reproduce the problem please?

    5. Thanks for the screenshots. I’m still not sure on which page we can see the actual problem on though?

    Best regards,
    Rikard

    November 2, 2021 at 5:21 pm #1327498
    hostworks

    2. Thanks, that worked.
    4.I’m seeing it primarily on my on the bulk of the secondary nav items and all or the detail pages. iPhone X (portrait)
    For example:
    Urantia Book > introduction – UB – Intro – doesn’t show the field Search Urantia Book – bad screenshot
    However:
    Urantia Book > Translations – UB – Translations does show both fields Good screenshot
    Here is an example of an interior detail page, of which there are thousands sample interior page
    Example of up to 770 px on desktop – Missing Search UB (770px)
    5. 992 px (good, showing title) 992 px > good
    922 px (not showing page title) 922 px – Not showing title)
    770 px (not showing page title) 770 px (not showing page title)
    So, approx between 770 and 989, the page title and part of the search window.(essentially the height of the white space when the search boxes stack):

    • This reply was modified 3 years ago by hostworks.
    November 2, 2021 at 5:43 pm #1327503
    hostworks

    I’m sorry Rikard, one more:
    Top of page widget disappears below 770 px
    770px 770 px
    769 px 769 px

    November 3, 2021 at 7:03 am #1327576
    Rikard

    Hi,

    4. This CSS is causing that to happen:

    @media only screen and (max-width: 768px) {
#truthbook-search {
    visibility: visible;
    height: 0px;
    display: none;
}
}

    It’s coming from the file in private.

    5. Please try this CSS:

    @media only screen and (max-width: 875px) {
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 350px;
}
}

    Best regards,
    Rikard

    November 3, 2021 at 8:05 pm #1327685
    hostworks

    Rikard,

    4. that file is not in use now. I commented out that code regardless and it didn’t make any difference.
    5. Thanks, but that code didn’t do anything either.

    November 4, 2021 at 6:38 am #1327725
    Rikard

    Hi,

    4. It is applying, you can check that if you inspect the element in your browser. I can’t see the element disappearing anymore though.

    5. Try this instead:

    @media only screen and (max-width: 875px) {
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 350px !important;
}
}

    Best regards,
    Rikard

    November 4, 2021 at 8:26 am #1327740
    hostworks

    4. ok, I had to remove the following as well. This is now good.

    @media only screen and (max-width: 768px) {
    #google-search {
    visibility: hidden;
    height: 0px;
    display: none;
    }
    }

    5. Now, I’m getting this header spacing

    Also, did you see this one:
    6. Top of page widget disappears below 770 px
    770px 770 px
    769 px 769 px

    November 5, 2021 at 5:47 am #1327860
    Rikard

    Hi,

    5. This is what I see on my end: https://snipboard.io/GS7APr.jpg. Please check again.

    6. Try this CSS as well:

    @media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
    display: block;
}
}

    Best regards,
    Rikard

    November 5, 2021 at 6:01 am #1327861
    hostworks

    Rikard,

    5. look at it in phone width (portrait). it still looks like above.
    6. I had to throw an !important; on it, but it works now, thanks.

    November 5, 2021 at 6:27 am #1327864
    hostworks

    5. occurs from 769 and below.

    November 5, 2021 at 3:54 pm #1327951
    Rikard

    Hi,

    5. Remove the previous code, then try this:

    @media only screen and (min-width: 768px) and (max-width: 875px) {
  .title_container {
        margin-top: 151px;
  }
}

    Best regards,
    Rikard

    November 11, 2021 at 8:16 am #1328620
    hostworks

    Rikard,

    This final item # 5 is still not working, but I spotted the condition that is causing the issue.

    Look at the white header on the top. When the window is minimized between

    760 px

    973 px

    The two search bars and the social icons get jumbled up.

    1119 px Works

    You can watch it happen when you maximize, then slowly drag it smaller.

    Sorry to be a pain.

    November 11, 2021 at 12:22 pm #1328648
    Rikard

    Hi,

    This code seems to be causing that to happen:

    @media only screen and (min-width: 781px) and (max-width: 1179px) {
#header_meta {
    margin-top: 40px;
}
}

    Please try to remove or modify it.

    Best regards,
    Rikard

    November 19, 2021 at 5:49 am #1329608
    hostworks

    Rikard,

    Sorry, just getting back to this.
    This code didn’t work.
    Not sure what to do at this point. You’ve been great to work through all of my issues so far,
    Here’s where I’m at. The upper white menu changes when you minimize the window. Here’s the breakpoints:
    887px breadcrumbs and page title re-appear with lots of space between breadcrumbs and page title (notice the big gap between the breadcrumbs and the start of the page title)
    https://tbwp.hostworks.com/wp-content/uploads/2021/11/887.jpg
    903px starts double stacking and starts to push the banner down
    https://tbwp.hostworks.com/wp-content/uploads/2021/11/903.jpg
    977px social media icons drop to two lines
    https://tbwp.hostworks.com/wp-content/uploads/2021/11/977.jpg
    988px starts to move header down
    https://tbwp.hostworks.com/wp-content/uploads/2021/11/988.jpg
    Additionally
    1213 double burger appears
    https://tbwp.hostworks.com/wp-content/uploads/2021/11/1213.jpg
    1203 double burger goes away
    https://tbwp.hostworks.com/wp-content/uploads/2021/11/1203.jpg

    November 19, 2021 at 11:48 am #1329652
    Rikard

    Hi,

    Thanks for the update. I looked at fixing your problems with CSS, but it looks like it’s going to take a very long to fix all these small problems. Maybe it would be a better idea to hide the elements which you have added into the phone info field, and inject them before the body tag for tablet and mobile instead? Another option would be to add them in a widget in the header: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

    Best regards,
    Rikard

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.