Opencart struggles with breadcrumb overflow glitch

My product names are quite lengthy and must remain that way. When the breadcrumb displays on the product page, it overflows the layout on small screens like mobile view, causing the browser to display the page incorrectly.

I have attempted adding 

<p class="overflow-ellipsis">
and 
<p class="overflow-visible">
to the DIV of the product page without success. I also tried applying text-overflow: ellipsis; and text-overflow: visible; in the breadcrumb section's CSS, as well as changing white-space: nowrap; to white-space: normal;, but none of these solutions fixed the issue. You can view an example page with this problem here; please resize the screen or view on mobile to see the issue:

It is essential for the product name to remain within the layout frame and ideally wrap onto a second line instead of overflowing the page. Note that I do not want to hide or truncate the text due to SEO concerns.

css

Answer №1

Adjust the white-space property to style your breadcrumbs:

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

I utilized !important in order to override any existing styles applied to .breadcrumb > li, however, it's important to note that this practice is generally discouraged.

Answer №2

Confirming that simply using white-space: normal (or white-space: break-all) does not completely resolve the breadcrumb problem in OpenCart.

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

The solution provided will effectively address this issue.

Answer №3

Include this element in your CSS stylesheet.

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

It is recommended to use .breadcrumb li > a because if additional tags are inserted inside the li element related to product names, it may have unintended consequences. Therefore, using .breadcrumb li > a is a safer option.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When text is inserted into an inline-block div, it causes the div to shift downwards in

Consider the following HTML code snippet: <div class="one"> Test </div> <div class="two"> </div> <div class="three"> </div> If we apply the following CSS styles: div { display:inline-block; height:30px; ...

htmlcss

CSS positioning causing a performance bottleneck

Does utilizing a large amount of absolute and fixed positioning in my HTML app lead to performance degradation? Looking for insights from experienced HTML professionals. ...

htmlcssperformance

What is the best way to assign a unique ID to every element in this situation?

Here is the given code: var words = ['ac', 'bd', 'bf', 'uy', 'ca']; document.getElementById("wordTable").innerHTML = arr2tbl(2); function arr2tbl(ncols) { return words.reduce((a, c, i) => { ...

javascripthtmlcss

The div's coloring extends beyond the margins

My page is set at a width of 970px. Everything looks good, with the paragraph aligned within the margin. However, when I try to apply color, it extends outside the margin. <div class="container"> <header> <nav c ...

htmlcsstwitter-bootstrap-3margin

Placing a Div wrapper around the contents of two corresponding elements

I am currently attempting to wrap a div with the class name 'wrapped' around two other divs containing innerHTML of 'one' and 'two'. <div class='blk'>one</div> <div class='blk'>two</di ...

javascriptjqueryhtmlcss

Discovering the precise breakpoint in the Bootstrap grid system is essential

I have incorporated bootstrap into my home page layout with a main content column occupying 9 units and a sidebar column taking up 3 units. Within the sidebar, I have set the div element to have a position of fixed. When viewed on smaller screens, Bootstra ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using HTML and CSS to create a display-table for laying out a form

Working on a dynamic HTML/CSS layout that simplifies the process by using classes like form, row, cell label, and cell input to control elements (width, alignment, etc.). I decided to utilize display: table along with its child elements table-row and tabl ...

htmlcssforms

Implementing event handling with .On() in Jquery following .Off()

I need assistance with my responsive navigation bar. I am having trouble with the jQuery code to disable hover events if the width is less than or equal to 768px and enable it for desktop screens. $(window).on('load resize', function (e) { v ...

javascriptjquerycssunbind

Is it possible to adjust the JavaScript slider effect to transition to a fade effect when the window width drops below 800 pixels?

Is there a way to make my JavaScript slider change its effect from normal to fade when the browser window is less than 800px wide? Any assistance would be greatly appreciated. <ul class="slider"> <li><img src="images/1" alt=" ...

javascriptjqueryhtmlcssdevice-width

What's the best way to show floating point numbers in a concise format while also maintaining the ability to perform calculations within this Vue app?

I'm currently developing a compact calculator application using Vue 3 and implementing some custom CSS. For the most part, everything seems to be functioning correctly, except for when the results are long numbers that extend beyond the display limit ...

javascriptcssvue.jscalculatorvuejs3

How can the color of the wishlist icon be modified in Reactjs when the item is available in the database?

Is there a way to change the color of the wishlist icon based on whether the item is in the database? If the item is present, its color should be brown, and if it's not present, the color should be black. Additionally, I want the ability to toggle be ...

javascriptcssreactjs

Is there a way to automatically refresh the page and empty the input fields after clicking the submit button on the contact form?

My knowledge of PHP and js is limited, so I may require additional guidance in incorporating those codes. Lately, I've been developing a contact form and making good progress. However, I'm struggling with figuring out how to refresh the page or ...

javascriptphphtmlcss

The front end button stubbornly refuses to comply and redirect to another page

I am having trouble getting my button element to redirect my page to another page. I have tried using an onclick function inside the button tag with window.location.href, as well as creating a separate function for the redirect, but nothing seems to be wor ...

javascripthtmlcssbutton

Ensure that the Bootstrap 4 navbar remains fixed at the top of the page while maintaining

Currently, the only method I have found to maintain a transparent navbar is by setting it to fixed-top like this: <nav class="navbar fixed-top navbar-inverse"> <!-- more html --> </nav> This can be seen here. I am looking for a way ...

csstwitter-bootstrapangularbootstrap-4

Uniform Fixed Width for Material UI Table Cells

Below is a Material UI Table with columns set to a fixed size of 205px each, and the table itself set to 100% width. However, when there isn't enough space available, the columns do not shrink according to the text inside them, remaining stuck at 205p ...

javascripthtmlcssreactjsmaterial-ui

Radio buttons in 'Block Style' functioning perfectly on all devices except for iPad

I am facing an issue with a group of radio buttons that I have styled to display as block elements, making them look like buttons while hiding the actual radio button itself. This setup works perfectly on Chrome and Firefox on desktops and Android tablets, ...

htmliosipadcss

The art of uploading images with HTML and CSS

Looking for guidance on how to convert this image bubble so that users can upload their images during account creation. When the user hovers over the image bubble, it should display "Upload profile image" and prompt them to upload an image upon clicking. A ...

htmlcssimage

Adjusting the spacing of the first letter using CSS, leave room

I'm encountering issues with the alignment of titles and text using the 'Lato' Google font. It seems like there is a space or kerning issue on the first letter causing them not to align properly to the left. Any suggestions on how to fix thi ...

htmlcssfontswebfonts

Utilize drag and drop functionality to interact with an HTML object element

I am struggling with a div that contains a PDF object and draggable text: <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drop(ev) { alert("DROP"); } </script> </head> <body> <di ...

javascripthtmlcss

What is the best way to set breakpoints on Material UI components?

Currently, I am exploring material-ui and I'm curious if there is a way to set all breakpoints at once. The code snippet below seems quite repetitive. Is there a more efficient method to achieve this? <Grid xs={12} sm={12} md={12} lg={12} xl={12} ...

cssreactjsmaterial-ui