I have tired a few of the different solutions on here but I can't get anything to work. So I was wondering if anyone had any other ideas.
I have created a the makings of a webpage using flexbox to lay everything out so it is nice and responsive.
However I am stuck, in one of my flexbox containers I would like to have a image centred with text centred over the top of that.
This container is the "container-stack pink" container with the "bulb" img and text
Here is a link to a codepen of my webpage. I have added placeholder images and havent copied any of the Javascript in as it isnt really import for the layout
Thanks for any help/suggestions in advance...
<html>
<head>
<link rel="stylesheet" href="https://use.typekit.net/nqr5bmw.css">
</head>
<body>
<div class="container green">
<div class="right-side">
<img id="raw-logo" src="http://via.placeholder.com/300x100" alt="raw-logo">
</div>
<div class="centered mash">
<img id="mash-logo" src="http://via.placeholder.com/700x500" alt="mash-up-img">
</div>
</div>
<div class="container pink">
<div class="centered fancy-header">
<p id="fancy-text1">Bacon ipsum<br>dolor amet</p>
</div>
<div class="centered fancy-body">
<p id="fancy-text2">Bacon ipsum dolor amet tail pancetta ribeye<br>beef turkey ball tip.</p>
</div>
<div class="centered scroll">
<p id="fancy-text3">keep scrolling</p>
button here
</div>
</div>
<div class="container-row blue">
<img id="masher" src="http://via.placeholder.com/700x500" alt="masher-img">
<div id="brief-text">
<p><span id="header">bacon</span><br><span id="subheader">in short...</span></p>
<p class="body">tasty</p>
<p class="body">Bacon ipsum Bacon ipsum Bacon ipsum<br>Bacon ipsum Bacon ipsum Bacon ipsum Bacon ipsum<br>amet tail pancetta ribeye</p>
</div>
</div>
<div class="container-stack pink">
<div id="wrapper">
<img id="bulb" src="http://via.placeholder.com/500x300" alt="bulb-img">
<div id="bulb-text">
<p>Bacon ipsum dolor amet<br>tail pancetta ribeye beef<br>turkey ball tip.</p>
<p>Andouille prosciutto<br>ground round jowl jerky.</p>
</div>
</div>
</div>
<div class="container generator">
<div class="centered text">
<div class="word-1">Peanut Butter</div>
<div class="word-2">Water Lily Seeds</div>
</div>
<div class="centered">
<button class="button">Mash!</button>
</div>
</div>
</body>
</html>
CSS:
body {
font-family: bebas-neue-by-fontfabric;
font-weight: 700;
text-align: center;
text-transform: uppercase;
background-color: black;
width: 100%;
height: 100%;
margin: 0;
}
.blue {
background-color: skyblue;
}
.pink {
background-color: pink;
}
.green {
background-color: chartreuse;
}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
width: 100%;
margin: 0;
padding: 0;
}
.container-row {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
margin: 0;
padding: 0;
}
.container-stack {
display: flex;
justify-content: center;
width: 100%;
margin: 0;
padding: 0;
}
.centered {
flex: 0 0 100%;
align-self: center;
}
.right-side {
border: 1px solid blue;
flex: 0 0 100%;
align-self: flex-end;
}
.left-side {
border: 1px solid orange;
flex: 0 0 100%;
align-self: flex-start;
}
#raw-logo {
width: 13.3vw;
max-width: 150px;
}
#mash-logo {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
.fancy-header{
border: 1px solid blue;
font-size: 15vw;
}
.fancy-body {
border: 1px solid red;
font-size: 3vw;
}
#fancy-text1 {
margin: 0;
}
#fancy-text2 {
margin-top: 7vw;
}
#masher {
width: 40%;
margin-left: 10%;
}
#brief-text {
margin-left: 5%;
margin-right: 10%;
align-self: center;
}
#header {
font-size: 11vw;
}
#subheader {
font-size: 5vw;
}
.body {
font-size: 2.5vw;
}
#wrapper {
position: relative;
}
#bulb {
width: 40%;
}
.container {
position: relative;
text-align: center;
color: black;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img src="http://via.placeholder.com/500x300" alt="Snow" style="width:100%;">
<div class="centered">
<p>Bacon ipsum dolor amet<br>tail pancetta ribeye beef<br>turkey ball tip.</p>
<p>Andouille prosciutto<br>ground round jowl jerky.</p>
</div>
</div>
Perhaps there is a few way of doing it. If your image is big enought and you don't want to make it as background you could do something like that
#bulb-text{
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
transform: translateX(-50%) translateY(-50%);
}
Why don't you just use background images?
body {
font-family: bebas-neue-by-fontfabric;
font-weight: 700;
text-align: center;
text-transform: uppercase;
background-color: black;
width: 100%;
height: 100%;
margin: 0;
}
.blue {
background-color: skyblue;
}
.pink {
background-color: pink;
}
.green {
background-color: chartreuse;
}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
width: 100%;
margin: 0;
padding: 0;
}
.container-row {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
margin: 0;
padding: 0;
}
.container-stack {
display: flex;
justify-content: center;
width: 100%;
margin: 0;
padding: 0;
}
.centered {
flex: 0 0 100%;
align-self: center;
}
.right-side {
border: 1px solid blue;
flex: 0 0 100%;
align-self: flex-end;
}
.left-side {
border: 1px solid orange;
flex: 0 0 100%;
align-self: flex-start;
}
#raw-logo {
width: 13.3vw;
max-width: 150px;
}
#mash-logo {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
.fancy-header{
border: 1px solid blue;
font-size: 15vw;
}
.fancy-body {
border: 1px solid red;
font-size: 3vw;
}
#fancy-text1 {
margin: 0;
}
#fancy-text2 {
margin-top: 7vw;
}
#masher {
width: 40%;
margin-left: 10%;
}
#brief-text {
margin-left: 5%;
margin-right: 10%;
align-self: center;
}
#header {
font-size: 11vw;
}
#subheader {
font-size: 5vw;
}
.body {
font-size: 2.5vw;
}
#wrapper {
position: relative;
}
#bulb {
width: 40%;
}
.container-stack #wrapper{
background-image:url("http://via.placeholder.com/500x300");
background-size:cover;
background-position:center;
padding: 3vw;
}
<html>
<head>
<link rel="stylesheet" href="https://use.typekit.net/nqr5bmw.css">
</head>
<body>
<div class="container green">
<div class="right-side">
<img id="raw-logo" src="http://via.placeholder.com/300x100" alt="raw-logo">
</div>
<div class="centered mash">
<img id="mash-logo" src="http://via.placeholder.com/700x500" alt="mash-up-img">
</div>
</div>
<div class="container pink">
<div class="centered fancy-header">
<p id="fancy-text1">Bacon ipsum<br>dolor amet</p>
</div>
<div class="centered fancy-body">
<p id="fancy-text2">Bacon ipsum dolor amet tail pancetta ribeye<br>beef turkey ball tip.</p>
</div>
<div class="centered scroll">
<p id="fancy-text3">keep scrolling</p>
button here
</div>
</div>
<div class="container-row blue">
<img id="masher" src="http://via.placeholder.com/700x500" alt="masher-img">
<div id="brief-text">
<p><span id="header">bacon</span><br><span id="subheader">in short...</span></p>
<p class="body">tasty</p>
<p class="body">Bacon ipsum Bacon ipsum Bacon ipsum<br>Bacon ipsum Bacon ipsum Bacon ipsum Bacon ipsum<br>amet tail pancetta ribeye</p>
</div>
</div>
<div class="container-stack pink">
<div id="wrapper">
<div id="bulb-text">
<p>Bacon ipsum dolor amet<br>tail pancetta ribeye beef<br>turkey ball tip.</p>
<p>Andouille prosciutto<br>ground round jowl jerky.</p>
</div>
</div>
</div>
<div class="container generator">
<div class="centered text">
<div class="word-1">Peanut Butter</div>
<div class="word-2">Water Lily Seeds</div>
</div>
<div class="centered">
<button class="button">Mash!</button>
</div>
</div>
</body>
</html>
I have added some padding to the Wrapper so the text is not so bunched to the end of the tag.
.container-stack #wrapper{
background-image:url("http://via.placeholder.com/500x300");
background-size:cover;
background-position:center;
padding: 3vw;
}
...I would like to have a[sic] image centred[sic] with text centred[sic] over the top of that.
The following changes should move the text above image and keep it centered.
#wrapper {
...
display: flex;
flex-direction: column-reverse;
align-items: center;
}
body {
font-family: bebas-neue-by-fontfabric;
font-weight: 700;
text-align: center;
text-transform: uppercase;
background-color: black;
width: 100%;
height: 100%;
margin: 0;
}
.blue {
background-color: skyblue;
}
.pink {
background-color: pink;
}
.green {
background-color: chartreuse;
}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
width: 100%;
margin: 0;
padding: 0;
}
.container-row {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
margin: 0;
padding: 0;
}
.container-stack {
display: flex;
justify-content: center;
width: 100%;
margin: 0;
padding: 0;
}
.centered {
flex: 0 0 100%;
align-self: center;
}
.right-side {
border: 1px solid blue;
flex: 0 0 100%;
align-self: flex-end;
}
.left-side {
border: 1px solid orange;
flex: 0 0 100%;
align-self: flex-start;
}
#raw-logo {
width: 13.3vw;
max-width: 150px;
}
#mash-logo {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
.fancy-header{
border: 1px solid blue;
font-size: 15vw;
}
.fancy-body {
border: 1px solid red;
font-size: 3vw;
}
#fancy-text1 {
margin: 0;
}
#fancy-text2 {
margin-top: 7vw;
}
#masher {
width: 40%;
margin-left: 10%;
}
#brief-text {
margin-left: 5%;
margin-right: 10%;
align-self: center;
}
#header {
font-size: 11vw;
}
#subheader {
font-size: 5vw;
}
.body {
font-size: 2.5vw;
}
#wrapper {
position: relative;
display: flex;
flex-direction: column-reverse;
align-items: center;
}
#bulb {
width: 40%;
}
<html>
<head>
<link rel="stylesheet" href="https://use.typekit.net/nqr5bmw.css">
</head>
<body>
<div class="container green">
<div class="right-side">
<img id="raw-logo" src="http://via.placeholder.com/300x100" alt="raw-logo">
</div>
<div class="centered mash">
<img id="mash-logo" src="http://via.placeholder.com/700x500" alt="mash-up-img">
</div>
</div>
<div class="container pink">
<div class="centered fancy-header">
<p id="fancy-text1">Bacon ipsum<br>dolor amet</p>
</div>
<div class="centered fancy-body">
<p id="fancy-text2">Bacon ipsum dolor amet tail pancetta ribeye<br>beef turkey ball tip.</p>
</div>
<div class="centered scroll">
<p id="fancy-text3">keep scrolling</p>
button here
</div>
</div>
<div class="container-row blue">
<img id="masher" src="http://via.placeholder.com/700x500" alt="masher-img">
<div id="brief-text">
<p><span id="header">bacon</span><br><span id="subheader">in short...</span></p>
<p class="body">tasty</p>
<p class="body">Bacon ipsum Bacon ipsum Bacon ipsum<br>Bacon ipsum Bacon ipsum Bacon ipsum Bacon ipsum<br>amet tail pancetta ribeye</p>
</div>
</div>
<div class="container-stack pink">
<div id="wrapper">
<img id="bulb" src="http://via.placeholder.com/500x300" alt="bulb-img">
<div id="bulb-text">
<p>Bacon ipsum dolor amet<br>tail pancetta ribeye beef<br>turkey ball tip.</p>
<p>Andouille prosciutto<br>ground round jowl jerky.</p>
</div>
</div>
</div>
<div class="container generator">
<div class="centered text">
<div class="word-1">Peanut Butter</div>
<div class="word-2">Water Lily Seeds</div>
</div>
<div class="centered">
<button class="button">Mash!</button>
</div>
</div>
</body>
</html>
Related
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.
this is how I want the final organization to lookI have two images and some text, I cannot sort out how to properly situate them so that the image on the left is smaller and also so that the entire div moves with my page when it's scaled up and down
HTML:
<div class="container">
<!-- ------------------------------ Section 1 ------------------------------ -->
<section class="sec-1">
<img class="img-1" src="./images/image-1.jpeg" alt="blue van driving on a highway at the base of a mountain.">
<div class="feature-box-1">
<img class="img-2" src="./images/image-2.jpeg" alt= "small row boat, aerial view, large body of water.">
<h4>FEATURE</h4>
<h2>Lorem ipsum dolor sit amet, consectetur.</h2>
<a class="button" href="#">read more</a>
</div>
</section>
CSS:
/* -------------------------------- Section 1 ------------------------------- */
.container {
margin: 0 auto;
max-width: 1100px;
width: 85%;
}
.sec-1 {
border: 5px solid red;
display: flex;
margin-top: 125px;
margin-bottom: 25px;
}
.feature-box-1 {
background:#F6F8FA;
margin-left: 35px;
text-align: center;
}
.img-1 {
max-height: 650px;
height: 100%;
}
.img-2 {
width: 100%;
height: auto;
}
.sec-1 h4 {
color: #777777;
}
.sec-1 h2 {
font-size: 39px;
}
You just need to put them in containers for example .aside-left .aside-right and inside .aside-right you can add container .top and .bottom
<style>
/* -------------------------------- Section 1 ------------------------------- */
.container {
display: flex;
width: 70%;
margin: auto;
height: 600px;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.aside-left {
display: flex;
width: 30%;
height: 100%;
}
.aside-right {
margin-left: 2%;
width: 68%;
height: 100%;
border: 1px solid red;
}
.aside-left img {
width: 100%;
height: 100%;
}
.aside-right .top {
width: 100%;
height: 45%;
}
.aside-right .bottom {
width: 100%;
height: 55%;
}
.sec-1 h4 {
color: #777777;
}
.sec-1 h2 {
font-size: 39px;
}
</style>
<div class="container">
<!-- ------------------------------ Section 1 ------------------------------ -->
<section class="aside-left">
<img class="img-1" src="" alt="blue van driving on a highway at the base of a mountain.">
</section>
<section class="aside-right">
<div class="top">
<img class="img-2" src="./images/image-2.jpeg" alt="small row boat, aerial view, large body of water.">
</div>
<div class="bottom">
<h4>FEATURE</h4>
<h2>Lorem ipsum dolor sit amet, consectetur.</h2>
<a class="button" href="#">read more</a>
</div>
</section>
</div>
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 run into this problem I just can't fix and I believe it is due to the margin being so big.
The problem is that I would like 3 images beside each other on my website but they don't want to be next to each other because I believe the margin is so big.
I am very new to coding sorry if I'm missing something.
body {
background-color: AliceBlue;
font-family: "Helvetica", sans-serif;
color: black;
}
.arms {
height: 300px;
border-radius: 10px;
left: 300px;
}
#imgarms {
left: 300px;
}
a {
display: block;
width: 400px;
height: 320px;
border: 2px solid #F0FFFF;
border-radius: 10px;
box-sizing: border-box;
padding: 10px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
z-index: 10;
}
a:hover {
border-color: black;
}
.title {
position: absolute;
left: -20px;
}
.title {
position: relative;
margin-left: auto;
margin-right: auto;
left: -30;
}
#title {
width: 800px;
height: 400px;
margin-left: auto;
margin-right: auto;
z-index: 0;
}
.abs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.shoulders {
height: 300px;
border-radius: 10px;
left: 300px;
}
.back {
height: 300px;
border-radius: 10px;
left: 300px;
}
.legs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.chest {
height: 300px;
border-radius: 10px;
left: 300px;
}
.cardContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 10px;
}
<body>
<div id="title" class="title">
<img id="title" class="title" src="https://trinket-user-assets.trinket.io/4e936b48ef16b9730de36cbbaec1c6c1e4988efc-5ea104f02cc0c3264f51231e.png" alt="title" />
</div>
<div class="cardContainer">
<a href="arms.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8c41ed921e47afbbd3c097a06f8d44186fabf24e-5e9faf172cc0c3264f47ec6b.png" class="arms">
</article>
</a>
<a href="abs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8a1dbd5f8fcbc27772e44b9edadb3eea4d5f8e3d-5e9faf172cc0c3264f47ec6a.png" class="abs">
</article>
</a>
<a href="shoulders.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/6ba09699551ac1bc979673bbf99fee75b4064d10-5e9faf182cc0c3264f47ec71.png" class="shoulders">
</article>
</a>
<a href="back.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/a6776f95e6b7868be91d5aa0e89710e64e62fff8-5e9faf182cc0c3264f47ec6d.png" class="back">
</article>
</a>
<a href="legs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/b628c0bca25058c3dac2cffcaff1ae4552522e7e-5e9faf182cc0c3264f47ec70.png" class="legs">
</article>
</a>
<a href="chest.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/373f3cbc6207fa4f67b4bcccb42f3b344c3fd10b-5e9faf182cc0c3264f47ec6f.png" class="chest">
</article>
</a>
</div>
</body>
I assume that you are trying to stick the images on your main page together. This is caused by the margins on your a tags together with the justify-content: space-around; of the .cardContainer.
To make the images stick together, remove the margins in the a and change justify-content: center in .cardContainer.
Your code with my modifications is added below.
When you use justify-content: space-around; the remaining space that elements can't take, will be spread around the items. This is displayed in the image (and snippet) below. This has space between items even though there is no margin.
.item{
background: lightgreen;
border: 2px solid darkgreen;
width: 100px;
height: 100px;
}
.wrapper{
justify-content: space-around;
display: flex;
flex-wrap: wrap;
height: 300px;
width: 390px;
padding: 10px;
background: lightblue;
border: 2px dotted darkblue;
}
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
When you use justify-content: center; instead, the remaining space where elements can't go will only be added to the left and to the right of the content. So it gets centered and there will be no space inbetween the items (except if you set a margin or padding).
.item{
background: lightgreen;
border: 2px solid darkgreen;
width: 100px;
height: 100px;
}
.wrapper{
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 300px;
width: 390px;
padding: 10px;
background: lightblue;
border: 2px dotted darkblue;
}
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Your modified code:
body {
background-color: orange;
}
body {
background-color: AliceBlue;
font-family: "Helvetica", sans-serif;
color: black;
}
nav ul {
background-color: tomato;
}
.arms {
height: 300px;
border-radius: 10px;
left: 300px;
}
#imgarms {
left: 300px;
}
a {
display: block;
width: 400px;
height: 320px;
border: 2px solid #F0FFFF;
border-radius: 10px;
box-sizing: border-box;
/* remove this padding to make the images really stick together */
padding: 10px;
z-index:10;
}
a:hover {
border-color: black;
}
.title {
position: absolute;
left:-20px;
}
.title {
position: relative;
margin-left: auto;
margin-right: auto;
left:-30;
}
#title {
width: 800px;
height: 400px;
margin-left: auto;
margin-right: auto;
z-index: 0;
}
.abs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.shoulders {
height: 300px;
border-radius: 10px;
left: 300px;
}
.back {
height: 300px;
border-radius: 10px;
left: 300px;
}
.legs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.chest {
height: 300px;
border-radius: 10px;
left: 300px;
}
.cardContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
}
/**********************************
This section is for styling tables
***********************************/
table, th, td {
border: 1px solid HoneyDew;
border-collapse: collapse;
}
tr {
background-color: PaleTurquoise;
}
th, td {
vertical-align: top;
padding: 5px;
text-align: left;
}
th {
color: purple;
}
td {
color: purple;
}
/********************************/
<!DOCTYPE html>
<html>
<head>
<title>Get Fit</title>
<link type="text/css" rel="stylesheet" href="styles.css"/>
<meta charset="utf-8"/>
</head>
<body>
<header>
</header>
<main>
<div id="title" class="title">
<img id="title" class="title" src="https://trinket-user-assets.trinket.io/4e936b48ef16b9730de36cbbaec1c6c1e4988efc-5ea104f02cc0c3264f51231e.png" alt="title" />
</div>
<div class="cardContainer">
<a href="arms.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8c41ed921e47afbbd3c097a06f8d44186fabf24e-5e9faf172cc0c3264f47ec6b.png" class="arms">
</article>
</a>
<a href="abs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8a1dbd5f8fcbc27772e44b9edadb3eea4d5f8e3d-5e9faf172cc0c3264f47ec6a.png" class="abs">
</article>
</a>
<a href="shoulders.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/6ba09699551ac1bc979673bbf99fee75b4064d10-5e9faf182cc0c3264f47ec71.png" class="shoulders">
</article>
</a>
<a href="back.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/a6776f95e6b7868be91d5aa0e89710e64e62fff8-5e9faf182cc0c3264f47ec6d.png" class="back">
</article>
</a>
<a href="legs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/b628c0bca25058c3dac2cffcaff1ae4552522e7e-5e9faf182cc0c3264f47ec70.png" class="legs">
</article>
</a>
<a href="chest.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/373f3cbc6207fa4f67b4bcccb42f3b344c3fd10b-5e9faf182cc0c3264f47ec6f.png" class="chest">
</article>
</a>
</div>
</main>
<footer>
</footer>
</body>
</html>
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>