Breaking up phrases into separate lines (Bootstrap 4 + Mobile)

On my website, I currently have a sentence that is fully displayed on the Desktop version. However, I am looking to modify it so that it breaks into 2-3 lines when viewed on Mobile using Bootstrap-4.

For example, here is the text in question:

Our large, heavy items and Same-Day Delivery items are delivered by our store or one of our delivery partners.

I want to break this sentence into 3 lines specifically at certain words/positions for Mobile devices...

Our large, heavy items and Same-Day Delivery items
are delivered by our store
or one of our delivery partners.

What are my options? This modification could apply to either an h1 or p tag, so please provide solutions for both if they differ.

Thank you!

htmlcssbootstrap-4

Answer №1

Simply incorporate spans and then utilize a media query to ensure they render as block on mobile devices in particular.

For example...

<div id="coolDiv">
 <span>Our large, heavy items and Same-Day Delivery items <span/><span>are delivered by our store </span><span>or one of our delivery partners.</span>
</div>

CSS:

@media (max-width: 768px) {
  #coolDiv span {
    display: block;
  }
}

DEMO

This approach will be effective for various scenarios like <h1> or <p> tags. You also have the option to apply a specific class to limit this effect to your unique situation.

Answer №2

Manipulating text at this level can be quite challenging because the browser's text engine is not accessible. One approach to achieve this could involve using two tags, one for desktop display:

<h1 class="d-sm-none d-xs-none"> Our large, heavy items and Same-Day Delivery items are delivered by our store or one of our delivery partners.</h1>
<h1 class="d-none d-sm-block d-xs-block">Our large, heavy items and Same-Day Delivery items<br>
are delivered by our store<br>
or one of our delivery partners.</h1>

It's unclear if these are the correct classes, and having multiple h1 tags may not be ideal for SEO. Nonetheless, this method might serve as a workaround solution despite its limitations.

Answer №3

If you wrap each element in a div and use flexbox to manage them, they will automatically shift to the next line if the screen width is less than the content of h1 or p.

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

Can Selenium successfully scrape data from this website?

I am currently attempting to extract Hate Symbol data (including the name, symbol type, description, ideology, location, and images) from the GPAHE website using Selenium. As one of my initial steps, I am trying to set the input_element to the XPATH of the ...

javascriptpythonhtmlselenium-webdriver

What is the best way to align the text in the center without centering the numbers in an HTML ordered list?

I am currently working on a small widget for a webpage that displays steps in reverse order. My plan is to use an ol element and adjust the value attribute on each li tag to make the numbering of the ordered list reversed. Everything seems to be going smoo ...

htmlcss

Is there a way to prevent the context menu from appearing when tapping on an image on a mobile phone?

When attempting to move an image on the screen with a touch event, a popup appears in Chrome when pressing and holding the image. This popup usually includes options to save the image. Is there a way to disable this popup so I can freely move the image w ...

javascripthtmlcss

Deactivated dropdown menu options with the help of Twitter's bootstrap framework

Using markup, I have created a dropdown menu utilizing Twitter Bootstrap. <ul class="nav pull-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b>< ...

csstwitter-bootstrap

The function $.ajax may not be available, but rest assured that the jquery library is functioning properly

Upon checking the console, I noticed the following: Here is the AJAX code snippet in use: $("#accept").click(function(){ id = $("#idInput").val(); password = $("#passwordInput").val(); alert(id) alert(password) $.aja ...

jqueryhtmlajax

Can PhoneGap be used to create HTML5 applications from scratch?

Despite diligently searching through the PhoneGap website and their support group, I am still coming up empty-handed in my quest for an answer: My current project involves creating an application that functions as a pure HTML5 application, capable of runn ...

androidiphoneipadhtmlcordova

Aligning a block heading in the middle of the page

I developed a basic flex-based table. section { display: flex; flex-direction: row; align-items: stretch; width: 100%; margin: 0; background-color: green; } h2, ul { width: 50%; padding-left: 1.5em; padding-right: 1.5em; } h2 { tex ...

htmlcssflexbox

How can Angular be used for live search to provide precise search results even when the server does not return data in the expected sequence?

Currently, I am in the process of constructing a website for one of my clients. The search page on the site is designed to update search results as you type in the search bar - with each keystroke triggering a new search request. However, there's an i ...

javascriptangularjsajaxhtmlasp.net-ajax

Issues with CodeIgniter paths causing disruption to CSS background-image declaration

I've been working on a website with backend for two separate customers, each with their own unique URLs. I encountered an issue with Javascript links (ajax calls using url:) but managed to resolve it by using a global variable: var SiteURL='< ...

phpcsscodeigniter

Steps for building a Bootstrap grid of thumbnails

I need to display an unknown number of thumbs. Below is a sample of the HTML rendered: <div class="row-fluid"> <ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> &l ...

javascriptcsslayouttwitter-bootstrapweb

Looking to modify the styling of links in an unordered list?

Let me explain what I attempted to accomplish CSS: li:nth-child(2n) { background-color:gray; } HTML: <ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> ...

htmlcss

Accessing a variable outside of the function call in AngularJS is not possible

After starting to tackle AngularJS, I've encountered an issue that's been plaguing me. It seems like I'm unable to access the data returned by $http.get() outside of the method call. Here's a look at the code snippet: (function(){ ...

javascripthtmlangularjs

Retrieve the ID of the image element using Jquery from a collection of images within a div container

I'm encountering a simple issue that I can't seem to solve. I am working on a basic slider/gallery with the following functionalities: 1) "If button 1 is clicked, image one will appear." 2) "Clicking on button 2 will make IMAGE 1 slide left and I ...

javascriptjqueryhtmlcssimage

How can I remove specific items from a session array when they are selected?

I am seeking a solution that will allow me to remove a specific item from an array when that item is clicked. For example, if I click on "Two", it should disappear. See a demonstration here: CODE: <form method="post"> <input type="text" i ...

phphtmlarrayssessionunset

Tips for resizing the dimensions of two div elements to fit the screen dimensions

Take a look at this template. It's interesting how the left content div and right sidebar divs adjust themselves based on the browser window size, zoom level, or viewing device such as a mobile phone. When viewed on a mobile, only the content div is d ...

csshtml

Slider Volume with jQuery

Struggling to find a solution for this issue. Seeking some assistance. My goal is to create a basic volume slider. So, the orange section represents my volume slider. This is the jQuery code I am using: var mouseIsDown = false; $("#volSlider").on("mou ...

javascriptjqueryhtmlcss

Unable to navigate between tabs in Bootstrap 5 navigation tabs

I am currently working on developing a login page that includes two tabs - one for logging in and another for registering. The login tab displays fields for username and password, while the register tab includes fields for name, last name, and email. I h ...

htmltwitter-bootstraptabsbootstrap-5login-page

How can you locate the position of a selector within a parent or set using jQuery

Could someone please help me determine the position of the current selector within its parent using jQuery? I need this information in order to effectively use the .insertAfter() and .insertBefore() methods to rearrange elements within their nested structu ...

javascriptjqueryhtml

Tips for aligning the Bootstrap inline form in the center of the webpage

Is there a way to center align my form in such a way that the input box and button appear in the same row? I've tried the code below, but for some reason they don't display inline. Can anyone provide a code sample to help me achieve this? Your as ...

htmlcssformsbootstrap-4inline

Angular silhouette casting on CSS fold

I am attempting to recreate this design as accurately as possible, but I am struggling with replicating the shadow effect on the right side. Is it achievable using CSS? CSS: *{margin:0px;padding:0px;} html { width:100%; height:100%; te ...

htmlcsscss-shapes