seo Question posted in
Some basic information to get you started with this can be found here.

Breadcrumb overflow issue in Opencart – SEO

My product names are very long and they need to stay long.
When the breadcrumb shows the product page, if the screen is small (for example mobile view) the breadcrumb overflows the layout and it causes the browser not to show the page correctly.

I tried to add <p class="overflow-ellipsis"> and also <p class="overflow-visible">to the DIV of the product page which did not work, I tried to add text-overflow: ellipsis; and also text-overflow: visible; to the css in breadcrumb section, which also did not work, I also changed the white-space: nowrap; in breadcrumb css to white-space: normal; and it still did not fix the issue.
Here is a link to one of my pages for example, please make the screen small or see in mobile to replicate the issue.

http://www.nativeamericanwholesale.com/$80-tag-authentic-made-by-charlene-little-navajo-kingman-turquoise-wrap-bracelet

I will need the product name to stay in layout (frame) and preferably goes to second line instead of overflowing the page.
Please note that I do not want to use hidden visibility or anything to cut it out due to SEO issues.

Tags:

3

Answers


  1. 0

    Set white-space for your breadcrumbs:

    .breadcrumb > li {
    white-space: normal!important;
}

    I used !important to override any other code for .breadcrumb > li, but you should know this is not a good practice.

    Login or Signup to reply.
  2. 0

    Add this thing to your class.

    .breadcrumb li > a {
    white-space: normal;
}

    Here you need to use .breadcrumb li > a because product name inside a tag in future if will add any other tag inside then li then it will affect to everywhere so better is to used .breadcrumb li > a.

    Login or Signup to reply.
  3. 0

    I confirm white-space: normal (and white-space: break-all) isn’t enough for OpenCart’s breadcrumb issue.

    .breadcrumb>li:after{top:50%;transform:translateY(-50%) rotate( -45deg );} 
.breadcrumb>li{white-space:normal;display:table-cell;vertical-align:middle;}
.breadcrumb>li:last-child::after{display:none;}

    This will fix your issue.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search