What could be causing the fragmentation of my text at lower screen resolutions?

Recently, I came across this card design on my website

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
  <div class="card-body">
    <div class="container">
      <div class="row">
        <div class="col-lg-2 col-sm-3">
          <img width="150" heigth="150" class="img-fluid " src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" />
        </div>
        <div class="col-lg-10 col-sm-9 text-left pr-0">
          <span style="font-weight: lighter; font-size:22px;">USERNAME</span>

          <div class="col-lg-10 col-md-9 col-xs-5">
            <span class=" col-md-4 col-xs-4" style="font-weight: lighter; font-size:12px;">100 POSTS</span>
            <span class="col-md-5 col-xs-4" style="font-weight: lighter; font-size:12px;">100 FOLLOWERS</span>
            <span class="col-md-4 col-xs-4 " style="font-weight: lighter; font-size:12px;">100 FOLLOWING</span>
            <span class="col-md-4 col-xs-4 " style="font-weight: lighter; font-size:12px;">Phone: 100</span>
            <span class="col-md-4 col-xs-4 " style="font-weight: lighter; font-size:12px;">Email: 100</span>
          </div>
          <div class="mb-1 mt-1">
            <span style="font-weight: bold; font-size:12px;">More Text</span>
          </div>

          <div>
            <span style="font-weight: normal; font-size:12px; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie at urna id faucibus. Proin facilisis lectus ac luctus gravida. Phasellus posuere nec mauris ac hendrerit. Curabitur venenatis et augue id dignissim. Curabitur vitae nunc dignissim, ultricies lorem quis, malesuada odio. In molestie metus nec ligula finibus, sed placerat odio ornare. In eu faucibus elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum efficitur turpis eu iaculis maximus. Proin pharetra congue risus quis rhoncus.
                            </span>
          </div>

        </div>
        <div class="col-12 pr-0 mt-3">
          <button type="button" class="btn btn-primary float-right mr-2">Extract</button>
        </div>

      </div>

Initially, the design looked flawless but upon resizing the screen to a lower resolution, the text started getting cropped as depicted here

https://i.sstatic.net/45JUp.png

Is there any way to ensure that the elements align to the left and stack vertically for better visibility?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Did the results turn out the way you expected?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="card-body">
    <div class="container">
      <div class="row">
        <div class="col-lg-2">
          <img width="150" heigth="150" class="img-fluid " src="https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4.png" />
        </div>
        <div class="col-lg-10 col-sm-12 text-left pr-0">
          <span style="font-weight: lighter; font-size:22px;">USERNAME</span>

          <div class="row col-lg-10 col-md-9 col-sm-12">
            <span class=" col-md-5 col-sm-6" style="font-weight: lighter; font-size:12px;">100 POSTS</span>
            <span class="col-md-5 col-sm-6" style="font-weight: lighter; font-size:12px;">100 FOLLOWERS</span>
            <span class="col-md-4 col-sm-6 " style="font-weight: lighter; font-size:12px;">100 FOLLOWING</span>
            <span class="col-md-4 col-sm-6 " style="font-weight: lighter; font-size:12px;">Phone: 100</span>
            <span class="col-md-4 col-sm-6 " style="font-weight: lighter; font-size:12px;">Email: 100</span>
          </div>
          <div class="mb-1 mt-1">
            <span style="font-weight: bold; font-size:12px;">More Text</span>
          </div>

          <div>
            <span style="font-weight: normal; font-size:12px; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden;">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie at urna id faucibus. Proin facilisis lectus ac luctus gravida. Phasellus posuere nec mauris ac hendrerit. Curabitur venenatis et augue id dignissim. Curabitur vitae nunc dignissim, ultricies lorem quis, malesuada odio. In molestie metus nec ligula finibus, sed placerat odio ornare. In eu faucibus elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum efficitur turpis eu iaculis maximus. Proin pharetra congue risus quis rhoncus.
                            </span>
          </div>

        </div>
        <div class="col-12 pr-0 mt-3">
          <button type="button" class="btn btn-primary float-right mr-2">Extract</button>
        </div>

      </div>

Give this a try and let me know if it helps! :)

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 method for including line numbers alongside a highlighted code section in highligh.js?

I want to ensure that the text rows are aligned perfectly with the numbers in the yellow vertical bar, without causing any issues with the mouse pointer as it moves across the rows. Adjusting margin or padding also affects the position of the mouse pointer ...

javascripthtmlcssnode.jssyntax-highlighting

Guide to displaying Symfony/Bootstrap checkbox errors outside of the form_widget

Finding a solution for this issue has proven to be more challenging than expected! ...

htmlsymfonytwigbootstrap-4

Challenges faced when creating a registration form in Angular with ASP.NET WebApi using Form Builder

As I embark on my first Angular project, I find myself encountering several challenges. Currently, I am engrossed in creating a register form using Form Builder. Let me share the snippet of code I've been working on: register component: export clas ...

htmljsonvalidationasp.net-web-apiangular-formbuilder

