What could be causing certain text to vanish (become invisible) when viewed on a mobile device?

How can I make sure all text is visible on a mobile device?

I need the text to display in full size when testing on a mobile device. How do I achieve this?

<html>
<head>  
    <meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" name="viewport">
</head>
<body style=" margin: 0; ">
<div style="
    width: 100%;
    height: 48px;
    text-align: center;
    overflow: hidden;
    display: block;
    position: absolute;
    background: #a5d670;
    z-index: 999;
    color: #fff;
    font-size: 20px;
    line-height: 48px;
">After clicking the submit button, FormValidation will submit the form if all the fields are valid.
</div>  
</body>
</html>

Answer №1

If you use overflow: hidden; and the viewport width is too narrow, any text that exceeds the width will simply vanish.

However, if you remove this property, the text will break into multiple lines. But since you have set height: 48px;, the text will spill out of the green background. To fix this issue, consider the following adjustment:

<div style="
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    background: #a5d670;
    z-index: 999;
    color: #fff;
    font-size: 20px;
    line-height: 48px;
">After clicking the submit button, FormValidation will submit the form if all the fields are valid.
</div>  

For the outcome, refer to this fiddle.

Answer №2

Instead of setting the height property to 48px, consider using the min-height property for better display on narrower screens. When the text wraps, a small height may not be enough to show all the content.

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

Positioning Elements with CSS Relative and Absolute Placement

I am relatively new to the world of web design and currently grappling with the concept of positioning in CSS. I have a basic understanding of relative and absolute positioning for elements. In the code snippet below, there is a <div> that acts as th ...

Guide to configuring the overflow-y property for individual cells or rows in a Bootstrap-Vue table

Hello there, I am currently using Bootstrap-vue to display data that has been queried from a database. My goal is to have it displayed with an overflow-y style similar to this image. If you know how to achieve this effect, please share your solution. Here ...

Tips for modifying the table structure while utilizing datalist

Is there a way to adjust the table layout when using datalist? The current result, as shown in Example 1, does not properly display all the data in a continuous manner due to the table layout. How can I achieve a layout similar to Example 2? I must use th ...

Align the text vertically in your HTML email

Attempting to vertically center text in a TD, I've experimented with valign: middle inline styling and vertical-align: middle within the style tags in the header. I'm puzzled as to why it's not functioning, especially since it works fine on ...

Efficiently centering content in a grid layout using automatic fit repetition for optimized responsiveness

I've implemented a responsive grid where each item has its own hidden details section that is revealed upon clicking the item. The structure of the HTML/CSS setup is as follows: <div class="grid"> <div class="item"> ...

Can bootstrap classes be transformed into pure css code?

Is it possible to translate bootstrap classes into pure CSS? For example, transforming 'class="container-sm' into regular CSS. I am curious about the CSS code associated with the "container-sm" class in bootstrap <div class="container-sm"> ...

Is there a way to increase the size of the icon without altering the dimensions of the button?

After implementing a code snippet to enable a button to copy the URL to the clipboard, I encountered an issue. Originally, the button displayed the text "copy," which changed to "copied" after clicking on it and reverted back after 2 seconds. However, I d ...

Tips for customizing the appearance of popup windows

I want to enhance the appearance of my popup window by applying a different format for opening it. How can I style it so that it looks visually appealing when the popup window opens? You can find below the source code I am working with: HTML: <div onM ...

Is there a way to position the input directly above the div in the center?

In my HTML code, I have a div container with an input and another nested div element that contains various other elements. My goal is to center the input element in relation to the parent div, where error messages are displayed. Currently, both elements s ...

How can I resize and horizontally align an image using html/css?

Is it possible to resize, crop and center an image using only HTML/CSS? (Using the img tag or CSS sprite) For instance, if I have a 500x500 pixel image, I would like to resize it to a 250x250 pixel image To make the actual visible image 100x100 pixe ...

Unending Jquery Loop Iteration

I encountered a bug while writing code to display JSON data in an HTML table. Even though I only have 25 IDs to print from the JSON, my code is printing them more than 10 times when it should run only once. I tried adding breakpoints in the code but still ...

Automatically insert a page break after every set of n items to make printing easier

When printing a web page with a list of items, sometimes the items end up appearing garbled across multiple pages. Is there a method to add a CSS class definition after a certain number of items have been added on a page? The CSS in question would be asso ...

Is there a way to incorporate a preload page in Jekyll?

I recently stumbled upon this unique preload page style on Codepen and I must admit, my knowledge of JS is quite limited. body{ display: flex; justify-content: center; align-items: center; height: 870px; background-color:#000; po ...

Modify the surrounding container of the chosen selector

I have a complex website with multiple containers. My objective is to apply a color to a container with the class "colorme" when another container, located far away from it, has the class "active". Here is how the code is structured: .tooltip:has(tool ...

How to design a custom <md-switch> with an icon in Angular Material

Is it possible to incorporate an icon into the md-switch component? I drew inspiration from a demonstration on www.inbox.google.com https://i.sstatic.net/qjw40.png Appreciate any advice or suggestions! ...

IE8 is showing incorrect portion of the CSS sprite

After researching countless issues related to sprites and IE8 online, I have encountered a common problem where sprites do not show up at all. However, in my case, the sprite is displayed but showing the incorrect piece of it. Surprisingly, it functions pe ...

CSS for Repeating Header Image

My header image is repeating at the top of the page, but it's not displaying in full width and leaving blank space on the sides. How can I fix this issue? Here's my current code: <!DOCTYPE html> <style> .bgimg{ ...

Is it just me or does my wrapper always hover above the bottom of the screen?

I have been working on coding a simple layout that I created last year. Most of the work is done, but I ran into an issue where the 'wrapper' div doesn't extend to the bottom of the page as expected. It almost looks like it has the "position ...

Adjusting jQuery Button Width with input type of "button"

Currently, I am working with jQuery Mobile to develop a straightforward Golf Score Card App. To calculate the total at the end of a form submission, I've implemented the following code. <input id="total" type="text" name="total" value="" readonly= ...

Improve loading speed of thumbnail and full images in HTML

I'm struggling with slow loading images on my blog website. Can anyone help me figure out how to improve loading speed and: Is it possible to use a separate thumbnail image that is smaller in size instead of the full image for both thumbnails and th ...