I've got two images that need to be aligned on either side of the title, preferable on the edges of the page. I tried to use position relative but it's not responsive to other screen sizes.
Can someone show me an efficient way to do this, please?
Currently its like this, but i want the two images to be on either side of the title.
title{
width: 100%;
}
.web{
font-size: 120px;
}
.js{
height: 230px;
width: 240px;
}
.css{
height: 230px;
width: 440px;
}
<div class="intro py-3 bg-white text-center">
<img class="js" src="images/js-flat.png" alt="js">
<div class="title">
<h2 class="web text-primary display-3 my-4">Wev Dev Quiz</h2>
<img class="css" src="images/css2.png" alt="css">
</div>
</div>
never-mind, i fixed it with:
.intro {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center
}
You can use display:flex property in your parent div. I did some changes of your html and css codes below.
Here is the html part. I deleted the div that has a title class because all elements that are needed to be align should be seperated each other if you use display:flex
Here is the HTML and CSS codes:
.intro {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center
}
.web{
font-size: 120px;
}
.js{
width: 240px;
}
.css{
width: 240px;
}
<div class="intro bg-white ">
<img class="js" src="images/js-flat.png" alt="js">
<h2 class="web text-primary">Wev Dev Quiz</h2>
<img class="css" src="images/css2.png" alt="css">
</div>
When you use display:flex all items are aligned as horizontally. But we want to align them vertically. So we need to use flex-direction:column (its default is row). To align these items center, we also need align-items because this is used to align in cross axis which is perpendicular to the main axis.
Codepen: you can check it here
Related
The following code correctly expands the max-width of a div:
<div style="display: flex; flex-direction: column;">
<div style="max-width: 500px;">
<div style="background-color: red; height: 20px;"></div>
</div>
</div>
Result:
However, when I set any alignment, align-items on the parent-most div, align-self on the max-width div, etc, the maxWidth will no longer be used, and the actual width will be set to 0.
For example:
<div style="display: flex; flex-direction: column;">
<div style="max-width: 500px; align-self: center">
<div style="background-color: red; height: 20px;"></div>
</div>
</div>
Produces a blank screen:
How do I both align the div (to the center for example), and keep its width intact? The goal is not to resort to using width, because that won't adjust to the parent width (which may be anything). Any solution that would keep the width, but won't insist on taking it even if there is no space, like with width, would work.
With align-self:center and flex-direction:column, you need to set the inner container width, which I did to be 100% and it shows now.
<div style="display: flex; flex-direction: column;background-color:grey">
<div style="max-width: 500px; align-self: center; width:100%;background:black;">
<div style="background-color: red; height: 20px;"></div>
</div>
</div>
I have this div with three inner divs.
ONE - I am div TWO - I am div THREE - I am div
But in mobile it can only fit two divs in a row horizontally, I need divs after 2nd to step down.
Like this:
ONE - I am div TWO - I am div
THREE - I am div
How do I do this?
I am using flex.
Edit
I have added HTML code.
I am using React and other UI component and I tried to minimize it in HTML. It's something like this right now.
<div class="parent">
<div class="child">
<span>ONE</span>
<p>I am div</p>
</div>
<div class="child">
<p>TWO</p>
<p>I am div</p>
</div>
<div class="child">
<span>THREE</span>
<p>I am div</p>
</div>
<div>
.parent {
display: flex;
justify-content: space-around;
margin-bottom: 3rem;
white-space: nowrap;
}
.child {
display: flex;
align-items: center;
margin-left: 1rem;
margin-right: 1rem;
}
You can use flex-wrap to continue on the next line. justify-content will center the div
.outer {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* Styles below are for demonstration purposes */
.inner {
height: 50px;
width: 300px;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
<div class="outer">
<div class="inner red">A</div>
<div class="inner green">B</div>
<div class="inner blue">C</div>
</div>
This will work for responsive layout, and it also permits them to fit in one line, if the screen size allows it. You can use media query to set it for mobile only.
.outer{
display: flex;
flex-flow: wrap;
text-align: center;
}
.inner{
flex-grow: 1;
}
I have something like this:
HTML:
<div id="container">
<img src="leftphoto.jpg" id="left">
<div id="right">Description</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color:#252525;
}
#container{
position: relative;
display: flex;
justify-content: center;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
height: 40vw;
}
#left{
max-width: 75vw;
height:100%;
}
#right{
min-width: 300px;
height:100%;
color:white;
width:20vw;
background-color: red;
color: #ffffff;
font-size: 11px;
overflow: auto;
}
I want the right div to go down, under left div with the same width. How can I achieve that?
What I have:
When I resize window, it is smaller:
But I want the right div to go down, under the left div and also I would like to get the same width on both divs:
I was trying a lot of different things, but I couldn't achieve this. Do you have any advice?
You can use flex blox to achieve this. Simply place on the container of the divs. Once that is done you can change the divs placement by flex-direction row/column. Similarly, for placing the 2nd div above the first div once the size reduce, you can set media query for a specific screen where you can reverse the column and you done.
.container{
display: flex;
flex-direction: row;
}
#media screen and (max-width:768px){
.container{
display: flex;
flex-direction: column-reverse
}
}
<div class="container">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
<div class="content">
<p>Content</p>
</div>
</div>
Create a second container in your html and they will naturally align under eachother
<div class="container">
<div class="content-Container">
<img src="leftphoto.jpg" id="left" />
<div id="right">Description</div>
</div>
</div>
and then position them to the middle of the page by adding style to the parent container
I have been studying CSS flex recently and was trying out some simple tasks with it. One of these tasks was to make a timeline with alternating elements being above or below a mid-line.
I would like to be able to set an initial width and a fixed height, so that when the content exceeds the height of the div and overflows, the width will expand to accommodate the content, and hopefully there will be no overflow.
https://codepen.io/anon/pen/roVOXB
<div class="content">
<div class="box">
<div class="above">Content of the div</div>
<div class="below"></div>
</div>
<div class="box">
<div class="above"></div>
<div class="below">Content of the div</div>
</div>
<div class="box">
<div class="above">Content of the div</div>
<div class="below"></div>
</div>
<div class="box">
<div class="above"></div>
<div class="below">Content of the div</div>
</div>
<div class="box">
<div class="above">Content of the div</div>
<div class="below"></div>
</div>
</div>
.content {
display: flex;
}
.box {
display: flex;
flex-direction: column;
}
.above, .below {
height: 350px;
display: flex;
min-width: 300px;
border: 1px solid #000;
}
.above {
display: flex;
align-items: flex-end;
background: orange;
}
.below {
display: flex;
align-items: flex-start;
background: aqua;
}
I know it might be a simple solution and its staring me right in the face, but I have tried everything with max-widths, max-heights, overflows and wrapping the text but nothing can help me achieve the desired outcome so far.
I would really appreciate any help. Thanks!
You can change the elements dynamically using the following JS:
var allElements = document.querySelectorAll('.below, .above');
allElements.forEach((Ele) => {
if(Ele.scrollHeight > 350){
Ele.style.minWidth = (Ele.scrollHeight) + "px";
}
});
What is does it iterate through all the elements with classes below and above, then checks if it uses more height than the height: 350px, if it is > 350px, then it will adjust accordingly.
Just add the above JS code in your codepen JS editor, and you're good to go. Try adding more content to it and it will dynamically change the width w/o overflow.
If the number of columns is static, you can remove the min-width from .above, .below.
Add min-width: 2700px; to .content.
I have a <div> like below
<div style="right:0px;bottom:0px;position:absolute;">
</div>
When my mobile site is opened in portrait mode, this div is displayed correctly at the bottom right corner.
But, when opened in landscape mode it is displayed at corner and overlaps the elements already present.
I want this div to be at the bottom of all elements at the bottom right corner of the page. How do I do it?
I would suggest to use flexbox - but it could need to reorganise a little your css code
.page {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height:100vh;
}
.element {
height: 10px;
width: 80%;
border: 1px solid #000;
padding: 20px 0;
}
.element.bottom {
margin-top: auto;
background: red;
}
<div class="page">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element bottom">
</div>
</div>