In HTML5, the semantic tag used for indicating the "subsequent article" is

Having trouble with certain HTML5 elements. Imagine there is a blog post on one side, and a preview of the next post on the other side. Which HTML5 element would you suggest for this setup? Some might argue <nav> makes sense, while others could mak ...

htmlsemanticselement

Automatically Switch Font Colors to Red and Green

I am looking to automate the process of changing multiple textbox colors based on the class property. <input type="text" Class="ChangeColor" /> <input type="text" Class="ChangeColor" /> <input type=& ...

javascriptcss

Looks like Superfish's sf-js-enabled feature is experiencing some issues

I attempted to create a dropdown menu using Superfish, but unfortunately, it doesn't seem to be functioning as expected. I have ensured that all scripts and links are correctly directed to the appropriate js/css files. Additionally, I have implemented ...

javascripthtmlcsssuperfish

Unexpected behavior in Internet Explorer with ChartJS version 2.6.0

When using ChartJS v2.6 to create a pieChart within a Bootstrap Grid, everything appears correctly in Chrome and Firefox, but not in Internet Explorer. In IE, the chart is unintentionally stretched on larger screens. Bootstrap should handle the sizing, but ...

cssbootstrap-4chart.js

Tips for positioning divs at the bottom of the screen while making them inline and overlapping their parent div

Is there a way to make divs display at the bottom of the screen in a horizontal line, overlapping their parent div just like Facebook chat? I have attempted the following code but it doesn't seem to work. <div id="container"> <div class=" ...

htmlcss

Click on the hyperlink to adjust the background size of an inline list item

I created a navigation bar using inline display for the li elements. I want my last column to have a defined height background. However, it is only displaying a background behind the name of the column. Here is the relevant section from style.css: #navi ...

htmlcssbackgroundhref

HTML overlay with embedded Flash, wmode set to "direct"

Is there a way to overlay HTML elements on top of a flash video that must be rendered with wmode="direct"? I've attempted using an iframe to embed the video, but have been unsuccessful in placing any elements over it. Any advice or workarounds for ach ...

htmlflashvideoembedoverlay

Bootstrap - grid customization for columns (similar to row-cols-*)

Question regarding Bootstrap: Is there a straightforward method to automatically display an array of elements in columns that functions similarly to row-cols-*? Here is the current code snippet: <div className="row row-cols-3"> {arr ...

twitter-bootstrapbootstrap-4bootstrap-5

Converting an image to base64 format for storing in localStorage using Javascript

Currently, I am working on code that sets the background-image of a link. This is what I have so far: $("a.link").css("background-image", "url('images/icon.png')"); However, I want to enhance it by storing the image in localStorage: if (!local ...

javascriptjqueryhtmlbase64local-storage

What is the method for transforming the text entered by a user into uppercase using a function?

I'm currently in the process of working on a project for my introductory JavaScript and HTML course. I'm trying to create a feature that will convert text entered into a text box to all uppercase letters when a button is clicked. Here's what ...

javascripthtml

The drop-down arrow in the <select> element seems determined to stay within the container

I am currently exploring alternative solutions (without the use of JavaScript) to address a Firefox bug that prevents styling the dropdown arrow in select elements. Some sources suggest placing the select element within a container and adjusting the contai ...

cssfirefox

Dynamically using Jquery to input a Maximum Number not functioning as expected

After creating a basic Input and attempting to set the Max value using Jquery, the initial value was set to 77 and then decreased to 50. The example below demonstrates that it works! $(document).ready(function () { minMaxAge("#test-input",0, ...

javascriptjqueryhtml

Tips for utilizing a particular style from a font collection?

I am currently in the process of building my first website and I am experimenting with different fonts available on fontsquirrel. However, I am encountering an issue where I am only able to utilize certain fonts that I have downloaded from the site. One ...

htmlcssfonts

I am struggling to store a response from a request using axios in a state variable in React.js using Next.js

I'm currently tackling an issue while working with React.js. Here is the problem I am facing: import axios from "axios"; export default function Home() { const [products, setProducts] = useState([]); const ax = axios.create({ headers ...

htmlreactjsaxiosnext.jsstate

Teaching etiquette to the students of Li

I'm having trouble getting two lists to display correctly on my website. I want one main navigation list that is horizontal and another sub navigation list that is vertical. To achieve this, I need to have two different classes for the list items in m ...

htmlcsshtml-lists

Is there a more efficient approach to styling with CSS?

Here is the CSS I am currently using: .navbar-inverse .nav > li > youtube-dialog > a { color: #999999; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); padding: 10px 15px 10px; display: block; text-decoration: none; /*underline*/ } ...

htmlcss

Generate div elements with a row capacity of 3 and a column size of N

I am trying to arrange divs in a way that they can be scrolled horizontally. I have set up a flex container, but I'm unsure what other steps are needed to ensure the boxes align to the left. You can view the demo code here .container { height: 95px ...

htmlcssangularsass