Glitch with the minimum height of the Div Container

Hey there, I'm facing a bit of an issue here: I currently have the CSS property min-height set to 230px because the text inside the div requires this height. However, on the iPhone, it appears that another height is needed, around 320px. My initial thought was to use height:auto so that it dynamically adjusts to fit the text, but unfortunately, it's not working as expected. You can find the website at . Please take a look at the content located below "Über Sterntaufe Deutschland" in the 4 text boxes.

csshtml

Answer №1

If you want to reset the min-height, simply avoid setting the height property. It's best to either reset or not specify the min-height itself.

Additionally, consider using display: inline-block for each item in order to align them vertically without the need to set a specific height. Here is an example:

UL.services {font-size: 0; }

UL.services > LI {
    display: inline-block;
    font-size: 14px;
    width: 50%;
    vertical-align: top;
}

HTML:

<ul class="services">
    <li>
        <h3>30 Days Return Policy</h3>
        <p>We only baptize highly visible stars!</p>
    </li>

    <li>
        <h3>Fast Shipping</h3>
        <p>Thanks to our extensive experience.</p>
    </li>

    <li>
        <h3>The Star Registry</h3>
        <p>We are partners with the Star Registry.</p>
    </li>

    <li>
        <h3>Here For You</h3>
        <p>Should you choose to purchase a star from us.</p>
    </li>
</ul>

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

What is the best way to customize the appearance of the initial row in each tr cluster?

Looking to add a button for expanding child rows within a datatable, with each group in the table having the same child elements.... The provided CSS currently displays the icon on every row throughout the entire table. td.details-control { backg ...

htmlcssdatatablesgrouping

Tips for successfully passing arguments in Angular applications

I've encountered an issue while working with mat-autocomplete. My function is not functioning properly when I select an item from the drop-down list. It seems like I need to pass the add() function in my select, but I'm receiving an error stating ...

htmlangulartypescriptangular-materialangular-directive

What is the best way to create this shape using the ::before and ::after CSS pseudo-elements?

I'm exploring various methods of drawing shapes in CSS, and I'd like to tackle this challenge using the ::before and ::after pseudo-elements. https://i.sstatic.net/aGJfB.png Everything came together except for the yellow section. ...

htmlcsscss-shapes

Div with inline-block elements nested inside

My attempt at creating a grid using display:inline-block with divs was successful when positioning the divs next to each other. However, once I added elements inside the divs, the parent div started moving down. Here is the code snippet that caused the is ...

htmlcssangular

This browser does not support automatic publicPath in Webpack5

While I was working on webpack 4.44.2, I encountered this error when transitioning to webpack 5.0.0 ERROR in ./src/assets/sass/styles.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): Error: Automatic publicPath is not ...

javascripthtmlcsswebpacksass

I am encountering a problem with the $invalid property in AngularJS

Hey there, I've got a coding dilemma involving three number inputs, which I will refer to as the first input, second input, and third input for clarity. Here's the setup: <div> <form name="formOpenMax"> <div clas ...

javascripthtmlangularjstwitter-bootstrapvalidation

I'm attempting to incorporate the CSS file into the main HTML template, but the styling isn't being applied. My goal is to define the styles externally

The CSS style isn't being properly imported. Below is the base HTML file (base.html) I'm using: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="widt ...

htmlcssweb-development-server

Creating a web design using HTML and CSS to position one element at the left top corner of the page and another element at

I am looking to position two divs in a specific way on the page: one at the top left corner (black) and the other on the right side (red). https://i.sstatic.net/tKpGo.png I have considered 5 different approaches, which I've listed below. While they a ...

htmlcss

Transforming a React Native application into a HTML5/Progressive Web App (P

Is there a way to convert a React Native app into a website format without the need to create a whole new frontend using HTML5 or PWA? Has anyone attempted this before or knows the process to do it? ...

htmlreact-nativefrontendprogressive-web-appsmigrating

The execution of jQuery was hindered due to the implementation of PHP include

Having an issue with jQuery not working in index.php when including the file header.php. The nav sidebar is included, but clicking the chevron does not trigger anything. It only works when I directly include header_user.php without checking the UserType in ...

javascriptphpjqueryhtmltwitter-bootstrap

What is the most efficient way to create a single CSS class that will style two text lines, such as a title and subtitle

Here's the code snippet I'm currently working with: .data-title { font-weight: bold; } .data-content { color: gray; } <p class="data-title"> Title </p> <p class="data-content"> Content </p> This is how I want ...

htmlcss

Running Content Scripts and CSS styles from Background Page in Chrome Extension - Manifest V3

I'm currently working on developing a chrome extension, and my goal is to have a small circle appear on the screen when the extension is active. I require CSS for this task, and my plan involves setting the background in the manifest file and triggeri ...

javascriptcssgoogle-chrome-extensionscriptingchrome-extension-manifest-v3

Adding content to a text field and then moving to the next line

I am looking to add a string to a text area, followed by a new line. After conducting some research, here are the methods I have attempted so far but without success: function appendString(str){ document.getElementById('output').value += st ...

javascripthtml

Significant Shift in Layout Occurs When Text is Bolded

Recently, I have started learning about HTML and CSS while working on a simple website project. I have noticed that whenever I make text bold within a paragraph, it leads to a significant layout shift issue in PageSpeed Insights. The website I am working ...

htmlcss

Injecting styles dynamically into an Angular component enhances its appearance and functionality

I am in need of help with styling a component using CSS styles specified by an object of selectors to CSS properties. Check out my sandbox here: https://codesandbox.io/s/happy-goldberg-4740z Here are the styles to be applied from the parent: const styles ...

javascriptcssangular

css - Tips for reducing the speed of inertia/momentum scrolling on mobile devices

I have been working on creating a scrollable card gallery using a CSS grid layout. The structure I am following is similar to this: <div class="gallery-wrapper"> <div class="gallery-container"> <div id="card-1" class="gallery-ca ...

htmlcssscroll

"The 'BillInvoice' object must be assigned a primary key value before it is ready for this relationship" - Error Message

There is an issue in my Django project related to the creation of a BillInvoice and its associated BillLineItem instances. The error message I'm receiving states: "'BillInvoice' instance needs to have a primary key value before this re ...

javascriptpythonhtmlcssdjango

What is the best way to display items within a table using React?

I'm just starting to learn React. Can someone show me how to use the "map" function to list elements from two different arrays in two columns? state = { dates: ["2000", "2001", "2002"], cases: ["1", "2", "3"] } render() { return ( <thea ...

javascripthtmlreactjsweb-frontenddom-manipulation

Place two divs side by side and align them in the center of the page

I am facing a challenge with aligning two divs on the same line, but they are not centered on the page. I have tried to adjust the code but without success. Here is my current code: .table-1 { overflow: hidden; margin: 0 auto; } .box-1 { backgroun ...

htmlcss

Issues with webpage not loading properly from the header section

I wanted to draw your attention to this page and its source code, which can be found here: The web page is not displaying from the very top, as there seems to be a gap of about 10px from the top of the browser. In the image above, I have highlighted the ...

phphtmlcss