Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 7, 2018 at 11:52 am #909047
    sdturnbull

    Hi,

    The breadcrumb section of a site I’m developing partially ‘hides’ at certain resolutions.

    If you visit the private link I’ve provided, you will see that the breadcrumb shows fine, but as you make your browser smaller, just before the tablet view with hamburger menu kicks in, the breadcrumb seems to get pushed up?

    The only addition CSS I’ve added is to do with the iframe on the booking page, but this is only a few lines with a unique class.

    By default, my Samsung Tab Pro 12″ shows the resolution that affects the breadcrumb when in portrait mode, so I’m sure there are other devices which will render the page like this.

    Thanks,
    Steve

    February 7, 2018 at 1:41 pm #909125
    Mike

    Hey sdturnbull,
    I tested your breadcrumbs on the url in the Private Content area, and created this code for you to add to the General Styling > Quick CSS field:

    @media only screen and (min-width: 768px) and (max-width: 988px) { 
.title_container .breadcrumb {
    margin-top: 10px!important; 
}

    Please clear any cache plugin and your browser cache and check.

    Best regards,
    Mike

    February 7, 2018 at 3:53 pm #909229
    sdturnbull

    Thanks, Mike.

    I added the CSS and this has worked to a degree. An issue that remains is that at the point where the breadcrumb used to disappear (they now show, after adding your code) it goes very narrow.

    If you visit the private link below then adjust the browser window narrower, you will see that when the hamburger menu kicks in, the breadcrumb applies a shorter container hight. If you continue to narrow the window, it soon gets taller. It’s as though there are some misconfigured breakpoints, somewhere?

    Also added a link to some screens with Deve Tools open and css selectors highlighted

    February 7, 2018 at 4:18 pm #909245
    sdturnbull

    Hi again,

    If you look at the Evernote link from above, I added three more screenshots. You will see a page that as I shrink it down, when the breadcrumb issue occurs, the body font also gets weighted heavier and as I continue to shrink the browser window to represent a mobile, the breadcrumb work as expected and the fonts also go back to normal weight.

    ??

    Steve

    February 8, 2018 at 1:06 am #909481
    Mike

    Hi,
    Good point, it looks as though there is some conflicting css, Can you please include a admin login in the private content area so we can take a closer look.

    Best regards,
    Mike

    February 8, 2018 at 10:54 am #909677
    sdturnbull
    This reply has been marked as private.
    February 8, 2018 at 12:00 pm #909714
    Mike

    Hi,
    I added this css to your General Styling > Quick CSS field:

    @media only screen and (min-width: 768px) and  (max-width: 988px){
  .responsive.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main {
      padding-top: 120px!important; 
  }
}

    which seems to solve, please clear your browser cache and check.

    Best regards,
    Mike

    February 8, 2018 at 12:34 pm #909725
    sdturnbull

    Hi Mike,

    Yes, this does indeed seem to have resolved the issue. Thank you!

    It also seems to have cured the strange issue with the font becoming enlarged in the main page copy – do you know why that might be, or did you alter an Enfold setting?

    Is this likely to be a change that could cause a conflict with core Enfold updates in the future (I’m using a child theme)?

    Thanks again,
    Steve

    February 8, 2018 at 12:52 pm #909733
    Mike

    Hi,
    Glad we could help,
    I only added the css, there should be no future conflicts, but if someday the title bar and breadcrumbs seem a little off, simply try removing the css from the General Styling > Quick CSS field.
    Shall we close this then?

    Best regards,
    Mike

    February 8, 2018 at 2:07 pm #909767
    sdturnbull

    Yes, I think this can now be marked as closed.

    Thanks for the help and for getting back to me quickly.

    Steve

    February 8, 2018 at 2:28 pm #909775
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Breadcrumb section doesn't display at certain resolutions’ is closed to new replies.