Make sure the text is divided into two lines using CSS styling

I am encountering a CSS issue that seems quite simple. I have a text displayed below: "Big ideas. Lasting value."

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

On mobile devices, I need to display this text on two lines. Despite trying various solutions, none of them have been successful.

This is the HTML code snippet:

<div class="home_firstrow" id="panel-one">
    <div>
        <h3> Big Ideas. Lasting Value.</h3>
        <div class="container"> 
        </div>  
    </div> 
</div>

I attempted setting the white-space property to normal for the h3 element and even adjusting the height and min-height attributes, but unfortunately, none of these solutions worked. Do you have any suggestions on what else I could try? The challenge is to only display the text in two lines in mobile view using CSS. Thank you!

htmlcss

Answer №1

If you want to enhance your website, consider using a popular CSS framework! However, you can also achieve the desired effect using the following CSS code. Control it with @media (max-width:..)

   h3 {
    width:100%;
    }
    h3 span {
    float:left;
    width:50%;
    }
    /*for mobile view, make each span full width*/
    @media (max-width: 500px) {
     h3 span {
       width:100%;
       background:red;
     }
    }
 <h3><span>Big Ideas.</span><span>Lasting Value.</span></h3>

Answer №2

You made an error in spelling heigth.

The correct spelling is height, not heigth.

Therefore, please use height instead of heigth.

Answer №3

Here's a suggestion for you to try out:

If you are using a fixed width, make sure to implement a media query in your CSS.

h3{
    width:120px;
}
<div class="home_firstrow" id="panel-one">
    <div>
        <h3> Big Ideas. Lasting Value.</h3>
        <div class="container"> 
        </div>  
    </div> 
</div>

Answer №4

To style your webpage for portrait orientation, implement the following code: 

@media screen and (orientation:portrait) { … }
.

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

Placing a document.write statement inside the load function of a fresh Dashcode template prevents the generation of the remaining JavaScript code

I've been working on a new custom safari template using dashcode ("This template creates a blank web application, ready for customizing."). In the process, I noticed that it automatically generates a function called load in main.js that is then called ...

javascripthtmldashcode

Unable to assign the second value of the <input type="datetime-local" /> element to zero

I am currently working on a class called ClosedPlatform that has an attribute called Start, which is of type DateTime. public class ClosedPlatform { public DateTime Start; } My goal is to bind the Start attribute of a ClosedPlatform instance to a d ...

htmldatetimedata-bindingblazor

Obtain the final output of a specific class utilizing jQuery

