I've added "overflow: auto" to one of my divs in my test webpage (chat app). The problem is if I'll add more messages to display, overflow: auto is not behaving properly. Instead of wrapping content only in this specific div, it's statring to wrap entire site.
I've started learning CSS a few days ago, was looking for answer but nothing worked. Code below:
HTML:
<body>
<header>
<div class="header__logo">
<img src="./images/logo.png" alt="logo">
</header>
<div class="main">
<div class="messages">
<div class="output">
<p class="system message">
<b>Połączono!</b>
</p>
<p class="message">
<i><b>Nieznajomy:</b></i><br><br>
Hey
</p>
<p class="user message">
<i><b>Ty:</b></i><br><br>
Hello
</p>
<p class="user message">
<i><b>Ty:</b></i><br><br>
Hello
</p>
<p class="user message">
<i><b>Ty:</b></i><br><br>
Hello
</p>
<p class="user message">
<i><b>Ty:</b></i><br><br>
Hello
</p>
<p class="user message">
<i><b>Ty:</b></i><br><br>
Hello
</p>
<p class="user message">
<i><b>Ty:</b></i><br><br>
Hello
</p>
<p class="user message">
<i><b>Ty:</b></i><br><br>
Hello
</p>
<p class="user message">
<i><b>Ty:</b></i><br><br>
Hello
</p>
<p class="user message">
<i><b>Ty:</b></i><br><br>
Hello
</p>
<p class="user message">
<i><b>Ty:</b></i><br><br>
Hello
</p>
<p class="user message">
<i><b>Ty:</b></i><br><br>
Hello
</p>
<p class="user message">
<i><b>Ty:</b></i><br><br>
Hello
</p>
<p class="user message">
<i><b>Ty:</b></i><br><br>
Hello
</p>
</div>
<div class="input">
<button class="action">Exit</button>
<input class="userMessage" type="text" placeholder="Type a message...">
<button class="send">Send</button>
</div>
</div>
<div class="info">
<p>Informacje:</p>
<p>IP: 192.168.*.*</p>
<p>ID: Asf$##Dfds^#2124Sds</p>
<p>Status: Połączono</p>
<br>
<p>Statystyki sesji:</p>
<p>Wysłanych wiadomości: 1</p>
<p>Odebranych wiadomości: 3</p>
<p>Łącznie połączeń: 4</p>
<p>Łączny czas: 00:43:23</p>
<br>
<p>Statystyki globalne:</p>
<p>Online: 1</p>
<p>Wysłanych wiadomości: 23564</p>
<p>Przerwa techniczna: 17.06.2022 22:00 - 1:00</p>
</div>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
/* Colors */
body {
background: var(--color1);
}
p {
color: white;
}
header {
background-color: var(--color4);
border-bottom: 1px solid var(--border);
}
.output {
background-color: var(--color2);
border: 1px solid var(--border);
}
.message {
background-color: var(--color3);
border: 1px solid var(--border);
}
.user {
background-color: var(--color4);
}
.system {
color: var(--color4);
background-color: var(--color2);
border: 1px solid var(--color4);
}
.action {
border: 1px solid var(--border);
background-color: var(--color4);
}
.userMessage {
background-color: var(--color2);
border: 1px solid var(--border);
color: white;
}
.userMessage:focus {
outline: none;
border: 1px solid var(--color4);
}
.send {
background-color: var(--color4);
border: 1px solid var(--border);
}
.info {
background-color: var(--color2);
border: 1px solid var(--border);
}
/* /Colors */
body {
width: 100vw;
height: 100vh;
display : flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-position: 50% 50%;
background-size: cover;
}
header {
width: 100%;
height: 75px;
min-height: 75px;
padding: 10px;
}
.main {
width: 100%;
height: 100%;
display: flex;
margin: 5px;
padding: 5px;
flex-direction: row;
align-items: center;
justify-content: center;
}
.messages {
width: 75%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 5px;
margin-left: 5px;
}
.output {
min-height: 300px;
width: 100%;
height: 90%;
display: flex;
margin-bottom: 5px;
padding: 10px;
flex-direction: column;
overflow-x: auto;
}
.message {
padding: 12px;
margin-bottom: 10px;
word-wrap: break-word;
border-radius: 10px;
width: fit-content;
max-width: 75%;
}
.user {
align-self: flex-end;
}
.system {
align-self: center;
}
.input {
width: 100%;
height: 10%;
min-width: 60px;
display: flex;
margin-top: 5px;
flex-direction: row;
align-items: center;
justify-content: center;
border-bottom-left-radius: 10px;
}
.action {
height: 100%;
width: 10%;
min-width: 40px;
border-bottom-left-radius: 10px;
margin-right: 10px;
}
.userMessage {
height: 100%;
width: 100%;
padding: 5px;
text-align: left;
}
.send {
height: 100%;
width: 10%;
min-width: 40px;
margin-left: 10px;
}
.info {
width: 25%;
height: 100%;
min-width: 300px;
display: flex;
padding: 10px;
margin-left: 5px;
margin-right: 5px;
flex-direction: column;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
With a lot of "Hello"'s in div the site is wrapping even on 1920x1080 size.
Sorry for grammatical issues if I made some.
Related
I am trying to create a website where I have divs side by side in a list (separated by a vertical line). I am referencing this design
I am having trouble making the design responsive: I tried using % but when resizing the browser, the divs containing my text content move down and awkwardly collide/crash into each other (and don't stay separated by the vertical line). I am wondering if anyone knows how to keep the divs separated and responsive when resizing
#experience {
border: 1px solid red;
padding-top: 0px;
margin-top: 0px;
min-height: 1000px;
}
.center_text {
border: 1px solid black;
padding-top: 1%;
text-align: center;
color: #001418;
font-weight: 600;
font-family: 'Josefin Sans', sans-serif;
font-size: 2em;
}
.vline {
height: 740px;
width: 1px;
border: none;
border-right: solid 1px black;
z-index: 10;
}
.circle2 {
border: 50px solid black;
width: 1px;
border: none;
border-right: solid 1px black;
z-index: 10;
}
#exp1 {
border: 1px solid blue;
font-family: 'Josefin Sans', sans-serif;
color: #182153;
margin-top: -43%;
height: 150px;
}
.circle:before {
content: ' \25CF';
font-size: 20px;
margin-left: 49.69%;
}
.exp_text {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
margin: 0 auto;
border: 1px solid red;
margin-top: -2%;
min-height: 110px;
}
.left_exp {
border: 1px solid green;
text-align: right;
margin-left: 25%;
}
.right_exp {
margin-top: -5.8%;
border: 1px solid green;
width: min-content;
margin-left: 60%;
}
.date {
font-size: 1.3em;
font-weight: 600;
}
.company {
font-size: 1.3em;
font-weight: 600;
}
.role {
font-size: 1em;
min-width: 250px;
}
.job_descr {
font-size: 1em;
min-width: 250px;
}
<div id="experience">
<h3 class="center_text"> Experience</h3>
<div>
<hr class="vline" />
<div id="exp1">
<span class="circle"></span>
<div class="exp_text">
<div class="left_exp">
<div class="date">
<p>2022 </p>
</div>
<div class="role">
<p>Software Engineering Intern</p>
</div>
</div>
<div class="right_exp">
<div class="company">
<p>Company Name</p>
</div>
<div class="job_descr">
<p>Description.................</p>
</div>
</div>
</div>
</div>
</div>
</div>
The solution was to use flexbox.
#experience_content {
margin: 0 auto;
min-height: 100vh;
width: min-content;
}
.row {
display: flex;
}
.column {
color: black;
flex:33.3%;
padding: 20px;
}
and
<div id="experience">
<div id="experience_content">
<div class="row">
<div class="column">
</div>
</div>
</div>
</div>
I am trying to make a key that has two colored boxes and the value that it corresponds to. I want to move the red box, the value "Red", the orange box, and the value "Orange" all onto the same line with "Key: ". This is currently what I have:
.row
{
width: 570px;
border: 1px solid lightgray;
border-style: solid;
margin: 0 auto;
border-radius: 3px;
padding-left: 90px;
padding-top: 20px;
padding-bottom: 20px;
text-indent: -46px;
line-height: 2;
}
.box {
height: 18px;
width: 18px;
margin-right: 5px;
}
.red {
background-color: #ab3025;
}
.orange {
background-color: #f5a000;
}
<div class="row">
<strong>Key: </strong>
<div class="box red"> </div>
<span> Red </span>
<div class="box orange"></div>
<span> Orange </span>
<br>
<em>Darker color corresponds to hotter temp</em>
</div>
Set the display property of your .box class to inline-block:
.row {
width: 570px;
border: 1px solid lightgray;
border-style: solid;
margin: 0 auto;
border-radius: 3px;
padding-left: 90px;
padding-top: 20px;
padding-bottom: 20px;
text-indent: -46px;
line-height: 2;
}
.box {
height: 18px;
width: 18px;
margin-right: 5px;
display: inline-block;
}
.red {
background-color: #ab3025;
}
.orange {
background-color: #f5a000;
}
<div class="row">
<strong>Key: </strong>
<div class="box red"> </div>
<span> Red </span>
<div class="box orange"></div>
<span> Orange </span>
<br>
<em>Darker color corresponds to hotter temp</em>
</div>
One Word: Flexbox
.row {
width: 570px;
border: 1px solid lightgray;
border-style: solid;
margin: 0 auto;
border-radius: 3px;
padding-left: 90px;
padding-top: 20px;
padding-bottom: 20px;
text-indent: -46px;
line-height: 2;
}
.box {
height: 18px;
width: 18px;
margin-right: 5px;
}
.red {
background-color: #ab3025;
}
.orange {
background-color: #f5a000;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.container-item {
margin-left: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.container-item > div {
margin-right: 50px;
}
<div class="row">
<div class="container">
<strong>Key: </strong>
<div class="container-item">
<div class="box red"> </div>
<span>Red</span>
</div>
<div class="container-item">
<div class="box orange"> </div>
<span>Orange</span>
</div>
</div>
<br>
<em>Darker color corresponds to hotter temp</em>
</div>
You can check below code
.row {
width: 570px;
border: 1px solid lightgray;
border-style: solid;
margin: 0 auto;
border-radius: 3px;
padding-left: 5rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
line-height: 2;
}
.box-text,.box {
width: 20px;
height: 20px;
margin-right: 0.4rem;
}
.box {display: inline-block;}
.red {
background-color: #ab3025;
}
.orange {
background-color: #f5a000;
}
<div class="row">
<div class="col-12">
<strong>Key:</strong>
<div class="box red"></div>
<span class='box-text'>Red</span>
<div class="box orange"></div>
<span class='box-text'>Orange</span>
<br>
<em>Darker color corresponds to hotter temp</em>
</div>
</div>
.row{
display: flex;
justify-content: space-around;
}
just add these lines in your "row" class.
in addition, you must learn "flexbox" in css. It really helps a lot in designing frontend of a website.
I don't understand where I made a mistake, I want this round logo on the right. and I want the header below, but where's my fault?
If we briefly summarize the event, as shown in the pictures ..
<div class="video-clip mb-5">
<div class="clip-pic">
<img src="https://www.chiquita.com/wp-content/uploads/2019/12/Chiquita_Banana_Class_Extra_Yellow.jpg" alt="" width="">
</div>
<div class="clip-detail mt-2">
<div class="clip-logo">
<img src="https://www.chiquita.com/wp-content/uploads/2019/12/Chiquita_Banana_Class_Extra_Yellow.jpg" alt="" class="img-circle">
</div>
<div class="clip-desc">
<div class="clip-category">Category Title</div>
<div class="clip-title">Clip Title</div>
</div>
</div>
</div>
.video-clip {
width: 305px;
height: 265px;
}
.clip-pic img {
width: 305px;
height: 180px;
}
.clip-detail {
background-color: black;
display: flex;
margin: 0;
padding: 0;
}
.clip-logo {
width: 80px;
height: 80px;
overflow: hidden;
border: 5px solid #0b75c9;
position: relative;
top: -50px;
max-width: 100%;
max-height: 100%;
border-radius: 50%;
}
.clip-desc {
flex: 1;
min-width: 1px;
position: relative;
}
the image i want
i created
I made a quick remake. I hope this can help you.
.card {
width: 300px;
display: flex;
flex-direction: column;
}
.card-pic img {
width: 100%;
height: 100%;
max-height: 350px;
object-fit: cover;
}
.card-info-logo {
position: absolute;
right: 22px;
top: -22px;
}
.card-info-logo img {
width: 40px;
border-radius: 50%;
border: 4px solid gray;
}
.card-info {
position: relative;
background-color: black;
height: 100px;
padding: 15px;
display: flex;
flex-direction: column;
}
.card-info-top {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-info .title {
color: lightgray;
font-size: 14px;
}
.card-info .subtitle {
color: lightgray;
font-size: 18px;
padding-bottom: 10px;
}
.card-info-bottom {
border-top: solid 1px white;
padding-top: 10px;
display: flex;
align-items: center;
line-height: 1;
justify-content: space-between;
}
.card-info .card-info-bottom .views{
color: lightgray;
font-size: 12px;
}
.card-info .card-info-bottom .date {
color: lightgray;
font-size: 12px;
}
<div class="card">
<div class="card-pic">
<img src="https://www.chiquita.com/wp-content/uploads/2019/12/Chiquita_Banana_Class_Extra_Yellow.jpg" alt="">
</div>
<div class="card-info">
<div class="card-info-logo">
<img src="https://www.chiquita.com/wp-content/uploads/2019/12/Chiquita_Banana_Class_Extra_Yellow.jpg">
</div>
<div class="card-info-top">
<div class="title">This is a title</div>
<div class="subtitle">This is a subtitle</div>
</div>
<div class="card-info-bottom">
<div class="views">
VIEWS 10K
</div>
<div class="date">
yesterday
</div>
</div>
</div>
</div>
I have a issue about a position of div.
I want to put my div "list-button" in the bottom of the main div "list".
And i want that the position will not change with the size of the text above. Actually the position depend of the text, so it is not what i want
Example from application
.list {
border: 1px solid grey;
display: flex;
margin: 30px;
height: 230px;
border-radius: 10px;
box-shadow: 1px 1px 12px #555;
}
.list-img {
width: 20%;
}
img {
width: 100%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.list-content {
width: 100%;
margin-left: 20px;
margin-right: 20px;
}
.list-title {
border-bottom: 1px solid grey;
display: flex;
justify-content: space-between;
padding-top: 10px;
}
.list-button {
border: 3px solid blue;
display: flex;
justify-content: center;
}
<div class="list">
<div class="list-img" *ngIf="moviePoster; else notFound">
<img src="https://image.tmdb.org/t/p/w200/{{moviePoster}}" alt="...">
</div>
<ng-template #notFound>
<div class="list-img">
<img src="../../assets/not_found.jpg" alt="...">
</div>
</ng-template>
<div class="list-content">
<div class="list-title">
<h4>{{movieTitle}}</h4>
<h5>{{movieVote}}</h5>
</div>
<div class="list-date">
<p>
{{movieDate | date: 'dd MMMM, y' }}
</p>
</div>
<div *ngIf="movieText; else loremBlock">
<p>{{movieText | slice:0:300 }}...</p>
</div>
<div>
<ng-template #loremBlock>
<p>Oups, overview not found !</p>
</ng-template>
</div>
<div class="list-button">
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
Thanks you for help me.
You may use position: absolute; to .list-button and position: relative; to .list to position the text to the bottom of .list container.
.list {
...
position: relative;
}
.list-button {
position: absolute;
bottom: 0;
left: 20%;
width: calc(100% - 20% - 20px);
...
}
.list {
border: 1px solid grey;
display: flex;
margin: 30px;
height: 230px;
border-radius: 10px;
box-shadow: 1px 1px 12px #555;
position: relative;
}
.list-img {
width: 20%;
}
img {
width: 100%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.list-content {
width: 100%;
margin-left: 20px;
margin-right: 20px;
}
.list-title {
border-bottom: 1px solid grey;
display: flex;
justify-content: space-between;
padding-top: 10px;
}
.list-button {
position: absolute;
bottom: 0;
left: 20%;
width: calc(100% - 20% - 20px);
border: 3px solid blue;
display: flex;
justify-content: center;
}
<div class="list">
<div class="list-img" *ngIf="moviePoster; else notFound">
<img src="https://picsum.photos/id/500/200/230" alt="...">
</div>
<ng-template #notFound>
<div class="list-img">
<img src="../../assets/not_found.jpg" alt="...">
</div>
</ng-template>
<div class="list-content">
<div class="list-title">
<h4>{{movieTitle}}</h4>
<h5>{{movieVote}}</h5>
</div>
<div class="list-date">
<p>
{{movieDate | date: 'dd MMMM, y' }}
</p>
</div>
<div *ngIf="movieText; else loremBlock">
<p>{{movieText | slice:0:300 }}...</p>
</div>
<div>
<ng-template #loremBlock>
<p>Oups, overview not found !</p>
</ng-template>
</div>
<div class="list-button">
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
You could achieve that by applying the property align-self: end;or justify-self: end; for the .list-button.
For that, it is required that the parent element has the display: flex; property.
I'm working on creating UI (header, grid, and buttons) and would like it to be the same on every mobile screen. These are the screenshots from different mobile screens right now:
Samsung S5
Pixel 2 XL
Ipad
I'd like the grid in Pixel 2 XL and Ipad to scale like it's scaled in Samsung S5, i.e. in those two screenshots there is a decent amount of white space after Exit button.
I'd like those buttons be on the bottom of the screen, header - on the very top, and the rest covered by the grid.
I feel like I'm doing something wrong with assigning height of the grid - if I make it higher then the buttons would be beyond in Samsung S5. Could somebody help me out with that ?
Code:
HTML:
<div className="component">
<div className="header">
<h3 className="header-title">
Let's play!
</h3>
<div>
Click the tiles!
</div>
</div>
<div className="grid">
<div className="box"><div className="inner">1</div></div>
<div className="box"><div className="inner">2</div></div>
<div className="box"><div className="inner">3</div></div>
<div className="box"><div className="inner">4</div></div>
<div className="box"><div className="inner">5</div></div>
<div className="box"><div className="inner">6</div></div>
</div>
<div className="buttonAndInput">
<div className="button">
<button
className="primary button-continue">
Start the Game
</button>
</div>
<div className="link">
<a
className="link-text">
Exit
</a>
</div>
</div>
</div>
CSS:
.component {
width: 100%;
height: 100%;
background-color: white;
text-align: center;
}
.header {
margin: 1rem 0;
height: 10%;
}
.grid {
margin: 0 auto;
width: 90%;
height: 70%;
display: flex;
flex-wrap: wrap;
}
.box {
width: 44%;
margin: 5px;
color: black;
font-weight: bold;
flex: 1 0 auto;
position: relative;
border: 1px solid #d2d2d2;
border-radius: 5px;
background: white;
cursor: pointer;
text-align: center;
}
.box .inner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.buttonAndInput {
width: 100%;
height: 20%;
margin-top: 0.5rem;
background-color: white;
animation-fill-mode: backwards;
}
.input-text {
width: 100%;
height: 35px;
font-size: 0.833rem;
padding: 0 1rem;
border-radius: 5px;
border: 1px solid #d2d2d2;
-webkit-appearance: none;
-moz-appearance: none;
}
.button {
margin-top: 0.5rem;
&-continue {
height: 35px;
width: 250px;
padding: 0 !important;
}
}
.link {
margin-top: 0.5rem;
a {
text-align: center;
}
}
Give your .component a height: 100vh and flex each of the children (.header, .grid and .buttonAndInput)
html,
body {
margin: 0;
}
.component {
height: 100vh;
text-align: center;
display: flex;
flex-direction: column;
}
.header {
padding: 1rem 0;
flex: 1 1 10%;
}
.grid {
width: 90%;
margin: 0 auto;
flex: 1 1 70%;
display: flex;
flex-wrap: wrap;
}
.box {
flex: 1 1 50%;
position: relative;
cursor: pointer;
}
.box .inner {
border-radius: 5px;
margin: 5px;
border: 1px solid #d2d2d2;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.buttonAndInput {
width: 100%;
flex: 1 1 20%;
padding-top: 0.5rem;
}
.button {
margin-top: 0.5rem;
}
.button-continue {
height: 35px;
width: 250px;
}
.link {
margin-top: 0.5rem;
}
.link a {
text-align: center;
}
<div class="component">
<div class="header">
<h3 class="header-title">
Let's play!
</h3>
<div>
Click the tiles!
</div>
</div>
<div class="grid">
<div class="box">
<div class="inner">1</div>
</div>
<div class="box">
<div class="inner">2</div>
</div>
<div class="box">
<div class="inner">3</div>
</div>
<div class="box">
<div class="inner">4</div>
</div>
<div class="box">
<div class="inner">5</div>
</div>
<div class="box">
<div class="inner">6</div>
</div>
</div>
<div class="buttonAndInput">
<div class="button">
<button class="primary button-continue">
Start the Game
</button>
</div>
<div class="link">
<a class="link-text">
Exit
</a>
</div>
</div>
</div>