Smartphone screen cluttered with overlapping paragraphs

Question

Smartphone screen cluttered with overlapping paragraphs

I am encountering a paragraph overlap issue while using a bootstrap template, specifically on smartphones like iPhone 6 with Safari. Interestingly, the problem does not appear when testing on a browser by shrinking the window size to the minimum. On the phone, the overlap occurs after two lines.

There are no restrictions set for max height in the CSS file. Below is the snippet of CSS code for paragraphs:

.about-grid p {
    padding:0 0 0.5em 0;
    color: #333;
    font-size: 1.1em;
    line-height: 1.4em;
    font-family: 'Arimo', sans-serif;
}

You can view the complete webpage online here.

html css smartphone paragraph

Answer 1

Answer №1

Fixing this issue is actually quite straightforward:

In your style.css file, locate line 1279 where a breakpoint is defined as follows:

@media (max-width: 320px)

Additionally, on line 1391, you have a class defined like so:

.about-grid p {
    height: 50px;
    font-size: 1em;
}

The specified height of 50px is causing your text blocks to be constrained in size and resulting in overflow, leading to overlapping content. This behavior occurs not only on smaller screens but also when resizing the browser window.

To resolve the issue, simply remove the height declaration. If you require a specific height, consider creating a new class with a more precise selector.

I trust this solution proves helpful :)

Answer 2

Fixing this issue is actually quite straightforward:

In your style.css file, locate line 1279 where a breakpoint is defined as follows:

@media (max-width: 320px)

Additionally, on line 1391, you have a class defined like so:

.about-grid p {
    height: 50px;
    font-size: 1em;
}

The specified height of 50px is causing your text blocks to be constrained in size and resulting in overflow, leading to overlapping content. This behavior occurs not only on smaller screens but also when resizing the browser window.

To resolve the issue, simply remove the height declaration. If you require a specific height, consider creating a new class with a more precise selector.

I trust this solution proves helpful :)

Smartphone screen cluttered with overlapping paragraphs

Answer №1

Similar questions

Initiating a video by floating over a container

Displaying an element outside with reduced opacity using fabric js and controls placed above overlay

Question about the origin of style sheet source files [*.css?ver=]

On the same line, there are two divs with different characteristics - one dynamically changing width and the

css top navigation does not appear at the top of the webpage

Extracting Data from Input Box Using Query

Steps for implementing target='_blank' on a <Link> tag with more than just an <a> element inside

The navigation bar in Bootstrap 3.2 expands in size as you scroll past it

In IE8, the section cannot extend to full width

Arrange the header and input within a div using flexbox to achieve different alignments

What causes Safari to display a black border around resized videos?

Dynamic mouse path

Within a <div> element, there is a <span> element with a border and a specific line height. The

Having difficulty in displaying database values in HTML modal using PHP

Creating a loading mask for a section of a webpage using angularjs

The search for 'post_sharing' with parameters ('',) did not yield any results. No matching patterns were found

Creating an HTML table from a JSON string with AngularJS

Enhancing image galleries with filter options via hyperlinks

Angular 2 Dropdown Multiselect Plugin - Fully Customize Width to 100%

Using JQuery to manipulate `this`, its children, its siblings, and more