items located within the lower part of div containers

Can someone help me figure out how to position the last paragraph element at the bottom of the box in this jsFiddle example? (You may need to resize the window area)

Here is the CSS code snippet:

@media (min-width: 768px) {

    /* top row */
    .col .well{ 
        margin-bottom: -99999px;
        padding-bottom: 99999px;   
    }
    .col-well {
        display:inline-block; height:100%   
    }
    .col-well p {
        vertical-align:bottom 
    }
    /* bottom row */
    .col-base{ 
        margin-top: -15px; /* cut off top portion of bottom wells */
    }
}

@media (max-width: 767px) {
    .row.base{
        display:none;
    }
}

.col-wrap{
    overflow: hidden; 
}

Answer №1

.container{ 
    display: flex;
    justify-content: center;
    align-items: center;
}

.container > h3:first-child {

    text-align: center;
    font-size: 24px;

}

Check out the code on jsfiddle

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

Is there a way to temporarily halt scrolling text and then resume?

Is there a way to pause the marquee for a few seconds at the end of each <li>, before continuing on to the next one? Here's my code: <div id="teks_container" > <marquee direction="up" scrollamount="3" height="200px"> <ul&g ...

Form submission failure due to dynamic input manipulation

I am encountering an issue with a dynamic form that allows users to add and remove inputs. Although the form functions correctly visually, the values from inputs created by the JavaScript function are not being retrieved when the form is submitted. If more ...

How can I fix the error message stating, "Element 'title' appears too frequently? Is there a way to only use a single "Title" tag in this situation?"

Is there a way to utilize a single "Title" tag when the message displays as "Element 'title' occurs too many times? <head> ... @if (ViewBag.Title != null) { <title>@ViewBag.Title</title ...

Display/Conceal a div using CSS in React JS/Redux

I've been working on a CSS toggle for a div with className toggling. My approach involves using redux to manage the boolean state. Using the redux chrome extension, I can see that the state is indeed changing but the div remains invisible. If you have ...

Create a seamless typing effect in JavaScript that loops indefinitely

I've managed to tweak this code I stumbled upon to almost perfectly fit my needs, except for one thing - it keeps looping. I just want it to type "zero", delete it, and then type "one" before stopping. I've tried making some adjustments here and ...

Tips on aligning text vertically within a Bootstrap table

My goal is to vertically align the text in the center of its row within a bootstrap table, regardless of its length. I've been trying to achieve this using vertical-align: middle; line-height: 90px;. Adjusting the line-height seems to work for center ...

Adjust the height of the div to match the height of the screen and ensure the footer is fixed

I'm facing a problem on my website where the footer moves up when there isn't enough content, causing it to not stick to the bottom. I am trying to find a solution to make the div between the footer and header stretch to fill the available space, ...

Using the alt attribute for background images in CSS

Dealing with alt tags for images is a challenge I haven't faced before. How can I add alt tags to all images on a website, even those used by the CSS background-image attribute? Since there isn't a CSS property specifically for this purpose, wha ...

Oops! An issue has occurred: Angular template is unable to read the property 'description' as it is undefined

This is my amazing service providing up-to-date information at your fingertips! fetchCurrentAffairs() : Observable<NewsData[]> { return this.httpClient.get<NewsData[]>(`${this.url}/latest`); } Introducing the brilliant component to brin ...

What is the best way to make a hyperlink in HTML open in the same page or window, without relying on the <iframe> tag or JavaScript?

I have two html files and one css file. My question is how to open the link monday.html on the same page or window in my content section. For example, when someone clicks on the Monday navigation button, I want the result to show up in the content section ...

What is the best way to share an HTML element across multiple pages in Next.js?

I am in the process of developing a website that features a table of contents with links on the left side, content sections in the middle, and an overview on the right. For a visual representation of the general concept, please visit: https://i.sstatic.net ...

I've exhausted all options from stackoverflow with no success. Google Chrome's Autofill feature is wreaking havoc on my theme. Any suggestions on how to tackle this issue?

I designed a template with a stunning CSS layout. All I want is to have a transparent background with white font color, but Google Chrome seems to be causing issues with my theme. What steps should I take? I've exhausted all resources available onlin ...

Should the element be scrolled beyond a fixed-positioned element

Is there a way to determine if an element is scrolled behind another element that is fixed at the top? I am looking to trigger some javascript when an element is positioned below a fixed element and every height or scrollTop thereafter. I am attempting t ...

Sparkles views css files as roadmaps

In my project, I am utilizing the Spark web framework for Java along with the Freemarker template engine. Here is an excerpt of my HTML code: <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na ...

Drop and drag the spotlight

On my website, I am looking to implement a feature that will make it easier for users to identify the drag and drop area. I found a code snippet on JSFIDDLE that works perfectly there. However, when I tried to use it on my local server, it doesn't se ...

What's the best way to target an element that is outside a certain parent container, but based on the parent's class?

Looking to target specific divs with a data-role of content that are not nested within a data-role="page" div with the class "modal". Advanced CSS selectors are not my forte. <div> <div data-role="page"> <div data-role="content" ...

Control other inputs according to the chosen option

Here is the HTML code snippet: <fieldset> <label for="tipoPre">Select prize type:</label> <select id="tipoPre"><option value="Consumer Refund">Consumer Refund</option> <option value="Accumulated Prize Ref ...

Tips on incorporating a style-tag into the body of an Angular 5 application

We offer a service that collects a vast amount of data to be displayed in an angular 5 application. The model used for displaying this data is constantly evolving and shared across multiple applications, so I need to import it dynamically. My approach inv ...

Issue with Firefox position: absolute not producing the desired outcome

I am working on a webpage where I want to put a label over an image. I was able to achieve this using position: absolute for the label and float: left for the img tag. This method worked perfectly in most browsers, except for Firefox (both version 3 and 4) ...

What is the proper way to incorporate html entities in my specific situation?

In my application, I am attempting to incorporate double macron characters. My current method involves using the &#862; entity, like this: t&#862;t, which results in t͞t. However, I have encountered issues with reliability, as sometimes the ...