I need help fixing this issue. I am trying to create a webpage that has two images within a div. I want it to be centered on the screen. I have done that but I don't want it to scroll. I just want to see the full image regardless of the desktop screen size without having to scroll and also still have equal margin around the div. I am working in VScode but below is a link to what I have done so far. I will really appreciate any solution.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: poppins;
background-color: #131313;
}
#welcome-page {
position: relative;
background-color: rgb(12, 78, 136);
width: auto;
height: auto;
margin: 70px;
display: flex;
}
.path {
width: 50%;
height: 100vh;
background-color: black;
}
img {
width: 100%;
height: 100%;
}
<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">
<title>Welcome</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<section id="welcome-page">
<div class="path">
<img src="https://mcdn.wallpapersafari.com/medium/92/98/oK5D1Z.jpg" alt="">
</div>
<div class="path">
<img src="https://mcdn.wallpapersafari.com/medium/58/1/NOdDwR.jpg" alt="">
</div>
</section>
</body>
</html>
https://codepen.io/Mike-Olas/pen/zYNVvWr
html, body {
margin: 0;
padding: 0;
}
body {
font-family: poppins;
background-color: #131313;
height: 100vh;
}
#welcome-page {
position: relative;
background-color: rgb(12, 78, 136);
width: auto;
height: auto;
display: flex;
padding: 70px;
height: 100%;
box-sizing: border-box;
}
.path {
width: 50%;
background-color: black;
}
img {
width: 100%;
height: 100%;
}
https://codepen.io/pauan8/pen/KKajVpw
Make your <section id="welcome-page"> occupy all screen with defined padding
Center both .path using flex (row)
Make them occupy full height (but unset their background so you don't see black bleed when the images are too short in height) but max 50% width
Center images within each using flex
Constrain image sizes with max-width and max-height
Snippet below rendered better in full page mode (padding appears too big on small view)
html, body {
margin: 0;
padding: 0;
}
body {
font-family: poppins;
background-color: #131313;
}
#welcome-page {
position: relative;
background-color: rgb(12, 78, 136);
box-sizing: border-box;
/*width: auto;*/
height: 100vh;
padding: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.path {
/*background-color: black;*/
max-width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
}
<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">
<title>Welcome</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<section id="welcome-page">
<div class="path">
<img src="https://mcdn.wallpapersafari.com/medium/92/98/oK5D1Z.jpg" alt="">
</div>
<div class="path">
<img src="https://mcdn.wallpapersafari.com/medium/58/1/NOdDwR.jpg" alt="">
</div>
</section>
</body>
</html>
Related
Im trying to make the 'rating-block' to be positioned at the bottom-right side of 'card'. But these values don't work as its container has justify-content centre so it will force it in the centre. Is there a better way to position it to the bottom right?
.card {
width: 210px;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
position: relative
}
.card-img {
display: flex;
width: 50%;
}
.rating-block {
background-color: white;
border-radius: 10px;
position: absolute;
padding: 0 10px;
top: 100px;
}
.rating {
margin: 0px
}
<!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">
</head>
<body>
<div class="card">
<img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" class="card-img">
<div class="rating-block">
<p class="rating">4.5</p>
</div>
</div>
</body>
</html>
Try adding top: 185px; and left: 115px; to the .rating-block class
.card {
width: 210px;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
position: relative
}
.card-img {
display: flex;
width: 50%;
}
.rating-block {
background-color: white;
border-radius: 10px;
position: absolute;
padding: 0 10px;
top: 185px;
left: 115px;
}
.rating {
margin: 0px
}
<!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">
</head>
<body>
<div class="card">
<img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" class="card-img">
<div class="rating-block">
<p class="rating">4.5</p>
</div>
</div>
</body>
</html>
Just adding a suggestion for css variables here as if you change the size of your div, it will automatically position the pill. Also consider using ::before as this cuts out a bit of markup too.
.card {
--card-width: 210px;
--card-height: 250px;
--image-scale: 0.5;
width: var(--card-width);
height: var(--card-height);
display: flex;
background-color: green;
position: relative;
align-items: center;
justify-content: center;
}
.card-img {
display: flex;
width: calc(100% * var(--image-scale));
}
.card::before {
content: attr(data-rating);
background-color: white;
border-radius: 10px;
position: absolute;
padding: 0 10px;
transform: translate(calc(0.5 * var(--card-width) * var(--image-scale)), calc(0.5 * var(--card-height) * var(--image-scale) + 1rem));
}
<div class="card" data-rating="4.5">
<img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" class="card-img">
</div>
I'm designing a dashboard using Chart.js graphs and Canvases. Please see the dashboard below:
The design is exactly what I want until I resize the page to make it smaller and then resize it again to make it bigger. When I do this I end up with the following:
This did not occur until I added the second chart and made the div element containing them both a flexbox. Before making the div a flexbox I had the following layout:
This can easily be resized into the following form for a smaller window:
and then resized again into the larger form from the previous image. What change has flexbox made that stops the automatic resizing of the charts?
My code is below. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<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="./css_styles/main.css">
<title>Plus UI Design</title>
</head>
<body>
<div class="overview_container">
<div id="plusPointsContainer" class="points_container-main">
<div id="plusPointsDoughnut" class="doughnut_holder">
<canvas id="plusPoints" height="400" width="400"></canvas>
</div>
<div class="points_display-horizontal">
<div class="points_display-vertical">
<div>
<div class="points_header">Today:</div>
50
</div>
<div class="points_display-yesterday">
<div class="points_header-smaller">Yesterday:</div>
60
</div>
</div>
</div>
</div>
<div class="bar_chart_container">
<canvas id="overviewBarGraph" height="400" width="600"></canvas>
</div>
</div>
</body>
</html>
CSS:
.overview_container {
display: flex;
}
.bar_chart_container {
max-width: 600px;
max-height: 400px;
}
.points_container-main {
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
max-width: 400px;
min-width: 250px;
max-height: 400px;
min-height: 250px;
margin-right: 5vw;
}
.points_display-horizontal {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
}
.points_display-vertical {
position:relative;
top: 8%;
font-family: Helvetica Neue;
font-size: 70px;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.points_display-yesterday {
font-size: 30px;
text-align: center;
margin-top: -10px;
color: rgba(0, 0, 0, 0.4);
}
.points_header {
font-size: 10px;
margin-bottom: -10px;
}
.points_header-smaller {
font-size: 10px;
margin-bottom: -3px;
}
I have only included the html and css parts as I don't think Javascript is the issue here, but I can update the code section if anyone thinks it is the issue.
Try to remove from .points_container-main and .bar-chart-container max-width, min-width styles. Add them styles in flex world:
.points_container-main{
flex: 0 0 auto;
width: 25%;
}
.bar-chart-container{
flex: 0 0 auto;
width: 75%;
}
I am working on a simple code editor application and I stumbled upon a visual bug, basically the textarea is a little bit taller than the container.
This is the index.html:
<!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">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body class="page">
<div class="files">
</div>
<div class="container">
<div class="lines">
</div>
<div class="editor">
<textarea></textarea>
</div>
</div>
</body>
</html>
This is the index.css:
.lines {
height: 100%;
background-color: black;
flex: 1;
display: flex;
flex-direction: column;
background-color: #34495e;
}
.editor {
height: 100%;
flex: 20;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.page {
height: 80vh;
margin: 0;
padding: 0;
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: none;
outline: none;
background-color: #2c3e50;
}
.files {
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
}
.file {
}
.lines {
height: 100%;
background-color: black;
flex: 1;
display: flex;
flex-direction: column;
background-color: #34495e;
}
.editor {
height: 100%;
flex: 20;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.page {
height: 80vh;
margin: 0;
padding: 0;
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: none;
outline: none;
background-color: #2c3e50;
}
.files {
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
}
.file {
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body class="page">
<div class="files">
</div>
<div class="container">
<div class="lines">
</div>
<div class="editor">
<textarea></textarea>
</div>
</div>
</body>
</html>
I have tried everything but cannot find a solution, searched around Stackoverflow but could not find an answer I thought it was caused by the resize, border and outline, but appearently those are not the problem.
Add box-sizing: border-box; to your textarea styles
I wrote html & css like below.
* {
padding: 0;
margin : 0;
box-sizing: border-box;
}
header {
height: 40px;
background-color: skyblue;
margin-right: 0;
width: 100%;
}
.container{
display: flex;
}
aside {
background-color: yellow;
min-width: 200px;
}
main {
background-color: green;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.content {
height: 300px;
min-width: 500px;
background-color: red;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<title>My test page</title>
</head>
<body>
<header>
header
</header>
<div class="container">
<aside>side menu</aside>
<main>
<div class="content">
content
</div>
</main>
</div>
<script src="js/main.js"></script>
</body>
</html>
then, I resize browser size less than 700px(aside width + content width.) width.
as result, header width is less than contents like below(scroll to the far right).
I guess this because of contents has min-width property.
Then, I want to manage header width based on contents width.
do you know any idea?
thanks.
Not an ideal solution. But if you want to maintain a min-width of 200px for the aside and a min-width of 500px for the content (with 10px padding), you can provide a min-width of 720px (200px+500px+10px+10px) for the header.
* {
padding: 0;
margin : 0;
box-sizing: border-box;
}
header {
height: 40px;
background-color: skyblue;
margin-right: 0;
width: 100%;
min-width: 720px;
}
.container{
display: flex;
}
aside {
background-color: yellow;
min-width: 200px;
}
main {
background-color: green;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.content {
height: 300px;
min-width: 500px;
background-color: red;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<title>My test page</title>
</head>
<body>
<header>
header
</header>
<div class="container">
<aside>side menu</aside>
<main>
<div class="content">
content
</div>
</main>
</div>
<script src="js/main.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.wrapper {
width: 1170px;
margin: auto;
}
.logo img {
width: 84px;
float: left;
padding-left: 5%;
padding-top: 2%;
}
<!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" /> <title>LoLstudy</title> <link rel="stylesheet" href="fstyle.css" /> </head> <body> <div class="container"> <div class="left"></div>
here is the html code.
what shoud i do?
You can change position: absolute on the .appbar class to position: fixed or just remove the position property depending on the layout you want.
* {
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
display: flex;
position: relative;
}
.appbar {
width: 100%;
height: 60px;
display: flex;
position: absolute;
align-items: center;
top: 0;
z-index: 999;
padding: 0 2rem;
}
.logo {
font-size: 20px;
}
.fragment {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.left {
background-color: cadetblue;
}
.right {
background-color: burlywood;
}
<div class="container">
<header class="appbar">
<a class="logo" href="#">LOGO</a>
</header>
<div class="fragment left">
<h2>Left</h2>
</div>
<div class="fragment right">
<h2>Right</h2>
</div>
</div>