This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 1 year ago.
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">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;700&display=swap" rel="stylesheet">
<title>Idea Finder</title>
</head>
<body>
<ul id="wordList"></ul>
<div class="test"></div>
<script type="module" src="index.js"></script>
</body>
</html>
js:
import { apiKey } from './apiKey.js'
const wordnikBaseUrl = 'https://api.wordnik.com/v4/words.json/randomWords?'
const fetchWordList = async () => {
const queryStr = [
'hasDictionaryDef=true',
'includePartOfSpeech=verb',
'minCorpusCount=1000',
'limit=5'
].join('&')
await fetch(`${wordnikBaseUrl}${queryStr}&api_key=${apiKey}`)
.then(res => res.json())
.then(json => {
document.getElementById('wordList').innerHTML = json.map(obj => `<li>${obj.word.charAt(0).toUpperCase() + obj.word.slice(1)}</li>`).join('')
})
};
fetchWordList()
css:
* {
margin: 0;
padding: 0;
font-family: Source Sans Pro;
}
#wordList {
position: relative;
list-style: none;
padding: 25px;
width: 30%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: space-evenly;
background: red;
}
#wordList > li {
padding: 10px 15px;
margin-bottom: 10px;
border: 1px solid lightgray;
border-radius: 5px;
color: darkslategray
}
.test {
height: 100%;
width: 100px;
background: yellow;
}
the wordList ul stops half way down the screen even with 100% height applied. When I hover over the html/body elements, they have a dotted line exactly where wordList stops. If i apply some background color to the body, it takes up the entire screen.
I think I could fix it like this:
html, body {
height: 100vh;
overflow: hidden;
}
But I'd like to understand why it's happening. This is the first time I've created a project on this laptop, and it was never an issue with my desktop.
To make a percentage value to work for height, the parent's height must be set. So if you add height:100%; to your parent elements html and body it will work, because your parent elements have the size 100% of the screen.
Parent elements are the elements that have elements inside of them, so in this example, the <div> is the parent to the <p> element. Hope this explains how it works for you.
<div>
<p>test</p>
</div>
* {
margin: 0;
padding: 0;
font-family: Source Sans Pro;
}
html, body {
height: 100%;
}
#wordList {
position: relative;
list-style: none;
padding: 25px;
width: 30%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: space-evenly;
background: red;
}
#wordList > li {
padding: 10px 15px;
margin-bottom: 10px;
border: 1px solid lightgray;
border-radius: 5px;
color: darkslategray
}
.test {
height: 100%;
width: 100px;
background: yellow;
}
<!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="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;700&display=swap" rel="stylesheet">
<title>Idea Finder</title>
</head>
<body>
<ul id="wordList"></ul>
<div class="test"></div>
<script type="module" src="index.js"></script>
</body>
</html>
Related
I have made a sticky header using flexbox then using a grid for the body. But applying height to grid items makes the page overflow which I don't want. I have figured I can solve this overflowing by calc(100vh - the height of header) but eventually the height of the header will change if I change the resolution to that of mobile making the new height useless.
The other solution I can think of is by explicitly adding a height to the header but I think that is not the right solution to my problem
https://codepen.io/iwantroca-the-flexboxer/pen/ZEayyqp
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: 17px;
font-family: poppins;
}
body {
min-height: 100vh;
}
header {
display: flex;
align-items: center;
padding: 20px;
background: rgb(139, 48, 48);
color: white;
}
header>h2 {
font-style: italic;
font-weight: lighter;
margin-left: 3em;
}
.app_logo {
font-size: 2.3em;
margin-right: 10px;
color: rgba(187, 190, 136, 0.774);
}
/* MAIN */
main {
display: grid;
grid-template-columns: 1fr 4fr;
}
#projects_bar {
background: red;
height: 100vh;
}
#tasks_bar {
background: yellow;
}
<!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>Todo-App</title>
</head>
<body>
<header>
<i class="fa-solid fa-check-double app_logo"></i>
<h1>Todo App</h1>
<h2>Get things done</h2>
</header>
<main>
<nav id="projects_bar">
<h2>Projects</h2>
</nav>
<div id="tasks_bar">
<h2>Tasks</h2>
</div>
</main>
</body>
</html>
With your current structure why not just make header 10vh and main 90vh. This means that #projects_bar and #tasks_bar will also be 90vh also because 100vh (what you previously had) will cause overflow on the y-axis.
You can also add overflow-y: hidden; on the body to make it not scroll when switching device types.
Edit ~ mentioned in comments, same result without setting a height to the header. Remove all heights, and set height on body to 100vh. min-height: 100vh; is not the same as height: 100vh; so you need to establish that first. Then you can just set height: 100%; to main, and it will fill the remaining viewport.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: 17px;
font-family: poppins;
}
body {
height: 100vh;
min-height: 100vh;
overflow-y: hidden;
}
header {
display: flex;
align-items: center;
padding: 20px;
background: rgb(139, 48, 48);
color: white;
}
header>h2 {
font-style: italic;
font-weight: lighter;
margin-left: 3em;
}
.app_logo {
font-size: 2.3em;
margin-right: 10px;
color: rgba(187, 190, 136, 0.774);
}
/* MAIN */
main {
display: grid;
grid-template-columns: 1fr 4fr;
height: 100%;
}
#projects_bar {
background: red;
}
#tasks_bar {
background: yellow;
}
<!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>Todo-App</title>
</head>
<body>
<header>
<i class="fa-solid fa-check-double app_logo"></i>
<h1>Todo App</h1>
<h2>Get things done</h2>
</header>
<main>
<nav id="projects_bar">
<h2>Projects</h2>
</nav>
<div id="tasks_bar">
<h2>Tasks</h2>
</div>
</main>
</body>
</html>
When I attempt to alter the browser size, the navigation menu sort of "falls" into itself, if that makes sense. I'm not entirely sure what is causing this.
I've tried max-width and sometimes even adding the ="wrapper" in a div messes this up.
#font-face {
src: url(fonts/Modric.ttf);
font-family: Modric;
}
#font-face {
src: url(fonts/Orkney-Regular.ttf);
font-family: Orkney;
}
#font-face {
src: url(fonts/Made-Bon-Voyage.otf);
font-family: Made-Bon-Voyage;
}
* {
box-sizing: border-box;
}
body {
background-color: #262c2c;
}
.navbar {
max-width: 75%;
height: 100px;
margin-right: auto;
margin-left: auto;
}
.navbar a {
float: left;
padding: 40px;
background-color: #262c2c;
text-decoration: none;
font-size: 25px;
width: 25%;
/* Four links of equal widths */
text-align: center;
color: #dae1e7;
font-family: Orkney;
}
h1 {
text-align: center;
font-family: Orkney;
}
img {
max-width: 100%;
height: auto;
display: block;
opacity: 50%;
margin-left: auto;
margin-right: auto;
}
#wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding-right: 50px;
padding-left: 50px;
}
<!DOCTYPE html>
<html lang="en">
<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="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
<img src="images/top-image.jpg" alt="plants">
<img src="images/second-image.jpg" alt="benches">
<img src="images/third-image.jpg" alt="cactus">
<img src="images/last-image.jpg" alt="more cactus">
<img src="images/pasetta-studios" alt="pasetta studios">
<code>Designed by Pasetta Studios. Built by Abraham.</code>
</div>
</body>
</html>
As you said in a comment, removing the padding on the links fixed the problem. What happened is that once the element became smaller than 100px (2x50px padding) it stopped getting smaller and wrapped (what you're describing is called wrapping in CSS) to the next line. A padding is redundant anyway since you're centering the text.
I added an overflow: hidden to .navbar to make it wrap around the floated links.
I also added an outline to everything inside body to make the elements easier to see for demonstration/development purposes. This can also be achieved by using the F12 developer tools in your browser.
body * {
outline: 1px solid red;
}
body {
background-color: #262c2c;
}
.navbar {
max-width: 75%;
height: 100px;
margin: auto;
overflow: hidden;
}
.navbar a {
float: left;
padding: 40px 0;
background-color: #262c2c;
text-decoration: none;
font-size: 25px;
width: 25%;
/* Four links of equal widths */
text-align: center;
color: #dae1e7;
}
#wrapper {
max-width: 1000px;
margin: auto;
padding: 0 50px;
}
<!DOCTYPE html>
<html lang="en">
<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="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
</div>
</body>
</html>
If you're learning, this is a great start if not a tiny bit outdated. Most people would use a flexbox nowadays which looks like this:
body * {
outline: 1px solid red;
}
body {
background-color: #262c2c;
}
.navbar {
margin: auto;
max-width: 75%;
/* Added: */
display: flex;
}
.navbar a {
background-color: #262c2c;
text-decoration: none;
font-size: 25px;
/* Four links of equal widths */
text-align: center;
color: #dae1e7;
/* Added: */
line-height: 100px; /* Effectively centers the text vertically. */
flex: 1; /* Tells the links to expand horizontally. */
}
#wrapper {
max-width: 1000px;
margin: auto;
padding: 0 50px;
}
<!DOCTYPE html>
<html lang="en">
<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="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
</div>
</body>
</html>
This question already has answers here:
Display a div width 100% with margins
(6 answers)
Closed 3 years ago.
I just want to make my button expands full width to its container with some margin to itself, but it's not working. I have tried box-sizing: border-box, but as you can see in the snippet, still no luck because notice the right-side of the button, it's like overshoot..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.cont {
width: 100vw;
background-color: white;
}
.block {
margin: 10px;
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="cont">
<button class="block">Block Button</button>
</div>
</body>
</html>
That is because when the width is already 100%. Adding 10px margin to the left will cause it to be 100% + 10px, therefore overshoots the width of the container. Alternatively, you can add 10px padding to the container instead.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.cont {
width: 100vw;
background-color: white;
padding: 10px; /*Added Padding*/
}
.block {
/*margin: 10px;*/
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="cont">
<button class="block">Block Button</button>
</div>
</body>
</html>
Please remove the following commented CSS and it will work absolutely fine,
* {
box-sizing: border-box;
}
.cont {
/* width: 100vw; */
background-color: white;
width: 100%;
}
.block {
/* margin: 10px; */
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
please try this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.block {
/*margin: 10px;*/
display: block;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="cont">
<button class="block">Block Button</button>
</div>
</body>
</html>
I have HTML and CSS code like this:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="example.css"/>
</head>
<body>
<div id="main">
<span class="alignleft">First event, including a few words of description</span>
<span class="alignright">Date of first event</span>
</div>
</body>
</html>
CSS:
html {
overflow-y: scroll;
max-width: 800px;
margin: auto;
}
body {
background-color: #fff;
color: #000;
font-family: sans-serif;
padding: 0;
margin: 0;
}
#main {
margin: 0;
max-width: 50em;
padding: 1.5em;
}
span.alignleft {
float: left;
width:80%;
text-align:left;
}
span.alignright {
float: left;
width:20%;
text-align:right;
}
On a large window/viewport, this produces text in a two-column layout like this (which is what I want):
On a smaller window/viewport, e.g. a mobile browser, this produces text like this:
There isn't a lot of text here, so I'd like the font to scale according to the viewport instead of wrapping, as much as possible (and this should be possible on most viewports because, again, there isn't a lot of text here).
However, if I add font-size:2vw elements to the CSS, e.g.
html {
overflow-y: scroll;
max-width: 800px;
margin: auto;
}
body {
background-color: #fff;
color: #000;
font-family: sans-serif;
padding: 0;
margin: 0;
}
#main {
margin: 0;
max-width: 50em;
padding: 1.5em;
}
span.alignleft {
float: left;
width: 80%;
text-align: left;
font-size: 8vw;
}
span.alignright {
float: left;
width: 20%;
text-align: right;
font-size: 2vw;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
<div id="main">
<span class="alignleft">First event, including a few words of description</span>
<span class="alignright">Date of first event</span>
</div>
</body>
</html>
This kills the two-column layout and the rest of the formatting. How do I fix this?
You can use the fw unit for font-size as you did, but you simply have to use smaller values. Start with font-size: 0.5vw and change the value slowly trying different values to get the desired result.
Keep in mind: One vw is one percent of the screen width, so for a 1000px wide screen, 8vw means 80px fontsize!
You can add your desired font-size:2vw to scale with viewport along with a couple of other rules:
Setting the wrapper and spans to render as table and cells
Setting white-space on the spans to nowrap
This seems to do what you want but renders a bit odd on a large viewport. An improved approach would probably be to use at least one media query and to set the dynamic font size only on smaller screens.
html {
overflow-y: scroll;
max-width: 800px;
margin: auto;
}
body {
background-color: #fff;
color: #000;
font-family: sans-serif;
padding: 0;
margin: 0;
}
#main {
margin: 0;
max-width: 50em;
padding: 1.5em;
display: table;
width: 100%;
box-sizing: border-box;
}
#main>div.row {
display: table-row;
}
span.alignleft {
text-align: left;
}
span.alignright {
text-align: right;
}
span.alignleft,
span.alignright {
white-space: nowrap;
display: table-cell;
padding: 0 5px;
}
#media only screen and (max-width: 768px) {
#main {
padding: .5em;
}
span.alignleft,
span.alignright {
white-space: nowrap;
display: table-cell;
font-size: calc(6px + 1.5vw);
}
}
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
<div id="main">
<div class="row">
<span class="alignleft">First event, including a few words of description</span>
<span class="alignright">Date of first event</span>
</div>
<div class="row">
<span class="alignleft">First event, including a few words of description</span>
<span class="alignright">Date of first event</span>
</div>
</div>
</body>
</html>
I'm looking to align my logo with my header title and subtitle.
I've attempted to do this using display: inline-block. I didn't manage to,
and I also attempted with floats, but everything messed up.
I've then put a hr (line) under the header, but it's too thin, so I want to add thickness to it, but I can't manage to.
I've looked up this question but couldn't use answers to help me as most of them used tables.
How can do this?
http://codepen.io/anon/pen/BjmMdM
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' type='text/css'>
<link href="styles.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<main>
<header>
<img class="logo" src="hidden.jpg" alt="Logo">
<div id="title">
<h1>Lorem Epsum</h1>
<h3>Front Ninja</h3>
</div>
</header>
<hr id="line">
<section>
</section>
</main>
</body>
</html>
File style.css
html, body {
padding: 0;
margin: 20px;
height: 100%;
font-family: 'Quicksand', sans-serif;
}
header {
padding: 25px;
background-color: whitesmoke;
display: inline-block;
}
.logo {
height: 80px;
width: 80px;
margin-left: 300px;
border: #F8981C solid 5px;
border-radius: 99px;
}
#title {
text-transform: uppercase;
}
#line {
height: 100px;
background-color: blanchedalmond;
border: none;
}
So. I think the issue is that you needed vertical alignments. You have all of the html markup you need. I made a jsFiddle to help you out. Let me know if this is what you're looking for. There are a couple of ways to position the elements; I just added hard left margins to achieve the effect in your wireframe.
Fiddle: https://jsfiddle.net/legendarylionwebdesign/b570pyo9/
hr {
border: 0px;
height: 2px;
width: 100%;
background: black;
}
.logo {
display: inline-block;
height: 100px;
width: 100px;
vertical-align: middle;
margin-left: 100px;
}
#title {
width: 200px;
text-align: center;
display: inline-block;
vertical-align: middle;
margin-left: 200px;
}
For the title, you can just change it like this:
#title {
margin-right: 300px;
text-transform: uppercase;
z-index: 100;
position: absolute;
right: 0;
top: 20px;
}
And play with top or put width and so on example.