My HTML table structure is as follows: <tbody id="letter-list"> <?php $index = 0; foreach($letters as $letter) { $index++; ?> <tr id="letter-<?php echo $index; ?>"> <td><?php echo $l ...

phpjqueryhtml

The functionality of the code in a stack snippet may differ from that in a standalone HTML file

My code works perfectly on a stack snippet, but when I insert it into my server or an .html file, the refresh button shrinks! I have copied and pasted the code exactly as it is. Are there any specific snippet features that need to be added for it to work, ...

javascriptjqueryhtmljquery-bootgrid

How can I adjust the size of posts on the Tumblr Official Theme?

The size of posts on the Tumblr Official Theme caught my attention recently. It seems they are set at 500px, causing photos posted on the blog at the original dash post size of 540px to be compressed. I've examined the coding for the theme but can&apo ...

htmlcsstumblr

Formatting a specific portion of the content within the placeholder

I need to adjust the CSS style for a specific part of a placeholder, not the entire placeholder text. For example, if my placeholder text is: "Where (example: New York)" <label>Search:</label> <textarea placeholder="Where (example: New Yor ...

csshtmlplaceholder

Utilize the CSS ~ selector to target the first child element

I have a scenario where I want to apply CSS to the first child only if a second or other child exists in the parent. The '~' selector can achieve this, but it applies the style to siblings of the first child, and I need it the other way around. ...

csscss-selectors

Modifying the color of a non-active tab - Material UI Tabs

Is there a way to customize the color of inactive tabs in Material UI tabs? I have noticed that they currently appear black, as shown in the screenshot here: screenshot Thank you! ...

javascripthtmlcssreactjsmaterial-ui

Create an interactive webpage that automatically generates new HTML elements after retrieving JSON data from a Web API during page load

I am currently in the process of developing a hybrid Android App using Phonegap/Apache Cordova. The main function of my app is to retrieve data from my web API, which is being served through JSON. I have implemented the following code snippet for this task ...

javascripthtmljsoncordova

"Experience the mesmerizing transition effects of Angular Bootstrap tabs as they gracefully glide in

I am currently working on implementing an animated slide effect when switching between tabs on a webpage. However, I have encountered some difficulties as the animation only seems to work partially. My approach involves using animate.css with the expectat ...

cssangularjstwitter-bootstrapanimation

Having difficulty achieving the desired style with columns and four divs per column as the styling is not coming together as expected

I am currently having trouble displaying these articles vertically (stacked on top of each other) with 4 divs per column in the main section. I am unable to make them the same size or have all of them display the articles stacked one on top of the other. S ...

javascripthtmlcssangularbootstrap-4

Achieving a Transparent Flash overlay on a website without hindering its usability (attention, interaction, form submissions, etc.)

Currently, we are attempting to overlay a transparent flash on top of an iframe which loads external websites. Is there a method to configure the page in a way that allows the transparent flash to be displayed while still allowing interaction with the und ...

javascriptcssflashiframe

Reconfiguring the order of rows in a responsive email table设计邮件。

Developing a newsletter layout can be challenging, especially when trying to incorporate responsiveness based on Mailchimp guidelines. One common issue that arises is the desire to have the second image appear before the corresponding text, particularly in ...

htmlcsshtml-tablehtml-emailmailchimp

What is the best way to activate a function to control animation transitions?

My goal is to manually control transitions in my HTML using JavaScript code, such as a tween library like TweenMax. Instead of relying on CSS for transitions with classes like .ng-enter, I want to target a JavaScript function: function onEnter() { /* tra ...

javascripthtmlangularjsanimationtween

Sliding Text Effect using JQuery

I am looking to create a text animation that slides in from the left. The text should include three fields: Sports Cargo Bag, $14, and Sale $25. I want to achieve this effect using jQuery, similar to the animation in this example. Here is my current code ...

javascriptjquerycsshtmljquery-ui

Step by step guide to creating individual counter sections

I have set up a counter section where the numbers go from 0 to a specific value. However, currently all three counters start counting simultaneously. Is there a way for the first counter to count up first, then once it's done, move on to the second c ...

javascripthtmlcssbootstrap-4bootstrap-5

Steps for Removing Multiple CSS Styles from an Element's Style:

When my application generates inline styles, I sometimes need to remove the height, width, and max-width styles from certain elements. I have identified the element using this code: const elems = window.$('.myElements'); window.$.each(elems ...

javascriptjquerycss

How can I modify the Twitter Bootstrap carousel's background?

Is there a way to customize the background of Twitter Bootstrap 3 carousel? I am looking for a solution where I can have a plain red background and then overlay each carousel image on top of it. I have tried modifying the CSS of the <body> tag to a ...

csstwitter-bootstrap

What is the best way to ensure that my text is perfectly centered both horizontally and vertically within this DIV?

What's the best way to vertically and horizontally center text? Here is an example code that needs to be centered: <div style="display: block; height: 25px;"> <span id="ctl_txt" style="background-color: rgb(255, 0, 0);"> Basic ...

css

Issues with padding and margin not displaying correctly at different screen sizes

I'm currently utilizing tailwindCSS and am facing an issue with adjusting the size of buttons based on screen sizes. I want the buttons to appear small with minimal vertical padding on desktop screens, and bigger with increased vertical padding on mob ...

csslaravelvue.jstailwind-css