Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 15, 2016 at 1:47 pm #672637
    winnieandbuzz

    I found some solutions on the forum to change the height of the bread crumbs container but I dot get the text of the breadcrumbs vertically centered. I managed once but then it was no longer vertically aligned in the mobile version.

    So, my questions are:
    1) how to set the height of the bread crumb container for the desktop version and independently for the mobile version?
    2) in both the desktop and mobile version I want the bread crumbs to be vertically centered in the container, what code/css is required for this?

    • This topic was modified 8 years, 4 months ago by winnieandbuzz.
    August 15, 2016 at 2:18 pm #672648
    Guenni007

    Well i do not recomend you to change the mobile behavior – floating left is best i think:

    try this here 

    .avia-breadcrumbs {
    display: inline-flex;
    left: 50%;
    position: absolute !important;
    right: inherit !important;
    transform: translate(-50%);
    vertical-align: middle;
}

    for mobile version you can try this:

    @media only screen and (max-width: 767px)
.responsive .title_container .breadcrumb {
    display: inline-flex;
    left: 50%;
    position: absolute;
    transform: translate(-50%);
}
}

    but best will be to know your site link to say something for your specific code

    • This reply was modified 8 years, 4 months ago by Guenni007.
    August 15, 2016 at 2:30 pm #672658
    winnieandbuzz

    Thanks. I will for now, as you advised, work on just one bread crumbs section. I tried your code but it does not set the height of the bread crumbs and horizontally centers the bread crumbs.

    What I would like to achieve is to reduce the height of the container and then vertically center the bread crumbs (and keep them right aligned in desktop and left in mobile (which is both the standard behavior)).

    August 16, 2016 at 6:31 am #673008
    Rikard

    Hi,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Thanks,
    Rikard

    August 18, 2016 at 8:39 am #674083
    Guenni007

    yes we need a link! on this test page of mine the code works well: http://webers-testseite.de/ikom/

    if you like to reduce the hight of that container:

    .title_container {
    height: 40px !important;
}

#top .title_container .container {
    min-height: 40px;
    padding-bottom: 0;
    padding-top: 0;
}
    August 19, 2016 at 8:04 am #674569
    Rikard

    Hi,

    Thanks for the input @Guenni007, much appreciated :-)

    Best regards,
    Rikard

    August 19, 2016 at 9:36 am #674603
    winnieandbuzz

    Hi,
    The website is ‘under construction’. I will get back when it is online, OK?

    August 19, 2016 at 11:51 am #674689
    Vinay

    Hi,

    Sure, we will keep this ticket open so you can write back to us when the website is ready for us to inspect.

    Best regards,
    Vinay

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