Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 3, 2018 at 2:29 am #892674
    M1000000

    Hi Guys,
    Below 768px the page title and breadcrumbs are left aligned by default. I would like them to be centered.
    The title is easy enough using text-align – but the breadcrumbs absolute positioning seems to make centering variable width breadcrumbs impossible.
    Can you please advise?
    Many Thanks, M

    January 3, 2018 at 3:31 am #892705
    Mike

    Hey M1000000,
    Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px) { 
.breadcrumb.breadcrumbs.avia-breadcrumbs {margin-left: 10%!important; }
}

    adjust the number to suit.
    2018-01-02_202853

    Best regards,
    Mike

    January 3, 2018 at 3:36 am #892710
    M1000000

    Hi Mike,
    Applying a left margin doesn’t work to center variable length breadcrumbs – a 20 character breadcrumb with a left 40% margin may appear roughly centered but a 40 character breadcrumb with the same left margin does not (obviously).
    The solution required is something that performs the same action as text-align: center – i.e. it is not width dependent.
    Any other ideas?
    Thanks, M

    January 5, 2018 at 11:51 am #893688
    Mike

    Hi,
    Sorry, for a div inside a div the solution requires width dependent. Here is another example:

    @media only screen and (max-width: 767px) { 
.breadcrumb.breadcrumbs.avia-breadcrumbs {
 margin: 0 auto!important; 
     width: 75%!important;  }
}

    2018-01-05_044602
    Here is a good article about the subject: The complete guide to centering a div

    Best regards,
    Mike

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