I am trying to build simple landing looking at figma. The problem I am facing is with photo inside flexbox. In the line I have image->description->image. I made this in the single row line. Last image on the ride side should get 2/3 of the screen,I want it to stay right after paragraph and here is the result.If I make image bigger it will jump into bottom.Using flex didnt help. The issue line starts from "Div class="Main-content" in css and html.Please I need your advice.Thanks in advance
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
display: flex;
flex-wrap: wrap;
width: 70%;
margin: auto;
align-items: center;
}
.logo {
justify-content: flex-start;
padding: 25px 15px 0px 0px;
}
.site-desc {
width: 300px;
justify-content: flex-end;
padding: 30px 15px 0px 10px;
font-size: 12px;
}
.contact-info {
justify-content: flex-end;
text-align: center;
flex: 1;
padding: 25px 0px 0px 0px;
}
.contact-info img {
padding: 0px 5px 0px 0px;
}
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 70%;
margin: auto;
}
.introduction {
font-weight: 700;
font-size: 30px;
line-height: 45px;
align-self: flex-start;
padding: 30px 0px 0px 0px;
width: 100%;
}
span {
color: orangered;
}
.kitchen-types {
padding: 30px 0px 0px 0px;
font-size: 33px;
align-self: flex-start;
font-weight: 300;
}
.main-content {
display: flex;
flex-wrap: wrap;
width: 70%;
margin: auto;
padding-top: 5rem;
padding-left: 2.5rem;
position: relative;
height: 70vh;
background: tomato;
justify-content: flex-start;
align-items: flex-start;
}
.left-side {
position: relative;
}
.art-board {
position: absolute;
right: 100px;
bottom: 185px;
}
.main-content-text {
position: relative;
font-size: 17px;
padding: 15px 20px 0px 28px;
line-height: 20px;
}
.arrow {
position: absolute;
bottom: 220px;
right: 30rem;
}
.left-side-text {
position: relative;
padding-left: 15px;
}
.short-desc-2 {
padding-top: 10px;
}
.yellow-checked {
position: absolute;
}
.yellow-checked-2 {
position: absolute;
top: 30;
}
.yellow-checked-2,
.yellow-checked {
right: 99%;
}
.main-content-text h4 {
padding-bottom: 20px;
width: 52%;
}
.left-side-cover {
flex: 2;
}
.left-side-cover img {
height: 30vh;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Like Mebel</title>
</head>
<body>
<header>
<div class="logo">
<img src="images/frame.svg" alt="frame">
</div>
<div class="site-desc">
<p>Изготавливаем и устанавливаем кухни в Москве и области с 2004 года</p>
</div>
<div class="contact-info">
<h2>+7 (995) 508-51-17</h2>
<p><img src="images/online.svg">сейчас работаем</p>
</div>
</header>
<main>
<section class="container">
<div class="introduction">
<h2 class="text-color-type">
Современные Комфортные Кухни <span><br/>с пожизненной гарантией</span>
</h2>
<h2 class="kitchen-types">Тренды дизайна кухни 2020 г.</h2>
</div>
</section>
<div class="main-content">
<div class="left-side">
<img src="images/image163.png">
<img class="art-board" src="images/Artboard21.png" alt="">
</div>
<div class="main-content-text">
<h4>Максимальное использование пространства и простота в уходе</h4>
<img class="arrow" src="images/Vector.png" alt="vector">
<div class="left-side-text">
<img class="yellow-checked" src="images/Group 839.png" alt="group">
<p class="short-desc">Гладкие, ровные поверхности без ручек</p>
<img class="yellow-checked-2" src="images/Group 839.png" alt="group">
<p class="short-desc-2"> «Умные» материалы фасадов —<br/> нет отпечатков и царапин</p>
</div>
</div>
<div class="left-side-cover">
<img src="images/Group87.png">
</div>
</div>
</main>
</body>
</html>
Sorry i am not allowed to comment yet, but try putting a width:auto; or whatever the value you have height set to for the img. and margin-bottom: auto; to
<div class="left-side-cover">
<img src="images/Group87.png">
</div>
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 5 months ago.
I am having trouble. There is a whitespace between the two pages of content. Also I have tried applying margin: auto; and text-align: center; but to no avail I don't know what to do. Also what other things are wrong with the way I implemented my design?
Also I tried to add a gray border around the avatar so that it fits into the navbar but stays exactly where it is.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, intial-scale=1.0"/>
<title>Johnson's Personal Portfolio</title>
</head>
<body>
<nav id="navbar">
<div class="avatar">
<img alt="LordYamanouchi" src="https://avatars.githubusercontent.com/u/20011297?v=3"/>
</div>
<ul>
<li>Alias</li>
<li>About</li>
<li><a href="#">Contacts<a/></li>
<li>Works</li>
</ul>
</nav>
<header id="welcomesection">
<div id="welcome-section">
<h1>
Welcome to Johnson Oluwaseun Adeleke's
</h1>
<h1>
<>Portfolio Page<>
</h1>
<p style="color: blue"><i>I am an aspiring Web Developer</i></p>
</div>
</header>
<section id="projects">
<h2>Here are some of my Projects</h2>
<p></p>
</section>
</body>
</html>
body{
width: 100%;
height: 100%;
margin: 0;
}
#navbar li, a{
list-style-type: none;
display: inline-block;
padding: 4px;
float: right;
color: black; font-weight: normal;
font-style: Helvetica, sans-serif;
font-size: 15px;
vertical-align: center;
}
nav{
width: 100%;
display:block;
background-color:red;
position: fixed;
height: 50px;
top: 0;
left: 0;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
#welcomesection{
float: clear;
display: flex;
align-items: center;
width: 100%;
height: 120vh;
text-align: center;
background-color: teal;
z-index: 1;
}
h1{
margin: auto;
}
#welcomesection p{
text-align: center;
}
.avatar img{
width: auto;
height: 50px;
float: left;
left: 15px;
top: 0;
padding: 15px solid grey;
}
#projects{
width: 100%;
height: 150vh;
background-color:blue;
}
#projects h2{
text-decoration: underline;
text-align: center;
}
Is the h2 margin you can remove it and add a padding
body {
width: 100%;
height: 100%;
margin: 0;
}
#navbar li,
a {
list-style-type: none;
display: inline-block;
padding: 4px;
float: right;
color: black;
font-weight: normal;
font-style: Helvetica, sans-serif;
font-size: 15px;
vertical-align: center;
}
nav {
width: 100%;
display: block;
background-color: red;
position: fixed;
height: 50px;
top: 0;
left: 0;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
#welcomesection {
float: clear;
display: flex;
align-items: center;
width: 100%;
height: 120vh;
text-align: center;
background-color: teal;
z-index: 1;
}
h1 {
margin: auto;
}
#welcomesection p {
text-align: center;
}
.avatar img {
width: auto;
height: 50px;
float: left;
left: 15px;
top: 0;
padding: 15px solid grey;
}
#projects {
width: 100%;
height: 150vh;
background-color: blue;
}
#projects h2 {
text-decoration: underline;
text-align: center;
margin-top: 0;
padding-top: 20px;
}
<nav id="navbar">
<div class="avatar">
<img alt="LordYamanouchi" src="https://avatars.githubusercontent.com/u/20011297?v=3" />
</div>
<ul>
<li>Alias</li>
<li>About</li>
<li><a href="#">Contacts<a/></li>
<li>Works</li>
</ul>
</nav>
<header id="welcomesection">
<div id="welcome-section">
<h1>
Welcome to Johnson Oluwaseun Adeleke's
</h1>
<h1>
<>Portfolio Page
<>
</h1>
<p style="color: blue"><i>I am an aspiring Web Developer</i></p>
</div>
</header>
<section id="projects">
<h2>Here are some of my Projects</h2>
<p></p>
</section>
heres my project and i've been having a hard time trying to figure out the reason why this div "leftCardapio", whenever its zoomed in, the elements inside of it increase their height and width.
i have no ideia what this may be, can someone please gimme a hand?
appreciate the help.
here is my full projecttt
/* Variables */
:root {
--Gray: #323a3a;
--DarkBlue: #123B79;
--LightBlue: #18A5A7;
--LightGray: #D9D9D9;
--White: white;
}
html,
body {
margin: 0 auto;
user-select: none;
background-color: black;
font-family: 'Arial';
/* overflow: hidden; */
}
/* Order:
Bottom,
Left,
Top,
Content,
Container
*/
/* Container DIV*/
.container {
display: flex;
justify-content: center;
margin: 0 auto;
width: 100vw;
height: 100vh;
}
.content {
text-align: center;
background-color: gray;
position: absolute;
right: 0;
width: 100%;
height: 100%;
}
#img_Content {
height: 97%;
width: 100%;
object-fit: cover;
}
/* Bottom DIV */
.bottom {
display: flex;
flex-direction: column;
position: absolute;
background-color: black;
bottom: 0;
margin-left: 0%;
width: 100%;
height: 10%;
}
/* LEFT DIV */
.left {
display: flex;
flex-direction: column;
column-gap: 10px;
background-color: var(--Gray);
position: absolute;
left: 0;
width: 10%;
height: 100%;
}
.itemDestaque,
.itemCardapio,
.itemBebidas,
.itemReservar_mesa {
display: flex;
flex-direction: column;
padding-top: 10%;
display: inline-block;
vertical-align: middle;
text-align: center;
overflow: hidden;
cursor: pointer;
flex: 1;
}
.itemDestaque {
margin-top: 33%;
}
.itemDestaque,
.itemCardapio,
.itemBebidas,
.itemReservar_mesa span {
font-weight: 550;
overflow: hidden;
color: white;
}
.itemCardapio:hover,
.itemDestaque:hover,
.itemBebidas:hover,
.itemReservar_mesa:hover {
box-shadow: 5px 20px 20px rgba(0, 0, 0, 0.5);
background-color: var(--LightBlue);
}
#destaqueIMG,
#cardapioIMG,
#bebidasIMG,
#reservar_mesaIMG {
height: 80%;
width: 40%;
display: inline-block;
vertical-align: middle;
object-fit: contain;
overflow: hidden;
}
#bebidasIMG {
width: 30%;
}
/* LEFT CARDAPIO DIV */
.leftCardapio {
display: none;
}
.itemCardapio:hover>.leftCardapio {
display: flex;
flex-direction: column;
background-color: white;
text-align: center;
position: absolute;
left: 0;
top: 0;
margin-left: 100%;
width: 250px;
height: 100%;
}
.itemPratos,
.itemSaladas,
.itemSopas,
.itemSobremesas,
.itemMolhos,
.itemPorcoes {
height: 80px;
width: 100%;
background-color: lightgray;
border-bottom: 3px solid white;
}
.itemPratos:hover,
.itemSaladas:hover,
.itemSopas:hover,
.itemSobremesas:hover,
.itemMolhos:hover,
.itemPorcoes:hover {
background-color: var(--DarkBlue);
}
/* LEFT BEBIDAS DIV */
.leftBebidas {
display: none;
}
.itemBebidas:hover>.leftBebidas {
display: flex;
flex-direction: column;
background-color: white;
text-align: center;
position: absolute;
left: 0;
top: 0;
margin-left: 100%;
width: 250px;
height: 100%;
}
.itemBebida1 {
height: 80px;
width: 100%;
background-color: lightgray;
border-bottom: 3px solid white;
}
.itemBebida1:hover {
background-color: var(--DarkBlue);
}
/* TOP DIV */
/* Top Box 1 = Logo Recanto
Top Box 2 = Mesa
Top Box 3 = Pesquisa
Top Box 4 = Conta
Top Box 5 = Pedidos */
.top {
display: flex;
flex-direction: row;
background-color: #123B79;
position: absolute;
top: 0;
width: 100%;
height: 7%;
}
.topBox1 {
display: flex;
flex-direction: row;
flex: 8;
}
.topBox2,
.topBox3,
.topBox4,
.topBox5 {
text-align: center;
cursor: pointer;
flex: 1;
}
.topBox2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: #ffffff;
}
.topBox3,
.topBox4,
.topBox5 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border-right: 1px solid #2fa9ab;
background-color: var(--LightBlue);
}
.topBox2:hover {
transform: scale(1.0);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: #dadada;
}
.topBox3:hover,
.topBox4:hover,
.topBox5:hover {
transform: scale(1.0);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: #4eb9bb;
border-right: none;
}
.imgTopBox1 {
display: flex;
justify-content: center;
align-items: center;
width: 19%;
height: 100%;
}
#logoRecanto {
max-width: 100%;
max-height: 90%;
}
#mesaIMG,
#pesquisarIMG,
#contaIMG,
#pedidosIMG {
width: 20%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
object-fit: contain;
overflow: hidden;
}
#mesaIMG {
filter: invert(0%) sepia(9%) saturate(0%) hue-rotate(130deg) brightness(0%) contrast(0%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./imgs/HMSC_Catavento.png">
<link rel="stylesheet" href="css/style.css">
<title>Restaurante Recanto </title>
</head>
<body>
<div class="container">
<div class="content">
<img src="./imgs/Prato_Content_5.png-" id="img_Content">
</div>
<div class="bottom"></div>
<div class="left">
<div class="itemDestaque">
<img src="./imgs/Destaque.png" id="destaqueIMG">
<br><span> DESTAQUE</span>
</div>
<div class="itemCardapio" id="itemCardapio">
<img src="./imgs/Cardapio2.png" id="cardapioIMG">
<br><span> CARDÁPIO </span>
<div class="leftCardapio">
<div class="itemPratos"></div>
<div class="itemSaladas"></div>
<div class="itemSopas"></div>
<div class="itemSobremesas"></div>
<div class="itemMolhos"></div>
<div class="itemPorcoes"></div>
</div>
</div>
<div class="itemBebidas">
<img src="./imgs/Bebidas.png" id="bebidasIMG">
<br><span> BEBIDAS </span>
<div class="leftBebidas">
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
</div>
</div>
<div class="itemReservar_mesa">
<img src="./imgs/Mesa.png" id="reservar_mesaIMG">
<br><span> RESERVAR MESA </span>
</div>
</div>
<div class="top">
<div class="topBox1">
<div class="imgTopBox1">
<img src="./imgs/LogoRecanto.png" id="logoRecanto">
</div>
</div>
<div class="topBox2">
<img src="./imgs/Mesa.png" id="mesaIMG">
</div>
<div class="topBox3">
<img src="./imgs/Pesquisar.png" id="pesquisarIMG">
</div>
<div class="topBox4">
<img src="./imgs/Conta.png" id="contaIMG">
</div>
<div class="topBox5">
<img src="./imgs/Pedidos.png" id="pedidosIMG">
</div>
</div>
</div>
<!-- <script src="./scripts/changeImg.js"></script> -->
</body>
</html>
Your sub-menu elements increase in height when you zoom because that's the expected behavior of the zoom. Try zooming on any site or even here on stack-overflow.
When you zoom in browser what happens is that your visible area dimensions decrease. For example lets say your page is 1000px wide, when you zoom in to 200% it's now 500px wide, but these 500px are stretched to 1000px on your monitor.
On your site everything except sub-menu has % width and height. So if element width is 10% on 1000px screen it's 100px. If you zoom to 200% it's 10% of 500px, so 50px. Visually it stays the same size. Now when you have fixed dimensions on element like you have on your sub-menu, 80px is still 80px no matter how much you zoom in. On 500px screen of course 80px element will take more space then on 1000px screen.
Note the 80px height
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed last year.
i want to set z-index -999 in the green small rectangle that be set it behind the glass card but it dose not work. i have position rel and abs in my code and i rellay confiusing about this that why it is not work!
.second-card::before {
content: '';
display: inline-block;
width: 5rem;
height: 2rem;
background-color: #82c91e;
border-radius: 2px;
position: absolute;
top: -5%;
left: 50%;
transform: translateX(-50%);
z-index: -999;
}
i use before for that.
https://jsfiddle.net/9do7hpnx/1/
The issue is that you are trying to hide the green rectangle from its parent , you cant do that , because when you apply z index to the parent , it gets applied to the child also ( ie the green rectangle ) to solve this issue create another div which is not a child of the blurred div like
here is a working demo
https://jsfiddle.net/mcshjxqt/1/
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Payment</title>
</head><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Payment</title>
</head>
<body>
<div class="payment-container">
<div class="payment-content">
<div class="container-content">
<h2 class="payment-title">Checkout</h2>
<p class="payment-timer">
<span class="timer-txt">0</span>
<span class="timer-txt">1</span>
<span class="timer-semicolumn">:</span>
<span class="timer-txt">1</span>
<span class="timer-txt">9</span>
</p>
</div>
</div>
<div class="payment">
<div class="card">
<div class="main-card">
<div class="main-card--top">
<div class='greenBg'>
</div>
<div class="second-card">
<div class="second-card--logo">
<img src="img/logo.png" alt="logo" class="logo-img">
</div>
<div class="second-card--content">
<div class="second-card--txt">
<p class="card-name">Benjamin Taylor</p>
<div class="card-name--details">
<span class=""></span>
</div>
</div>
<div class="second-card--icon">
<p class="second-card--date">
12 / 05
</p>
<ion-icon class="sec-icon-wifi" name="wifi-outline"></ion-icon>
</div>
</div>
</div>
<div class="main-card--content">
<div class="main-card--order">
<p class="order-title">order</p>
<p class="order-number">4239421</p>
</div>
<div class="main-card--product">
<p class="product-title">product</p>
<p class="product-name">reels on rails</p>
</div>
<div class="main-card--vat">
<p class="vat-title">vat (<span class="vat-per">10</span>%)</p>
<p class="vat-price">Rp 25.000</p>
</div>
</div>
</div>
<div class="main-card--bottom">
<div class="main-card--total">
<div class="total-price--content">
<p class="total-title">total</p>
<div class="total-price">
<p class="total-price-sym">Rp</p>
<p class="totla-price-pay">2.256.100</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pay">2</div>
</div>
</div>
<!-- JavaScript -->
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500;600;700&display=swap');
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
font-size: 62.5%;
}
body {
min-height: 100vh;
font-size: 1rem;
background-color: #212529;
color: #fff;
}
/* ================== Payment container ================== */
.payment-container {
max-width: 100rem;
margin-inline: auto;
}
/* ================== Payment content ================== */
.payment-content {
display: grid;
grid-template-columns: 1fr 2fr;
padding: 3.2rem;
}
.payment-title {
font-weight: 600;
font-size: 2rem;
}
.container-content {
grid-column: 2;
display: flex;
align-items: center;
justify-content: space-between;
}
/* ================== Payment timer ================== */
.payment-timer {
display: flex;
align-items: center;
gap: .5rem;
}
.timer-txt {
width: 3.2rem;
height: 3.2rem;
font-size: 2rem;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
/* ================== Payment ================== */
.payment {
display: grid;
grid-template-columns: 1fr 2fr;
}
/* ================== Card ================== */
.main-card {
background-color: #313538;
width: 90%;
margin-inline: auto;
}
.main-card--content {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.main-card-container--content {
width: 70%;
margin-inline: auto;
}
.second-card {
background: rgba(255, 255, 255, 0.25);
border-radius: 5px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 5px solid #94d82d;
min-height: 20rem;
transform: translateY(-60px);
display: flex;
flex-direction: column;
justify-content: space-around;
}
.main-card--top {
width: 75%;
margin-inline: auto;
position: relative;
z-index: 999;
}
.second-card--logo {
margin-block: 4rem;
text-align: center;
}
.logo-img {
width: 6.4rem;
}
.sec-icon-wifi {
color: #fff;
width: 2rem;
height: 2rem;
}
.second-card--content {
display: flex;
flex-direction: column;
gap: 3.2rem;
}
.card-name {
font-size: 1.4rem;
margin-block: 5px;
}
.card-name--details {
font-size: 1.2rem;
}
.second-card--icon {
display: flex;
justify-content: space-around;
align-items: center;
margin-block: 1rem;
}
.second-card--txt {
text-align: center;
margin-top: 2rem;
}
.order-title,
.product-title,
.vat-title {
color: #8a8a8a;
}
.main-card--bottom {
background-color: #525353;
padding: 2rem 3rem;
position: relative;
}
.main-card--bottom::before {
content: '';
display: block;
width: 3rem;
height: 3rem;
background: #212529;
border-radius: 50%;
position: absolute;
top: -20%;
left: -5%;
}
.main-card--bottom::after {
content: '';
display: block;
width: 3rem;
height: 3rem;
background: #212529;
border-radius: 50%;
position: absolute;
top: -20%;
right: -5%;
}
.total-price--content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.total-title {
text-align: right;
text-transform: uppercase;
font-weight: 600;
}
.total-price-sym {
font-weight: 700;
}
.totla-price-pay {
font-size: 1.2rem;
font-weight: 700;
}
.total-price {
display: flex;
justify-content: space-between;
}
.greenBg::before {
content: '';
display: inline-block;
width: 5rem;
height: 2rem;
background-color: #82c91e;
border-radius: 2px;
position: absolute;
top: -20%;
left: 50%;
transform: translateX(-50%);
z-index: -999;
}
I currently studying HTML/CSS/DOM and I am a begginer. I tried to make an Instagram main page for practicing and improving my level. I will share my code, so you can understand what I'm trying to do!
This is HTML code
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
/*box-sizing: border-box;*/
}
#font-face {
font-family: instagramFont;
src: url("./westagram.ttf") format("opentype");
}
.wrapper {
margin: 10px 10px 10px 10px;
}
.wrapper .nav {
padding-top: 20px;
padding-bottom: 10px;
display: flex;
flex-direction: row;
justify-content: space-around;
border-bottom: solid 1px #dbdbdb;
position: fixed;
z-index: 99999;
/*포지션 여러개 썼을때 우선순위 설정 인덱스값이 클수록 우선순위*/
width: 100%;
}
.wrapper .nav .logo {
font-family: instagramFont;
font-size: 2rem;
padding-right: 100px;
}
.search-box {
margin-top: 5px;
width: 215px;
height: 28px;
}
.wrapper .nav .icons {
margin-left: 100px;
}
.wrapper .main {
position: relative;
/*포지션을 쓰면 위치 조정 top left right bottom*/
top: 90px;
width: 100%;
/*height: 900px;*/
background-color: yellow;
}
.wrapper .main .feeds {
position: relative;
top: 40px;
right: 5px;
left: 40px;
width: 60%;
height: 660px;
background-color: red;
}
.wrapper .main .feeds .article {
position: relative;
display: flex;
flex-direction: column;
top: 10px;
right: 10px;
left: 15px;
width: 95%;
height: 600px;
background-color: green;
}
. .wrapper .main .feeds .article .identi {
position: relative;
/*width: 97%;*/
/*height: 100px;*/
/*background-color: black;*/
}
.identi {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.wrapper .main .feeds .article .identi .selfi {
padding: 20px 20px 20px 20px;
width: 30px;
height: 30px;
border-radius: 50%;
}
.wrapper .main .feeds .article .identi .id {
padding-top: 20px;
}
.wrapper .main .feeds .article .identi .fa {
padding-top: 20px;
padding-right: 20px;
}
.wrapper .main .feeds .article .pic {
position: relative;
width: 100%;
/*top: 10px;*/
height: 65%;
background-color: lightblue;
}
.wrapper .main .feeds .article .show-box {
position: relative;
width: 100%;
height: 15%;
background-color: lightcoral;
}
.wrapper .main .feeds .article .comment {
position: relative;
width: 100%;
height: 9%;
background-color: lightcyan;
}
.wrapper .main .feeds .article .name {
/*margin-left: 40px;*/
/*padding-bottom: 20px;*/
}
.wrapper .main .main-right {
position: absolute;
top: 40px;
right: 30px;
width: 30%;
height: 900px;
background-color: blue;
}
#compass {
width: 30px;
height: 30px;
}
#heart {
width: 30px;
height: 30px;
}
#my-page {
width: 30px;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Westagram Main Page</title>
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="common.css" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
<!-- header : segmantic tag -->
<div class="wrapper">
<div class="nav">
<p class="logo"> Westagram </p>
<input class="search-box" type="text" placeholder=" Search" , style="font-family:Arial, FontAwesome">
<div class="icons">
<img id="compass" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png">
<img id="heart" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png">
<img id="my-page" src=" https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/profile.png">
</div>
</div>
<div class="main">
<div class="feeds">
<div class="article">
<div class="identi">
<img class="selfi" src="about.png">
<span class="id"> Jiwan Jeon </span>
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</div>
<div class="pic">
</div>
<div class="show-box">
</div>
<div class="comment">
</div>
</div>
</div>
<div class="main-right">
</div>
</div>
</div>
</body>
</html>
According to the CSS file, I declare the height of each section for checking those sections in the right position. Based on my knowledge, If I delete the height, it would be automatically adjusted height(I mean Depending on the size of the screen window, the horizontal/vertical height will increase or decrease.) This is what was expected. However, the main and the height of the others is fixed... Could you help me out with this problem? I struggling with it the whole day :(
Thank you for your help in advance!
You can use vh (view height) ,em ,rem or percentage.
Example:
height: 120px;
height: 10em;
height: 75%;
This is my code which works - used vehicle platform - HTML with flex, but isn't quite esthetically pleasing:
body {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 18px;
}
header.infog {
background-color: #333;
color: #FFF;
margin-bottom: 25px;
padding: 30px;
}
footer.infog {
background-color: #333;
color: #FFF;
margin-top: 20px;
margin-bottom: 25px;
padding: 10px;
}
.mainwrapper {
border: 2px solid;
display: table;
margin-left: 50px;
width: 900px;
}
.itemwrapper {
display: table-row;
width: 90px;
margin-right: -40px;
}
.itemwrapper1 {
display: table-row;
margin-left: -356em;
width: 100px;
}
.itemwrapper1 img {}
.some-page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
margin-left: 40px;
width: 600px;
color: #333;
margin: 0;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.column1 {
margin-left: 40px;
background-color: blue;
color: #FFF;
margin: 0;
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.priceg {
font-size: 29px;
color: red;
padding-left: 500px;
}
.img-nac img {
max-width: 330px;
}
.img-nac1 img {
max-width: 460px;
}
.ncat {
flex-direction: row;
margin-left: -450px;
text-align: right 50px;
}
.ncat1 {
flex-direction: row;
margin-left: -200px;
text-align: right 50px;
}
.at1 {
white-space: nowrap;
margin-top: -20px;
}
.priceh {
margin-left: 180px;
margin-top: -20px;
}
.mainwrapper {
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Car , Van, Caravan Dealer | Quality Used Cars</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<header class="infog">
header
</header>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column1'>
2003 TOYOTA RAV4 2.0 GX
</div>
<div class='column1 priceg'>
£8995
</div>
</div>
<div class='row'>
<div class='column img-nac'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column ncat'>
black
</div>
</div>
</div>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column1'>
2003 TOYOTA RAV4 2.0 GX
</div>
<div class='column1 priceg'>
£8995
</div>
</div>
<div class='row'>
<div class='column img-nac1'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column ncat'>
rowtt
</div>
</div>
</div>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column img-nac'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column at1'>
<h3>2004 TOYOTA RAV4 2.0</h4>
black
</div>
<div class='column priceh'>
<h3>£6000</h4>
</div>
</div>
</div>
<footer class="infog">
footer
</footer>
</body>
</html>
The problem is that I'm trying to make it so that if the image is large it's still alongside the text, like this from my page:
The blue line below is actually a bit of the next image... I didn't screencap well.
I've not figured out how to with the CSS and max-width size to do this, resulting in:
The car description in the second flexbox (column and ncat classes) doesn't show up.
But it works fine with the smaller image; I'm trying to make it big enough for people to see.
This isn't the final version, as I'm adding Roboto font etc. in the CSS, but it's almost working.
I'd much appreciate any advice on how to ensure I can get this to work in flexbox.
Just update your CSS with the following code
body {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 18px;
}
header.infog {
background-color: #333;
color: #FFF;
margin-bottom: 25px;
padding: 30px;
}
footer.infog {
background-color: #333;
color: #FFF;
margin-top: 20px;
margin-bottom: 25px;
padding: 10px;
}
.mainwrapper {
border: 2px solid;
display: table;
margin-left: 50px;
width: 900px;
}
.itemwrapper {
display: table-row;
width: 90px;
margin-right: -40px;
}
.itemwrapper1 {
display: table-row;
margin-left: -356em;
width: 100px;
}
.some-page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
margin-left: 40px;
color: #333;
margin: 0;
display: flex;
flex-direction: column;
padding: 20px;
}
.column1 {
margin-left: 40px;
background-color: blue;
color: #FFF;
margin: 0;
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.priceg {
font-size: 29px;
color: red;
padding-left: 500px;
}
.img-nac img {
max-width: 330px;
}
.img-nac1 img {
max-width: 460px;
}
.ncat {
flex-direction: row;
text-align: right 50px;
}
.ncat1 {
flex-direction: row;
text-align: right 50px;
}
.at1 {
white-space: nowrap;
margin-top: -20px;
}
.priceh {
margin-left: 180px;
margin-top: -20px;
}
.mainwrapper {
margin-bottom: 20px;
}