Mobile devices experiencing text overflow problem

Question

Mobile devices experiencing text overflow problem

Experiencing trouble with the parallax effect on mobile devices, where it seems that the total body size exceeds 100vh, resulting in a visible scroll bar at the side. Changing overflow-y from auto to hidden resolves the issue but cuts out part of the page content as well. Interestingly, this problem does not occur on desktop browsers. Any assistance would be greatly appreciated.

Screenshot: https://i.sstatic.net/unhXH.jpg

.selector-for-some-widget {
  box-sizing: content-box;
}

header .carousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  background-size: cover;
}
... (omitted for brevity)

<!doctype html>
<html lang="en">

<head>
... (more HTML code follows)

html css

Answer 1

Answer №1

Check out this fantastic solution: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

https://i.sstatic.net/yxXs0.png

// To start, we calculate the viewport height and multiply it by 1% to obtain a value for a vh unit
let vh = window.innerHeight * 0.01;
// Next, we assign this value to the --vh custom property in the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

body {
  background-color: #333;
}

.module {
  height: 100vh; /* Utilize vh as a fallback for browsers that don't support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

<div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item">60%</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div>

Answer 2

Check out this fantastic solution: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

https://i.sstatic.net/yxXs0.png

// To start, we calculate the viewport height and multiply it by 1% to obtain a value for a vh unit
let vh = window.innerHeight * 0.01;
// Next, we assign this value to the --vh custom property in the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

body {
  background-color: #333;
}

.module {
  height: 100vh; /* Utilize vh as a fallback for browsers that don't support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

<div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item">60%</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div>

Answer 3

Answer №2

Solution to Fixing 100vh Issue on Mobile Devices Using Pure CSS

At times, the vh unit is utilized to create sections that match the height of the viewport. This is especially common in the construction of landing pages. In such scenarios where position sticky is not effective, consider utilizing the fill-available property as an alternative. Implementation is straightforward, ensure to include prefixes and a fall-back value:

.container {
  min-height: 100vh;            /* fall-back */
  min-height: -moz-available;
  min-height: -webkit-fill-available;
  min-height: fill-available;
}

It's a simple fix!

Answer 4

Solution to Fixing 100vh Issue on Mobile Devices Using Pure CSS

At times, the vh unit is utilized to create sections that match the height of the viewport. This is especially common in the construction of landing pages. In such scenarios where position sticky is not effective, consider utilizing the fill-available property as an alternative. Implementation is straightforward, ensure to include prefixes and a fall-back value:

.container {
  min-height: 100vh;            /* fall-back */
  min-height: -moz-available;
  min-height: -webkit-fill-available;
  min-height: fill-available;
}

It's a simple fix!

Mobile devices experiencing text overflow problem

Answer №1

Answer №2

Similar questions

SideBar does not display Bootstrap ToolTip

The locator for the span class cannot be found or interacted with in Selenium

I'm looking to replicate the testimonial slider from the link provided. How can I achieve this?

Did you stumble upon an unexpected JavaScript redirection?

Creating customized placeholders using CSS padding in HTML5

What steps do I need to take to design a menu?

Trouble aligning two columns in a row with Bootstrap 4

Utilizing nested flexboxes to create a horizontal row within a vertical column

Jquery unable to render UL or LI tags in HTML document

Gradually Generated HTML website

I need my styled component to make sure my inner div spans the entire width of its parent div

The onKeyUp event is not functioning as expected in React, unlike the onChange event

The Alchemy feature on hover is not functioning

Utilizing JavaScript and the Document Object Model (DOM) to display images within a

The performance of the animation on http://responsive-nav.com/ becomes erratic when viewed on Android devices

What causes JavaScript image to stop loading while displaying a prompt dialog?

Smooth transitions: How AJAX calls to PHP chats revolutionize page navigation

How come when I click on the edit button, the selected data's model doesn't appear in the dropdown menu as I would like it to?

Choosing a single radio button is simple with these steps

Packaging an Angular project without the need for compiling