How to Adjust Overlapping Text in CSS?

Currently, I am facing an issue with an element overlapping in my CSS file. On a regular browser, one line of text appears fine but on mobile devices, it overlaps into two lines. This problem is specifically for the mobile version of the website, particularly the @media section for landscape tablets.

The header (h2) text is overlapping on iPad/tablet screens. Below is the code snippet from the h2 @media section:

.da-slide h2{
    font-size: 36px;
    width: 80%;
    top: 40px;
    padding: 18px 20px 18px 20px;

(The .da-slide h2 is the component containing this text in the HTML)

I have attempted to use the line-height property to fix this issue, but unfortunately, it did not work as expected. Any suggestions or ideas to resolve this problem would be greatly appreciated!

htmlcssmobiletwitter-bootstraptablet

Answer №1

Have you confirmed that the line-height CSS property has been applied to your class?

CSS 

    .da-slide h2{
        font-size: 36px;
        line-height: 36px;
        width: 80%;
        top: 40px;
        padding: 18px 20px 18px 20px;
    }

If not, have you included the meta tag in the header?

<meta name="viewport" content="width=device-width, initial-scale=1">

Additionally, for a responsive website, ensure that the text isn't being adjusted:

CSS

body { -webkit-text-size-adjust: none; }

Answer №2

To prevent text wrapping and cut off any text that exceeds the width, you can add the following CSS to your existing class:

display: block; /* prevents text wrapping and displays it inline */
white-space: nowrap; /* ensures no wrapping */
overflow: hidden; /* hides text if it escapes visible area */

If you prefer, you can use the ellipsis effect for long titles on tablet devices. This will trim the text and add three dots where it has been trimmed.

text-overflow: ellipsis; /* adds three dots at end of long text */

For example:

This is an extremely long and completely unavoidable page title I need to show

Depending on the width, it might display as:

This is an extremely long...

I hope this explanation is helpful.

Answer №3

click here for image description

If you are experiencing this issue, it can be resolved by adjusting the CSS property line-height to your desired value (*line-height).

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

A CSS selector that can target a neighboring element with the identical class

How can I use a CSS selector to highlight the last adjacent elements with the same class? In the example code below, the first three and last two elements share the same class. However, I am looking to specifically highlight Two, Threee and Six, Seven. & ...

csscss-selectors

JavaScript - Retrieving the variable's name

Whenever I invoke a function in JavaScript with a variable, like this: CheckFunction(MyVariable); CheckFucntion(MyVariable2); Suppose I have a function that checks if the input is a number: function CheckFunction(SOURCE){ //THE CODE ITSELF }; I want to ...

javascripthtmlvariables

The primary tab's background color in a Shiny app

I had this question deleted previously while I was in the process of refining it. Is there a way to customize the background color of the active tab in a Shiny app? library(shiny) ui <- fluidPage( tags$head( tags$style(HTML(css)) ), tabsetP ...

htmlcssrshiny

javascript highchart image carousel

I am currently working on a visual chart project using the JavaScript library highchart. After setting up my chart with some dummy data, I am looking to incorporate functionality that allows for triggering an image slide based on the chart data. Specific ...

javascriptjqueryhtmlcsshighcharts

JavaScript function failing to validate password

While engaging in an online game where the objective is to uncover a password by inspecting the page source or element, I encountered a puzzling line: if(el.value == ""+CodeCode+""). My assumption is that el.value represents my guess, and it indicates that ...

javascripthtmlsrc

Implement a single CSS menu across various HTML pages

I'm currently working on developing a website. All of my pages have a common menu bar that I would like to include from a separate HTML file. Is there a way to include HTML files in order to address this concern? If so, what is the syntax for imple ...

htmlcss

Trigger event once item is selected from the jQuery combobox dropdown

I have implemented a custom autocomplete combobox using the jQuery UI library to create text fields with dropdown functionality. This hybrid input allows users to either select an item from the dropdown or enter free text manually. However, I need to trigg ...

javascriptjqueryhtmlformsjquery-ui

The functionality of z-index is unreliable when article elements are utilized

Essentially, my goal is to display the <article id="characters"> above the <article id="accordion">. However, despite my efforts, the characters article appears below the accordion article instead of on top or even behind it. Where did I go wr ...

htmlcssz-index

The width of the menubar dynamically adjusts upon mouse hover using CSS

I encountered a problem with my menu and submenu. When I hover over the list elements in the main menu, the width of the menu items changes abruptly which looks confusing. I tried fixing the width, but then there is too much space between the menu items. ...

css

Platform designed to simplify integration of high-definition imagery and scalable vector illustrations on websites

In the ever-evolving world of technology, some clients support advanced features like svg while others do not. With the rise of high resolution devices such as iPhone 4+ and iPad 3rd gen., it has become crucial to deliver graphics that can meet these stand ...

javascriptjqueryhtmlcss

Want smooth transitions between pages?

I need assistance with implementing swipe navigation for my app. Unfortunately, the code I currently have appears to be faulty. This is only my second attempt at creating an app and any guidance would be greatly appreciated. I am having difficulty sharing ...

jqueryiosmobilenavigationswipe

What is the method for specifying a JSON object within a DOM element's `data` attribute?

In an attempt to store JSON data within a dataset attribute, I encountered the following HTML structure: The appearance of the HTML is as follows <div data-switch="true" data-json="{'key1': 'value 1'}, {'key2': 'valu ...

javascriptjqueryhtmljson

What is the best method for eliminating tiny spaces between images that are aligned horizontally?

Check out this link for more details: . I am looking to eliminate the slim vertical gaps between the images in html5 without resorting to using the table cellpadding="0" cellspacing="0". Any ideas on how to achieve this? ...

csshtmlimage

Can CSS stylesheets be set up to automatically load based on the browser being used to access the website?

I am inquiring because I recently completed a beautiful homepage design and, after viewing the website on Chrome and Safari on OSX, I noticed that certain elements were broken when I opened it in Firefox. In addition, an issue I was experiencing with the ...

csshtmlcross-browserstylesheet

What is the best way to align the menu to the center

Hey there, I'm trying to center a dropdown menu in a 970px wide div. No matter what I do, I can't seem to get it to work correctly. <div id="menuwrapper"> <ul class="menu" id="menu"> <li><a href="#" >Home</ ...

htmlcssmenu

Mastering the Art of Manipulating Z-Index Stacking Context in CSS Using Transforms

I'm struggling to position the red square on top of the table. After reading articles about Z-index Stacking Context and browsing through this stack overflow page about overriding CSS Z-Index Stacking Context, I still can't seem to figure it out. ...

htmlcss

The input field cannot be accessed via touch on mobile devices

<div class="form-group row pswrd" style="padding: 0px 10px"> <div id="email" class="col-md-12 col-xs-12"> <input type="password" class="form-control c_fname" id="c" #pswd name="password" placeholder="password" [(ngModel)]="user.passwor ...

htmlcssangular

Having trouble with the <img> tag on CodeSandbox.io? Image not loading properly

I've been attempting to insert an image using the <img> tag on CodeSandbox.io. However, each time I try to do so, it fails to display and defaults to the alt tag (Shows Mountain). The goal is to load an image from the same folder as the file th ...

htmlcssreactjscodesandbox

Table header containing the weekdays for a jQuery calendar display

I need some assistance in creating a basic monthly calendar using a table. Check out this demo: www.jsfiddle.net/pzdw0s2n/1/ ...

javascriptjqueryhtmlcalendar

Linkify Method appearing in html.erb file displaying with HTML on the view

Apologies if this question seems basic, but I am encountering an issue when calling the following method on the @page instance variable. The view is displaying HTML tags instead of the desired content... module PagesHelper def linkify_page page rege ...

htmlruby-on-railserblinkify