Hello I have a parent flex box and 2 childs with 100% width.
<div class="wrapper">
<app-user></app-user>
<div class="text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus
laboriosam incidunt necessitatibus optio id cumque velit nam deserunt
dolorem. Dolorum asperiores corporis reiciendis veniam, porro temporibus
obcaecati distinctio illo. Nihil.
</div>
</div>
My margin in <app-user> not working , due to the 100% width of parent. I need to fix the 100% width of my .sidebar element to keep the width and also I need a margin to take .text little bit away from my first element
link to code
app-user
<div class="sidebar">
sidebar
<img
src="https://cdn.oneesports.gg/wp-content/uploads/2020/07/Dota2_InvokerHeader-1024x683.jpg"
alt=""
/>
</div>
css
.wrapper {
display: flex;
}
.sidebar {
max-width: 400px;
width: 100%;
margin-right: 32px;
}
.sidebar img {
width: 100%;
height: auto;
}
UPD 1
If I move styles from .sidebar directly to app-user in browser it works perfect , but I dont want to use :host styles in css. As in produciton I have a big project
You can use calc() function documented here :
https://developer.mozilla.org/fr/docs/Web/CSS/calc()
So you can remove the margin from your .sidebar class
and add this css lines to your app.component.css :
.wrapper .text { width: calc(100% - 32px); margin-left: 32px; }
And here is your link code that I modified
Related
I was watching a video that used align items and justify center to put a div on top of the page
why is it only at the top not at in the middle of the page?
.wrapper {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
padding: 0 10%;
overflow: hidden;
height: 100%;
}
<div class="wrapper">
<div class="cols cols0">
<span class="topline">Hello</span>
<h1> I'm <span class="multiText">Coder</span></h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus, sed nam quia autem voluptatum quae omnis maiores dolorem hic dolores sint quisquam a. Eaque expedita laborum debitis, dolores fugit assumenda!</p>
<div class="btns"> <button> download CV</button>
<button> hire me</button>
</div>
</div>
<div class="cols cols0"></div>
</div>
The issue is that height: 100% means 100% of the parent's height. The parent's height however is by default set to fit-content means the height is undefined. 100% of undefined is also undefined!
In order to vertically center content within an element, the height of the element must be higher than the content itself!
The simple solution is to give it a min-height of 100vh (the height of your content frame within the browser.
To remove the default vertical scrollbar you have to reset the default body margin and set the box-sizing of the element to border-box as otherwise, the padding will add height on top.
/* need to add this body reset + min-height */
body {
margin: 0;
}
.wrapper {
min-height: 100vh;
box-sizing: border-box;
}
/* original css */
.wrapper {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
padding: 0 10%;
overflow: hidden;
height: 100%;
}
<div class="wrapper">
<div class="cols cols0">
<span class="topline">Hello</span>
<h1> I'm <span class="multiText">Coder</span></h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus, sed nam quia autem voluptatum quae omnis maiores dolorem hic dolores sint quisquam a. Eaque expedita laborum debitis, dolores fugit assumenda!</p>
<div class="btns"> <button> download CV</button>
<button> hire me</button>
</div>
</div>
<div class="cols cols0"></div>
</div>
The .wrapper div is not spread over the full height.
You can set its height to 100vh
try to remove second block
<div class="cols cols0"></div>
The easiest way to understand what I want to achieve is in the attached image.
Essentially, I want to create a responsive layout comprising of 3 elements within a section - a header, a body, and a footer. On smaller screens (i.e. mobile) the 3 elements simply stack as you'd expect.
However, on larger desktop screens, I want the elements to split into 2 columns - the header and footer on the left, and the body on the right.
The problem is I'm actually not sure I can create this behaviour with CSS alone.
The best I can achieve ends up with the footer element staying in line with the bottom of the body element, like the below image (I understand why, I just want to figure out a way around this.)
I've tried a few methods using floated elements, as well as flexbox solutions and playing with the ordering, but with no success. I even tried some grid stuff, although my knowledge of grid isn't great so I may have missed something.
I know that I could use JS to do something such as moving the header and footer within a single parent element, or back out again, depending upon screen size. But I'm hoping there's a CSS-only way to achieve this, as that doesn't seem very elegant.
Thanks in advance for any suggestions!
Use css-gridwith the use of `grid-template-areas" to define the placement of a specific section as the example below. To allow the body section to extend further then the header and footer, you just need to use 3 rows.
body {
display: grid;
margin: 0;
padding: 20px;
grid-gap: 20px;
}
section {
background-color: red;
color: white;
padding: 10px;
}
#header {
grid-area: header;
}
#body {
grid-area: body;
}
#footer {
grid-area: footer;
}
#media only screen
and (max-width: 480px) {
body {
grid-template-areas:
"header"
"body"
"footer";
}
}
#media only screen
and (min-width: 481px) {
body {
grid-template-areas:
"header body"
"footer body"
". body";
grid-template-columns: 4fr 6fr;
}
}
/* for styling purpose only */
#body {
min-height: 70vh;
}
<section id=header>Header</section>
<section id=body>Body</section>
<section id=footer>Footer</section>
I have used CSS Grid to achieve this, I know you already acheived in Mobile version so I'm just sharing the demo code for Desktop Version. CSS Grid is really powerful you can create complex layout in minutes.
.outer{display: grid; grid-template-areas: 'header body' 'footer body' 'footer body';
}
.header{width: 100%; grid-area: header; height: 50vh; background-color: yellow;}
.body{grid-area: body; background-color: red; }
.footer{grid-area: footer; height: 50vh; background-color: violet;}
<div class='outer'>
<div class='header'> HEADER</div>
<div class='body'> body</div>
<div class='footer'> Footer</div>
</div>
using a div with zero width and height and margin negative of the div the result can be achieved.
the purple is a div with display flex and a normal
orientation with flex wrap turned on. orange is the footer. it has a
negative margin to equivalent to the body height plus the. the thing in yellow
is a div with width and height 0 and margin bottom equivalent to its height
of the body. when the page is wide enough both the body and and the yellow
div are moved to the side and the negative margin of the footer makes it go up to just
bellow the header at the bottom is an in browser version, the yellow square is there to indicate
the location of the padding div.
I know we are in 2021, but old good simple floats can be used for this task
#media (min-width: 480px) {
div {
display: flow-root;
border: 1px #ccc dashed;
}
header, footer {
width: 40%;
float: left;
}
main {
float: right;
width: calc(60% - 10px);
}
}
div > * {
box-sizing: border-box;
color: #fff;
background: #eb0022;
padding: 10px;
margin-bottom: 10px;
}
<div>
<header>header</header>
<main>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos tempore doloremque, illum praesentium atque cumque nulla, dolorum obcaecati quod recusandae itaque pariatur unde soluta blanditiis repudiandae perspiciatis deserunt fuga commodi.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos tempore doloremque, illum praesentium atque cumque nulla, dolorum obcaecati quod recusandae itaque pariatur unde soluta blanditiis repudiandae perspiciatis deserunt fuga commodi.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos tempore doloremque, illum praesentium atque cumque nulla, dolorum obcaecati quod recusandae itaque pariatur unde soluta blanditiis repudiandae perspiciatis deserunt fuga commodi.</p>
</main>
<footer>footer</footer>
</div>
i need a solution guys, i want the two boxes in pink and white to have same height as its parent container in blue box (that is to stop where that blue box stopped) without depending on the content of the div in pink and white boxes.
here is my fiddle code
https://jsfiddle.net/dcq4bufa/3/
my HTML CODE
<head>
<title>eco</title>
</head>
<body>
<header class="header">
<ul class="nav">
<li class="nav-items">HOME</li>
<li class="nav-items">APP</li>
<li class="nav-items">STORE</li>
</ul>
<div class="home">
<div class="home__right">
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nemo
aliquid saepe tempora doloribus dicta quas aperiam, eius odio ipsa culpa ipsam rerum quam vero
itaque, recusandae sint perferendis ipsum.</p>
<h1 class="home__right--sub"> tenetur quidem ducimus quod odit totam, dolor</h1>
</div>
<home class="home__left">
<h1 class="paragraph">Lorem ipsum dolor sit amet, consectetur ad</h1>
</home>
</div>
</header>
</body>
First you must outline the height of the parent container(blue),then set the two children elements(pink and white)height of 100% since they are in a container that is 100 of your device height.Try this:
.home {
display: flex;
height:100vh;
&__right {
background-color: pink;
height:100%;
flex-basis: 50;
}
&__left {
background-color: white;
height:100%;
flex: 1;
}
}
You can adjust the height of .home if you are not comfortable with the overflow
If you can use flexbox, you may do the following:
.header {
height: 80vh;
background-color: blue;
/* Add flexbox */
display: flex;
flex-direction: column;
}
.home {
display: flex;
flex: 1; /* Set flex-grow: 1 */
...
I have three div tags, 1 parent and 2 child. The parent div should take up full width of the page and height of the content (i.e. the 2 child divs). The 2 child divs should be positioned horizontally on bigger screens (i.e.) laptops, desktops...) and occupy 50% of the width of parent and expand as per content.
The 2 child divs should align/stack vertically on smaller devices (i.e. mobile), taking up full width of the parent and expand as per of content.
I have tried playing around with the display properties including block, inline-block and position absolute and relative with no luck.
.parent {
display: flex;
padding: 20px;
}
.child1 {
display: inline-block;
width: 50%;
}
.child2 {
display: inline-block;
width: 50%;
}
Use a media query at the moment you want to break down the two child divs to occupy 50% of the width:
Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
MDN resource
#media screen and (min-width: 600px) {
// Add your styling here.
}
See below example for the code.
#media screen and (min-width: 600px) {
.parent {
display: flex;
}
.child {
width: 50%;
}
}
// Color styling
.parent {
background-color: #ccc;
}
.child {
background-color: lightblue;
}
.child:last-child {
background-color: lightgreen;
}
<div class="parent">
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime reprehenderit modi corporis veritatis iste sit, numquam hic velit dolorem recusandae commodi blanditiis animi quisquam temporibus illum id, repellat saepe adipisci eos odit obcaecati atque?
Nihil expedita ab doloribus cum, iusto suscipit autem quos tempore officiis nesciunt maiores. Quos, labore eum perferendis cupiditate veritatis excepturi, tenetur quasi perspiciatis eius suscipit distinctio inventore adipisci asperiores incidunt numquam
fugiat autem minus quae. Possimus fugiat eos consequuntur iusto et nisi earum obcaecati qui accusantium tenetur totam animi debitis minima accusamus cum quas, amet architecto quam sequi quisquam eum dolorum exercitationem rerum adipisci, esse! Voluptates.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, enim reprehenderit asperiores sapiente blanditiis odit. Possimus vel porro in eligendi vitae officiis placeat odit asperiores illo consequatur, quos enim nam quam natus pariatur,
sed autem excepturi temporibus, consequuntur beatae eos. Exercitationem voluptatum, aliquam harum delectus provident laudantium perferendis atque aliquid!</div>
</div>
flex and grid can let you drop the mediaquerie breaking point.
With a mediaquerie, you can switch back to display:block;
For infos : Since you use flex on the parent, display value on the children will have no effects but width:50% can be too much if margins, padding or borders are involved. box-sizing can be your friend here.With flex, you can use flex:1; to spray evenly the children , no matter the number, borders, padding or margin.
examples with grid, flex and a switch back to block via a mediaquerie .breakpoint is set at around 620px in the demo , update the value(s). used to fit your needs.
/* the flex container without mediaquerie */
div[class] {
display: flex;
min-height: 20vh;
flex-wrap: wrap;
/* needed to stack children once to big */
}
div[class] div {
flex: 1;
min-width: 300px;
/* 2 children + margin and borders makes a break point at around 620px */
background: lightblue;
}
div div {
border: solid;
margin: 3px;
background: tomato;
}
div[id] {
min-height: 20vh;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
/* again a break point at about 620px when 2 children no need of mediaquerie */
}
div[id][class] div {
background: lightgreen;
}
/* remove the grid system at about 620px */
#media screen and (max-width: 621px) {
div[id],
div[class] {
min-height: 30vh;
/* has a meaning with a grid system */
}
div[id][class] {
display: block;
/* looses the grid system, back to classic layout see min-height behavior not resizing children */
border: solid;
}
}
<div class>
<div>1</div>
<div>2</div>
</div>
<div id>
<div>1</div>
<div>2</div>
</div>
<div id class>
<div>1</div>
<div>2</div>
</div>
a few usefull links:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Try using css grid styling to do this. This is a sample code where the child1 and child2 are in the same row in a large screen but when the screen becomes smaller (mobile view) it will be one below the other. Hope it helps you
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
padding: 20px;
}
<div class="parent">
<div>
child1
</div>
<div>
child2
</div>
</div>
`
.parent {
display: flex;
flex-flow: row wrap;
padding: 20px;
background: #ccc;
box-sizing: border-box;
}
.child {
max-width: 98%;
flex: 0 0 98%;
height: 200px;
background: #333;
margin: 0 1% 10px;
}
#media (min-width: 480px) {
.child {
max-width: 48%;
flex: 0 0 48%;
margin-bottom: 0;
}
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
`
The problem arises when there is a variable width image set to max-height: 100%; in a flex-item. When the page loads flex box successfully gets the width for the current size of the flex-item, however if you resize the browser which forces the image to decrease in size (or increase), the outer container does not follow the new width.
If you run the code snippet below in full screen you'll see on initial load the image is fully surrounded by the pink box, but when you resize (make the height smaller) the image shrinks and the flex container stays at the same width.
.flex {
display: inline-flex;
background-color: deeppink;
height: calc(100vh - 20px);
border: 10px solid deeppink;
}
.flex-left {
width: 250px;
}
.flex-right img {
width: auto;
min-width: 0;
max-height: 100%;
}
<div class="flex">
<div class="flex-left">
<h2>Testing headline</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quia nemo qui ipsam? Temporibus sint necessitatibus expedita, eum quae tempora voluptas dolore facere voluptate! Possimus molestias non commodi. Officiis, iste?</p>
</div>
<div class="flex-right">
<img src="http://unsplash.it/1000/650" alt="">
</div>
</div>
Try adding a percentage height to the image container.
The image is already flexible, because its dimensions are set in percentages. With a percentage height on the container, it becomes flexible, as well.
jsfiddle demo
.flex {
display: inline-flex;
background-color: deeppink;
height: calc(100vh - 20px);
border: 10px solid deeppink;
}
.flex-left {
width: 250px;
}
.flex-right {
height: 100%;
}
img {
max-width: 100%;
max-height: 100%;
}
<div class="flex">
<div class="flex-left">
<h2>Testing headline</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quia nemo qui ipsam? Temporibus sint necessitatibus expedita, eum quae tempora voluptas dolore facere voluptate! Possimus molestias non commodi. Officiis, iste?</p>
</div>
<div class="flex-right">
<img src="http://unsplash.it/1000/650" alt="">
</div>
</div>