I'm very new to coding, and I'm having some trouble fitting an image to about 80% screen width.
The image is not moving despite me changing the width: 80% to other percentages. it is also going off the edge of the screen regardless of me putting overflow: 0px; and flex-wrap: wrap;
I've managed to figure this out before, but this code doesn't seem to be responding for some reason and I'm not sure what I'm doing wrong, so any help is appreciated!
here's my code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
<style>
#title {
width: 80%;
height: auto;
overflow: 0px;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
</style>
</head>
<body style="background-color:black">
<img id="title" src="http://www.vibrantandalive.com/pictures/title.png"/>
</body>
</html>
You have the opening css tag twice, this shoud work.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#title {
width: 80%;
height: auto;
overflow: 0px;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
</style>
</head>
<body style="background-color:black">
<img id="title" src="http://www.vibrantandalive.com/pictures/title.png">
</body>
I don't think you need all these css elements:
* {
margin: 0;
padding: 0;
border: 0;
}
#title {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-color:black">
<img id="title" src="http://placekitten.com/301/301" />
</body>
</html>
Related
When the website is at a phone screen, the flex-items spread apart the whole height of the screen even when align-items: center. I want the flex items to be anchored in the center and not move when height is changed.
I tried to set gap: 0 but there was still a gap in between.
body,html{
height: 100vh;
padding: 0
}
#div1{
width: 200px;
height: 200px;
background-color: tomato;
}
#div2{
width: 200px;
height: 200px;
background-color: aqua
}
#wrapper{
display: flex;
gap: 20px;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 100%
}
<!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>Document</title>
</head>
<body>
<div id="wrapper">
<div id="div1"></div>
<div id="div2"></div>
</div>
<script src="script.js"></script>
</body>
</html>
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
HTML markup:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
display:flex;
justify-content: center;
align-items: center;
}
.container {
background-color: green;
border:1px solid black;
width:80vw;
height:80vh;
}
In the above code I am trying to align my div content to display in the center but it is not displaying what changes should I make to do so.
You forgot to add height for the body.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
This will solve your issue.
If you want to use the same flex command you must add a height property.
For example:
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
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>