I'm trying to do something that should be simple, but my knowledge in CSS is tricky. I would like to make a login screen with a fixed column on the right, as in the image below, but I would like the right column to fill all the width when the screen is narrow, for example, in cellular devices.
Thank you!
There are several ways to do it. Here is a simple example with Flexbox .
This model works like this, using the average query @media when the screen is greater than 660px with flex-basis I determine that the right column will have 70% of the right 30% , When the screen is less than 660px each column is with 100% of flex-basis , thus each column occupies an entire row.
Codewiththeresultoftheimageabove:
OBS:Displayallpagetoseehowresponsiveyouare.Ifyouwanttoadjustthewidthofthecolumns,simplyadjustthe70%and30%proportionally,alwaysaddingupto100%,eg:75%,25%
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
}
.esq {
flex-basis: 70%;
background-image: radial-gradient(transparent, rgba(0,0,0,0.9)), url(https://unsplash.it/360/200);
background-size: cover;
}
.dir {
flex-basis: 30%;
background-color: aliceblue;
}
@media screen and (max-width: 660px) {
.container > div {
flex-basis: 100%;
}
}<div class="container">
<div class="esq">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, sed?
</div>
<div class="dir">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, sed?
</div>
</div>TIP: as a matter of curiosity even
In this specific case you can use the technique known as Flex-grow 9999 Hack with it you can make the columns break without needing a media query! Here you you can read more about this: link
Seethecodeusedtogettheresultoftheimageabove:
.container {
display: flex;
flex-wrap: wrap;
}
.cell {
display: flex;
align-items: center;
height: 100px;
}
.first {
flex-grow: 1;
background-color: lightgreen;
flex-basis: 70%;
min-width: 320px;
}
.second {
flex-grow: 9999;
flex-basis: 30%;
background-color: lightblue;
}<div class="container">
<div class="cell first">
Cell 1
</div>
<div class="cell second">
Cell 2
</div>
</div>Hello, this type of screen is called the Feature Screen and usually does not have content that exceeds the size of the screen itself. To make a screen like this you can use the structure below:
* {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: row;
width: 100%;
height: 100vh;
}
.wrapper>* {
flex: 1
}
.feature {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
/* background-image: url('minha-imagem-aqui.jpg') */
background-color: red; /* troque essa linha pela de cima */
}
.main {
width: 100%;
max-width: 350px;
min-width: 350px;
}
@media only screen and (max-width: 576px) {
.feature {
display: none;
}
}<div class="wrapper">
<div class="feature"></div>
<div class="main">
<p>o conteúdo da página aqui</p>
</div>
</div>Just like the above comment, you should take a look at responsiveness because this type of control is done with average queries. Take a look at this article:
EDIT
I made changes to the above solution so that the width of the screen fits when it is in a specific size. Based on the bootstrap, which defines that a screen is the size of an application when it is at most 576px