How can I create more space on a responsive webpage when minimizing the screen using CSS?

On this particular html page,

 <div class="mySlides" *ngIf="index == currentIndex">
      <div *ngIf="hr">
      <div class="slide-container slide-half" data-aos="fade-down" [innerHTML]="slide.titres.contenu | safeHtml"></div>
      <div class="slide-container slide-half text-white" data-aos="fade-down" [innerHTML]="slide.paragraphes.titre | safeHtml"> </div>
      </div>
      <div  *ngIf="!hr">
        <div class="slide-container slide-half" [innerHTML]="slide.titres.contenu | safeHtml"></div>
        <div class="slide-container slide-half text-white" [innerHTML]="slide.paragraphes.titre | safeHtml"> </div>
        </div>
      <p [innerHTML]="slide.paragraphes.body | safeHtml"></p>         
    </div>

Everything is functioning correctly on desktop, but in responsive mode (such as iphone X) the first line appears divided into two lines and they are too close together. How can I add space between these lines?

Appreciate any help!

htmlcss

Answer №1

Remember to include the line-height property in your CSS code, such as "line-height: Xpx".

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
   Lorem Ipsum has been the industry's standard dummy<p>

p {
   line-height: 30px;
}

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

Tips on relocating a button in a column located within a table header

Is there a way to adjust the positioning of the buttons in a thead to align with a colored border below it? <table> <thead> <!-- table extra buttons --> <tr style="border-bottom-style: solid; border-bottom-color: #FFE84D; ...

htmlbootstrap-4

Obtaining the referring URL after being redirected from one webpage to another

I have multiple pages redirecting to dev.php using a PHP header. I am curious about the source of the redirection. <?php header(Location: dev.php); ?> I attempted to use <?php print "You entered using a link on ".$_SERVER["HTTP_REFERER"]; ?> ...

phpjavascripthtml

HTML5 Websocket communication lag when using node.js

Hello everyone, thank you for taking the time to read this. I am currently utilizing NodeJS with the WS module on the server side and HTML5 WebSocket API in Firefox on the client side. The operating system being used is Windows 7 64 bit. I have encountered ...

javascripthtmlnode.jswebsocket

What is the correct way to utilize href in CSS content property?

Below is the content of a box I have: https://i.sstatic.net/QmG5i.png When the above box is hovered over, it flips to this: https://i.sstatic.net/QsS9t.png This block's HTML code is as follows: <div class='tiles'> <div class= ...

javascriptjqueryhtmlcsshref

Choose a personalized option from a dropdown menu using Selenium and Python

I am currently attempting to programmatically choose an option from a dropdown menu using Python and Selenium. The dropdown contains various values ranging from 1 to 11. Users are expected to interact with the dropdown, select a value between 1 and 11, and ...

pythonhtmlseleniumdrop-down-menudropdown

Comparing `height: calc(100vh);` to `height: 100vh;` in CSS can reveal a few

Currently tackling a project where the previous developer utilized: .main-sidebar { height: calc(100vh); } Unfortunately, I can no longer reach out to them, and I am curious about the variance (if any) between the two approaches. (Am I in the approp ...

htmlcssuser-interfacecross-browser

Embed JavaScript code from an ASP.NET webpage into an HTML page on a separate domain

Is it possible to inject JavaScript code from an asp.net page into an HTML page on a different domain, such as http://www.codeproject.com/? How can I achieve this injection from my application? I am currently developing a plugin similar to Pinterest. When ...

c#javascriptjqueryhtmlasp.net

I am struggling to link my JS application with a PHP file as it is showing "PHP file not found

I am facing an issue with my JS application. I am unable to send data from jQuery to a PHP file, as I encountered this error message: POST https://magazyn.rob-tech.pl/savesettings.php 404 The app is running on PORT=8080 npm run start and the package.json ...

javascriptphphtmljquerynpm

Tips for positioning bootstrap dropdowns side by side in a row

I'm having trouble aligning my li items in a Bootstrap dropdown next to each other. I've tried everything but nothing seems to work. Here's my code: <nav class="navbar navbar-expand-lg navbar-light bg-light"> < ...

htmlcssbootstrap-5

Guide to creating a navigation bar that expands when you expand navigation items

My portfolio website features a handful of navigation items for various views. I simply copied the default navigation code from the Bootstrap site. However, when I expand the "hamburger" menu, the navigation remains the same size, causing the expanded item ...

htmljquerycssbootstrap-4navbar

Modifying the Header Background Color

Looking for help on my forum at The header background on my site needs fixing. I am trying to change the entire header background to match the color of the logo background, but I'm unsure what codes need to be adjusted. Can anyone provide guidance? ...

htmlcss

Steps to remove a child node and retrieve the parent element

My jQuery skills are not the best and I could really use some help. Here's the situation: I have an HTML table structured like this : <table id="table"> <tr><td><img class="image" />test</td><td></td></tr& ...

javascriptjqueryhtml

Implementing a feature that ensures html elements are transparent in a PDF conversion

I am in the process of converting a webpage into a format that is easily printable as a PDF, while ensuring that it maintains the same appearance. Many tools for printing to PDF do not support background images or colors, so I am attempting to overcome thi ...

htmlcsspdfpdf-generation

Template is unable to locate form data within the view

Having gone through the django tutorial and attempted various form-handling methods in django, I'm at a loss as it doesn't function as desired. Despite extensive research - searching on Google and StackOverflow - I simply cannot get it to work. P ...

htmldjangoforms

Arrangement of Div Box

Here is the HTML code that I am currently working with: <div class="item"> <div class="pageheader"> Header </div> <div class="info"> Created on... </div> <div class="image"> I ...

htmlcssposition

Styling elements with CSS can sometimes lead to unexpected behavior in Safari on iOS devices, especially

Ever since the release of iOS 14, I've noticed that content within a div element with an 'overflow-y: scroll' property no longer functions properly on Safari. Does anyone happen to have a solution for this? (Or maybe my code just needs some ...

htmlcssiossafari

Trigger Click event when clicking on navigation link using the ID

Currently, I am working with a WordPress theme that includes a page with 10 tabs that open individually. My approach so far has been to provide links to all tabs in the navigation bar. For instance, href="mylink.com/#tabid" It works perfectly when the p ...

jqueryhtmlwordpress

What is the best way to create a new row at a specific index in an ng-repeat loop?

My Goal: I am aiming to insert a new row of ul after every 2 elements in my ng-repeat loop. For example: <ul class="col-sm-2"> <li><p>Automobile & Motorcycle</p></li> ...

javascripthtmlangularjs

Generate a table framework by dynamically adjusting the number of rows and columns

I'm running into an issue with my implementation of nested for-loops to dynamically generate a table using JavaScript. For this particular scenario, let's assume numRows = 2 and numCols = 6. This is the code snippet in question: let table = $( ...

javascriptjqueryhtml

Stop horizontal overflow of content

This unique Vuetify demo on CodePen showcases a two-column layout. The first column contains a <v-list> enclosed in a green <v-alert>. By clicking the "toggle text" button, you can switch the title of the first list item between short and long ...

cssvue.jsvuetify.js