Words are cut off in a random manner on the entry content list for phone users

I struggle with CSS and have a basic understanding to make adjustments to my website.

The issue I am encountering involves the .entry-content ul li elements. On desktop, they display correctly without random word breaks, but on mobile, words are being cut off at any character - for example, "supernatural" appears as "supernatura" on one line and then "l" on the next line.

I am feeling overwhelmed and unsure of how to resolve this. I attempted the code they suggested

.entry-content ul li{
   word-break: break-all;
   max-width: 420px;
}

However, it caused issues on my desktop version, which was already experiencing random word breaks, and did not fix the problem on mobile, so I had to remove it altogether.

Thank you

css

Answer №1

In the past, there was a 'break-word' value for word-break that has been deprecated. Instead of using word-break, consider replacing it with 'overflow-wrap: break-word' to resolve any issues you may be encountering.

Answer №2

I'm not sure where you got that code from, but it seems like it might cause some issues and may not work on all devices. It looks like you're experiencing problems with text overlapping in the genre tags. You could try using the following code instead, and I'll continue to adjust my response until we get it right:

.entry-content ul li{
   white-space: nowrap;
   max-width: unset;
   overflow: unset;
   width: auto;
}

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

What is the best way to merge two AngularJS form validation directives criteria using CSS?

When both $dirty and $invalid are true, I would like the input fields to have a red background. However, I am only able to do this one by one, which is not ideal. input.ng-dirty && input.ng-invalid { background-color: red; } ...

htmlcssangularjs

Issue with iOS iframe scrolling - unable to scroll as expected

On iOS devices like the iPad and iPhone 6, scrolling doesn't seem to work as intended. Instead of the iframe scrolling, it's the 'body' that is moving. Javascript $(document).on(clickHandler, '#content a', function(){ href ...

javascriptjqueryhtmlcssiframe

Enhancing 2D video viewing with Threejs interactivity

I want to create an interactive 2D video using three.js and maintain the aspect ratio of the video when resizing the browser window. Here is the code I am currently using: var camera, scene, renderer; var texture_placeholder, distance = 500; init() ...

javascriptcssvideothree.js

displaying and concealing elements with jquery

Is there a way to hide a div if the screen size exceeds 700px, and only show it when the screen size is less than 700px? Below is the jQuery code I'm attempting to use: jQuery(document).ready(function() { if ((screen.width>701)) { $(" ...

javascriptjquerycss

Prevent the cascading of CSS styles on child list items

When constructing my menu, I have organized it using the following HTML structure: <div id=”navigation”> <ul> <li class=”level1”>Top Level Menu item <div class=”sublevel”> <ul> ...

jqueryhtmlcss

Correcting W3C validation issues is essential

I am encountering errors in my W3C validation process. Even though I have set <!DOCTYPE HTML> for my page, I continue to experience issues as shown in the image below. I have been trying to troubleshoot and resolve these errors without much success ...

javascripthtmlcssw3cw3c-validation

Remove the right margin on the bootstrap container

I am currently working on creating dashboards using the Python library called Dash, and I have encountered an issue with Bootstrap components. Specifically, I am unable to remove the right margin from the container. I have tried using class_name='m-0& ...

pythoncsstwitter-bootstrapplotly-dashbootstrap-5

Revamp the md-select Container

Hello there! I'm looking for a stylish way to revamp the design of the md-select Window. Specifically, I aim to customize the background and hover effects. Despite my attempts to modify the .md-select-menu-container in CSS, it proved unsuccessful. I ...

cssangularjsangular-material

Burger menu floating above container block element

I have set up a bootstrap container with the following styling: .container { margin-top: 12em; font-family: 'Amatic SC', cursive; border-bottom: 1px solid; border-color: #800000; } The purpose behind this is to have my navigatio ...

csscss-float

Modifying the appearance of select components in React MUI using CSS

Can someone help me modify the appearance of the react material UI select component to match this design: https://i.sstatic.net/EhcWR.png https://i.sstatic.net/L2te2.png I have already applied the following CSS styling: const styles = { width:&apos ...

cssreactjsmaterial-ui

The website functions properly with Live Server, but encounters issues when launched from the Files directory

After testing multiple browsers, the site consistently works fine with Live Server. However, when accessed through Firefox or Chrome, my style.css fails to load completely. On Edge, an error message indicates that the file is missing. Below are snippets of ...

htmlcssfilebootstrap-5liveserver

Scrolling horizontally with scrollbar functionality

My goal is to create a webpage with a horizontally scrollable DIV element in the center, where the scrollbar appears only at the bottom of the DIV, not at the bottom of the entire page. I am wondering if it is possible to have a scrollbar placed at the ve ...

csscss-positionhorizontal-scrolling

Tips for positioning bootstrap dropdowns side by side in a row

I'm having trouble aligning my li items in a Bootstrap dropdown next to each other. I've tried everything but nothing seems to work. Here's my code: <nav class="navbar navbar-expand-lg navbar-light bg-light"> < ...

htmlcssbootstrap-5

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

So I'm encountering an issue with this unique ts code: {/* Mobile Menu */} <div className="lg:hidden"> <button className="flex items-center w-8" onClick={toggleMenu}> {isMobileMenuOpen ? ( ...

cssreactjstypescriptcss-animations

Issue resolved: Mysterious fix found for background images not displaying in NextJS React components

I am having trouble displaying a background image on an element in NextJs using Typescript and Tailwind. I do not believe it is a TypeScript issue since I am not receiving any errors or IntelliSense warnings. Below is the code I am working with: var classn ...

cssreactjstypescriptnext.jstailwind-css

When I try to hover my mouse over the element for the first time, the style.cursor of 'hand' is not functioning as expected

Just delving into the world of programming, I recently attempted to change the cursor style to hand during the onmouseover event. Oddly enough, upon the initial page load, the border style changed as intended but the cursor style remained unaffected. It wa ...

javascripthtmlcss

The issue with the CSS background gradient is that it fails to completely cover the entire

Despite attempting several solutions recommended in similar questions, I am still unable to resolve the issue. Using the CSS background gradient generator at Ultimate CSS, I found that the gradient only extends halfway down the page on www.ncentertain.com ...

cssbackgroundgradient

The HTML/CSS authentication system is experiencing technical difficulties and is not functioning as intended

I came across this code on codepen.io and tried to implement it using the provided HTML and CSS. However, I encountered some errors during implementation. While the code works perfectly in the CodePen compiler, it doesn't seem to be error-free. One i ...

htmlcss

I'm trying to create a horizontal list using ng-repeat but something isn't quite right. Can anyone help me figure out

Feeling a bit lost after staring at this code for what seems like an eternity. I'm trying to create a horizontal list of 2 image thumbnails within a modal using Angular's ng-repeat. Here's the HTML snippet: <div class="modal-body"> ...

javascripthtmlcssangularjsangularjs-ng-repeat

What Causes mat-bottom-sheet-container to Overflow Instead of Remaining Anchored at the Bottom of the Mobile Screen?

I am encountering an issue with a popup window in my Angular app. Despite testing it on various screen resolutions using Chrome's DevTools Screencast, the popup appears correctly styled and positioned on mobile devices. However, when tested on a real ...

androidcssangularangular-material