flexbox align items jumble

I am trying to achieve a similar effect as seen in my sketch.

The man should always be placed in the right bottom corner of the header. The carousel should be positioned in the center or center-left (50% of the header height).

I have added a new class (pad4) to my header container and utilized flexbox.

display: flex;
justify-content: flex-end;
align-items: flex-end;

Currently, the man is in the left bottom corner and the text is in the top-right corner. I am unsure how to correct this issue because adjusting margin or padding does not seem to work.

Visit the site here:

htmlcssflexbox

Answer №1

In order for the children to be considered as flex elements, you must apply display: flex to a parent element. Therefore, make sure to add 

display: flex; align-items: flex-end;
to your <header> element. After that, don't forget to also add align-self: center to the slider container (div.container-fluid.pad4 in this scenario). The end result will look like this: https://i.sstatic.net/XhtGY.jpg

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

Navigating to the most recent item within ng-repeat (AngularJS or JavaScript)

I am working on a feature where posts are displayed using ng-repeat in a div, and users can enter new posts in an input box. The posts are sorted so that the latest one appears at the bottom. After adding a new post, I want to automatically scroll down t ...

javascriptjqueryhtmlcssangularjs

"Seamless responsiveness in design with jQuery, but encountering compatibility issues

My usage of jQuery is quite basic to ensure that elements are properly positioned when they are moved: function ipad() { var width = jQuery(window).width(); if (width < 1200 && width >= 768){ //if tablet jQuery('.mobbut').css(&apo ...

javascriptjqueryhtmlcssfirefox

What is the significance of using flexGrow in the parent div of a Material UI grid?

I am currently working on understanding a code example located at https://codesandbox.io/s/9rvlm which originates from the Material UI documentation (https://material-ui.com/components/grid/): import React from 'react'; import PropTypes from &ap ...

cssreactjsflexboxmaterial-ui

Prevent a sliding panel from responding if there is no input text by incorporating jQuery

I have a straightforward example of user input and a button that reveals "Hello World" when clicked: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1 ...

javascriptjqueryhtml

Two dynamic divs positioned next to a div with a set size

I am struggling with the layout of placing two fluid divs next to one that has a fixed size. Let me show you a picture to better illustrate my issue: #menu has a fixed width; #owl takes up 60% of the wrapper; #right menu takes up 40% of the wrapper. Fo ...

htmlcssresponsive-design

What is the best way to display an alert when the button is clicked repeatedly?

Is it possible to keep displaying the alert every time we click the button, rather than just once after clicking it? I currently have an alert set to trigger when a button is clicked, but it disappears after 3 seconds. How can I make it show up again with ...

javascriptjqueryhtmlcss

I'm having trouble understanding why my Javascript validation suddenly stopped functioning. Can anyone assist me in troubleshooting this issue?

I have been working on this webpage for a school project for a few days, and it was running smoothly until about 10 minutes ago. The only change I made was adding an extra JavaScript validation. Now, when I try to register by clicking the "register" butt ...

javascriptphphtml

Steps to include a title next to a progress bar:

Is there a way to achieve something like this? https://i.sstatic.net/dhO2f.jpg I attempted to use bootstrap but I ran into an issue where the title was slightly misaligned below the progress bar. Can someone offer assistance with this matter? Apologies i ...

javascripthtmlcsstwitter-bootstrap-3

Unable to relocate CSS Loader Container

Can someone help me with adjusting the placement of my container? I'm struggling to maintain the styles while getting rid of the position: absolute; on the .dot class. Every attempt I make is resulting in the dots moving erratically! To clarify, I w ...

htmlcsscss-animations

Discover html documents in a file structure using php and import them into a mysql database

I am facing an issue with my folder structure, which looks like the following example Groups - apple -- ahen45.html -- rev34.html -- ...... - bat -- fsf.html -- ere.html --.... ... The parent folder is 'Groups' and it contains subfolders lik ...

phphtmlmysqlregexdom

Problem with ineffective responsive CSS on mobile devices

Is there anyone who can assist me with this issue? I have set up a CSS grid that works properly above 768px when the min-width is specified. However, as I scale below that threshold, the layout remains unchanged and the media tag doesn't seem to take ...

htmlcss

"Customize your Vuetify v-card with uniquely styled rounded corners on only

I am seeking to create a unique v-card design where only two corners are rounded. Despite my attempts, the card ended up rotated by 90° and didn't achieve the desired outcome. DESIGN ATTEMPT: <div class="text-center rotate-ninety ml-n6" ...

cssvue.jsvuetify.js

The custom HTML menu implementation is causing the jQuery autocomplete to lose its "Select" functionality

Seeking assistance in implementing jQuery autocomplete with a custom drop down menu. I have managed to customize menu items using the data()._renderItem method (which is currently commented out), however, this approach disables the menu "Select" function ...

jqueryhtmlmenuautocomplete

How can you adjust the height of flexbox items to be aligned?

I am struggling to create a unique flexbox layout with a large amount of text in the center area. As I resize the window (specifically reducing the height), I notice that the columns on the sides do not align properly with the main article, resulting in co ...

htmlcssflexbox

Enhancing website aesthetics through CSS styling

My goal is to create websites with a fresh, updated design. One example of a site I admire is Manta Media Inc I assume that CSS plays a big role in achieving this look. What keywords should I use when searching on Google to learn how to build a web inte ...

cssuser-interface

Issue with scrolling feature in div

I am currently facing an issue with scrolling on my website. Visit this site to see the problem. When scrolling down, it causes the "hidden" part of the site to slide up. I want to achieve a similar sliding effect, but it needs to be smooth. I have attempt ...

javascriptjqueryhtmlcss

Is there a way to keep left-aligned text centered even when it wraps around?

I would like to center a block of left-aligned text within a div, ensuring that the visual width of the text block is centered rather than the block itself. In situations where the div is narrow and the text is too long to fit on one line, causing it to o ...

htmlcssalignmenttext-alignment

What technology does Spotify use to ensure that its music streaming service is not easily downloadable?

As I work on a website that will showcase some music tracks, I am aware that downloading music streams can be done through various tools like Chrome's Developer Tools or Firebug. Soundcloud is one such platform where this method of downloading streams ...

htmlstreaminghtml5-audiospotify

The PHP hash() function consistently generates identical output for distinct input values

Starting my journey into setting up user registration on my website. The form I'm using looks something like this: <form action="registrate-user.php" method="POST"> <br/> Username: <input type="text" id="username" name="username" v ...

phphtmlformshashregistration

Can you share the outcomes of executing a Node.js program in real-time?

Is there a method to execute a program (such as tcpdump) and have nodejs capture the console output in real-time to display in an HTML format without saving it? I am interested in running a program that displays information in the console, with the capabi ...

javascripthtmlnode.jsbashshell