Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #892674

    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


    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.

    Best regards,


    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


    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;  }

    Here is a good article about the subject: The complete guide to centering a div

    Best regards,

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