So I was just writing some html and CSS stuff for fun, but only one of all the lines in my code is working here's my code
<!DOCTYPE html>
<Html Lang="en">
<Head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Minecraft</title>
</head>
<body>
<div class="container">
<div class="border">
<div class="content">
<P>ihc</P>
</div>
</div>
</div>
<center>
<footer>
<p style="font-size: 1%;">© Copyright 2022</p>
</footer>
</center>
<script src="script.js"></script>
</body>
</html>
h1 {
margin: 16px;
font-size: 24px;
font-weight: 600;
line-height: 36px;
font-family: EuclidCircularA-Regular;
}
p {
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin: auto 16px;
font-style: normal;
font-family: EuclidCircularA-Regular;
}
.container {
width: 100%;
height: 100%;
}
.border {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
width: 100%;
height: 100%;
}
.content {
width: 90%;
height: 90%;
Background-color: rgb(255,255,255);
}
And all I can see is this:
copyright text and a black box with no text even though there should be text
What should I do? Add styling for the "container" div? I'm not very good at this stuff so help would be appreciated.
You need to change .container height to 100vh and background color of .content to black.
Here you go:
h1 {
margin: 16px;
font-size: 24px;
font-weight: 600;
line-height: 36px;
font-family: EuclidCircularA-Regular;
}
p {
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin: auto 16px;
font-style: normal;
font-family: EuclidCircularA-Regular;
}
.container {
background-color: rgb(0, 0, 0);
width: 100%;
height: 100vh;
}
.border {
color: rgb(255, 255, 255);
width: 100%;
height: 100%;
}
.content {
width: 90%;
height: 90%;
background-color: rgb(0, 0, 0);
}
<!DOCTYPE html>
<Html Lang="en">
<Head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Minecraft</title>
</head>
<body>
<div class="container">
<div class="border">
<div class="content">
<p>ihc</p>
</div>
</div>
</div>
<center>
<footer>
<p style="font-size: 1%;">© Copyright 2022</p>
</footer>
</center>
<script src="script.js"></script>
</body>
</html>
Related
I have this issue in my webpage: when I resize the screen size to approximately below 300px, when using Google Chrome devtools "toggle device toolbar" in mobile mode, my navbar width reduces a lot and does not include its links any more.
I have tried giving my navbar width: 100vw or 100%, and I have tried to apply this also to the body element, and that seems to have the same behavior when on small mobile screens.
I have tried also to set in the head element maximum-scale=1, user-scalable=no, but user-scalable no gives problems on the navbar.
I haven't found anything useful online and I am pretty new to webDev. Can you please help me?
I attach a link to a screenshot (in GitHub wiki) with an image of my problem
Here is my code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Kanit", sans-serif;
font-weight: 400;
}
.body-trade-page {
height: 100vh;
background: linear-gradient(139.73deg, rgb(229, 253, 255) 0%, rgb(243, 239, 255) 100%) no-repeat fixed;
}
.trade-navbar {
display: flex;
justify-content: flex-start;
width: 100vw;
height: 42px;
align-items: center;
padding-left: 12px;
background-color: rgb(255, 255, 255);
}
.trade-navbar div>a {
display: flex;
color: rgb(122, 110, 170);
font-weight: 400;
font-size: 16px;
font-weight: 400;
text-align: center;
opacity: 1;
padding: 10px 10px;
}
<!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>
</head>
<body class="body-trade-page">
<!--menu-->
<nav class="trade-navbar">
<div class="trade-item">
<div class="trade-link"><a class="link-highlighted" href="/swap">Swap</a></div>
</div>
<div class="trade-item">
<div class="trade-link">Limit</div>
</div>
<div class="trade-item">
<div class="trade-link">Liquidity</div>
</div>
<div class="trade-item">
<div class="trade-link">Perpetual</div>
</div>
</nav>
</body>
</html>
min-width: fit-content;
If you add the code above to your css class '.trade-navbar' it will force your navbar to fit all of the elements within it, no matter the size of the window.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Kanit", sans-serif;
font-weight: 400;
}
.body-trade-page {
height: 100vh;
background: linear-gradient(139.73deg, rgb(229, 253, 255) 0%, rgb(243, 239, 255) 100%) no-repeat fixed;
}
.trade-navbar {
display: flex;
justify-content: flex-start;
width: 100vw;
min-width: fit-content; /* <-- this one! */
height: 42px;
align-items: center;
padding-left: 12px;
background-color: rgb(255, 255, 255);
}
.trade-navbar div > a {
display: flex;
color: rgb(122, 110, 170);
font-weight: 400;
font-size: 16px;
font-weight: 400;
text-align: center;
opacity: 1;
padding: 10px 10px;
}
<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>
</head>
<body class="body-trade-page">
<!--menu-->
<nav class="trade-navbar">
<div class="trade-item">
<div class="trade-link"><a class="link-highlighted" href="/swap">Swap</a></div>
</div>
<div class="trade-item">
<div class="trade-link">Limit</div>
</div>
<div class="trade-item">
<div class="trade-link">Liquidity</div>
</div>
<div class="trade-item">
<div class="trade-link">Perpetual</div>
</div>
</nav>
</body>
</html>
Hope this helps :D
I would go a step further from the other answer and force the nav bar to be full width no matter the screen size.
So add in a min-width: 100vw; in your '.trade-navbar'
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Kanit", sans-serif;
font-weight: 400;
}
.body-trade-page {
height: 100vh;
background: linear-gradient(139.73deg, rgb(229, 253, 255) 0%, rgb(243, 239, 255) 100%) no-repeat fixed;
}
.trade-navbar {
display: flex;
justify-content: flex-start;
width: 100vw;
min-width:100vw; //////Add This
height: 42px;
align-items: center;
padding-left: 12px;
background-color: rgb(255, 255, 255);
}
.trade-navbar div > a {
display: flex;
color: rgb(122, 110, 170);
font-weight: 400;
font-size: 16px;
font-weight: 400;
text-align: center;
opacity: 1;
padding: 10px 10px;
}
<!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>
</head>
<body class="body-trade-page">
<!--menu-->
<nav class="trade-navbar">
<div class="trade-item">
<div class="trade-link"><a class="link-highlighted" href="/swap">Swap</a></div>
</div>
<div class="trade-item">
<div class="trade-link">Limit</div>
</div>
<div class="trade-item">
<div class="trade-link">Liquidity</div>
</div>
<div class="trade-item">
<div class="trade-link">Perpetual</div>
</div>
</nav>
</body>
</html>
This just makes sure that no matter the screen size it will always be full width.
Cheers,
<!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>DOM about</title>
<!-- <style>
.red {
background: red;
color: white;
text-transform: uppercase;
font-size: 2rem;
}
.blue {
background: blue;
color: white;
text-transform: capitalize;
font-size: 2rem;
}
.title {
background: blue;
color: white;
font-size: 3rem;
text-transform: capitalize;
}
.btn {
background: #f15025;
color: white;
font-size: 1.2rem;
border: none;
}
a {
display: inline-block;
margin-top: 100vh;
}
</style> -->
</head>
<body>
<div class="container">
<ul class="list-items">
<li class="item">link</li>
<li class="item">link</li>
<li class="item">link</li>
</ul>
</div>
<!-- Javascript -->
<script src="app.js"></script>
</body>
</html>
When I run this code I get no issues on my live server concerning the displaying of my links on top of eachother in the div.
BUT when I uncomment the styles section my lists are suddenly spread around huge individual containers. I don't understand how that is possible. Can someone please clarify what context/syntax I am forgetting.
I just started learning how to code this week so forgive me if this is obvious.
The Problem was the margin-top: 100vh; for a tag.
<!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>DOM about</title>
<style>
.red {
background: red;
color: white;
text-transform: uppercase;
font-size: 2rem;
}
.blue {
background: blue;
color: white;
text-transform: capitalize;
font-size: 2rem;
}
.title {
background: blue;
color: white;
font-size: 3rem;
text-transform: capitalize;
}
.btn {
background: #f15025;
color: white;
font-size: 1.2rem;
border: none;
}
a {
display: inline-block;
/* margin-top: 100vh; Thats the problem */
}
</style>
</head>
<body>
<div class="container">
<ul class="list-items">
<li class="item">link</li>
<li class="item">link</li>
<li class="item">link</li>
</ul>
</div>
<!-- Javascript -->
<script src="app.js"></script>
</body>
</html>
Your links are spreading because you are giving margin-top: 100vh. So each a tag gets margin-top of 100vh. The problem is in the following place in style tag.
a {
display: inline-block;
margin-top: 100vh;
}
I am writing an HTML Document. I am trying to make no space between a p and a div. There were no error messages included.
I have already tried:
adding 0px margin, padding to the p element and div element
making no whitespace between them in the code
Code:
#IO-out {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.pn {
margin: 0px;
padding: 0px;
}
.t {
color: white;
background-color: black;
font-family: "Roboto Mono", monospace, "wingdings";
}
.t.normal {
color: white;
background-color: black;
}
html
<head>
<title>
ivyghostkit
</title>
<link rel="stylesheet" href="common.css" type="text/css">
</head>
<body class="t normal">
<div id="container">
<div id="IO-out" class="t normal">
<!-- p elements with class "pn" are added here using javascript -->
</div>
<p id="VoidKeyboard"></p>
</div>
<script src="g.core.js"></script>
</body>
</html>
For clarification, the problem is that noticeable space is inbetween #VoidKeyboard and all p elements in #IO-out.
Add this in your css file
p{
margin: 0;
padding: 0;
}
And add some text in your markup..
Here is the full 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">
<title>Document</title>
<style>
#IO-out {
width: 100%;
height: 100%;
/** make void keyboard work **/
margin: 0px;
padding: 0px;
}
p{
margin: 0;
padding: ;
}
.pn {
margin: 0px;
padding: 0px;
}
.t {
color: white;
background-color: black;
font-family: "Roboto Mono", monospace, "wingdings"; /** ;) **/
}
.t.normal {
color: white;
background-color: black;
}
</style>
</head>
<body class="t normal">
<div id="container">
<div id="IO-out" class="t normal">
p elements with class "pn" are added here using javascript
</div>
<p id="VoidKeyboard">Remove Spacing</p>
</div>
</body>
</html>
Problem: My Google form is cut off on mobile phones. End users are having a difficult time understanding the iframe is scrollable.
What I have tried: I have been searching online for ideas. I tried height: 1000px and height: 100% both with no luck.
Goal of this post: I am hoping someone can show me how to display the full length of the Google form without compromising the responsiveness of the site.
I have added a screenshot of what I see on my phone.
#headerText {
text-align: center;
font-size: 2.2rem;
padding-top: .7%;
}
.img-fluid {
max-width: 100%;
height: auto;
padding: 15px 0 15px 0;
}
.bg {
background: url(https://subtlepatterns.com/patterns/kindajean.png);
width: auto;
}
.boxWhite {
background-color: white;
font-size: 20px;
text-align: center;
font-family: 'Montserrat', sans-serif;
}
.text-primary {
background-color: white;
width: 400px;
justify-content: center;
font-family: 'Montserrat', sans-serif;
}
#googleForm {
height: 1000px;
}
.button {
padding: 30px 0 80px 0;
font-family: 'Montserrat', sans-serif;
}
.seanText {
background: white;
color: #007BFF;
font-size: 20px;
text-align: center;
word-spacing: 1.2px;
padding: 20px 10% 20px 10%;
font-family: 'Montserrat', sans-serif;
}
.iframe {
margin-left: 3%;
margin-top: 6%;
}
#header {
font-family: 'Montserrat', sans-serif;
height: 90px;
background-color: #007BFF;
height: 120px;
padding-top: 2%;
}
.iframeSean {
height: 100%;
}
<!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 href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Sean Is Getting Married</title>
</head>
<body>
<div id="header">
<div id="headerText">
<a href="http://seanisgettingmarried.com" class="text-center bg-primary text-white headerText">Sean Brown's
Bachelor Party</a>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="embed-responsive embed-responsive-1by1 iframe">
<iframe class="embed-responsive-item iframeSean"
src="https://docs.google.com/forms/d/e/1FAIpQLScQ2hk1LN-1ZY1s9hmltqaIx5p8NSHJyE1-1mz-HSJ-sDMDGg/viewform?embedded=true"
width="640" height="1103" frameborder="0" marginheight="0" marginwidth="0"> Loading…</iframe>
</div>
</div>
</body>
</html>
Increase the Height:
<iframe class="embed-responsive-item iframeSean"
src="https://docs.google.com/forms/d/e/1FAIpQLScQ2hk1LN-1ZY1s9hmltqaIx5p8NSHJyE1-1mz-HSJ-sDMDGg/viewform?embedded=true"
width="640" **height="2500"** frameborder="0" marginheight="0" marginwidth="0"> Loading…</iframe>
Thanks
Please Change width to 100% and height to 500px
Loading…
When moving my div container from float:center; to float:left;
Ideally i'd like for the button to touch the bottom of the div "self"
It adds extra space below my contact button.
Any suggestions?
I've tried playing with margin, padding,overflow:hidden; etc inside the div container .self in the CSS file but with no luck.
body{
/*background-color: rgb(17, 17, 17);*/
background-color: ghostwhite;
}
.self {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
height:auto;
margin: auto;
text-align: center;
font-family: sans-serif;
background-color: ghostwhite;
float:left;
}
.title {
color: black;
font-family: sans-serif;
font-size: 18px;
}
ul.school {
list-style:none;
list-style-position: inside;
padding-left:0;
margin-left:0;
}
.degrees{
color: black;
font-family: sans-serif;
font-size: 14px;
}
button {
border: none;
outline: 0;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover, a:hover {
opacity: 0.7;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Steven Amerman">
<meta name="pragma" content="no-cache">
<link rel="stylesheet" type = "text/css" href="..\css\index.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Steven Amerman</title>
</head>
<body>
<div class="self">
<img src="..\images\Steven.png" alt="Steven Amerman" style="width:100%">
<h1>Steven Amerman</h1>
<p class="title">Software Developer</p>
<ul class="school">
<li><img src="../images/wvuIcon.png" id="wvuIcon" alt="WVU" style="width:20px; height:20px"> West Virginia University</li>
</ul>
<p class="degrees">B.S. in Computer Science</p>
<i class="fa fa-linkedin-square"></i>
<p><button>Contact</button></p>
</div>
</body>
</html>
extra space
no space
The issue is on the p tag's margin containing the contact button. You should change its margin to 0, for instance:
.self p:last-child{
margin-bottom: 0px;
}
Just remove the <p></p> tags around the button at the bottom.
body {
/*background-color: rgb(17, 17, 17);*/
background-color: ghostwhite;
}
.self {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
height: auto;
margin: auto;
text-align: center;
font-family: sans-serif;
background-color: ghostwhite;
float: left;
}
.title {
color: black;
font-family: sans-serif;
font-size: 18px;
}
ul.school {
list-style: none;
list-style-position: inside;
padding-left: 0;
margin-left: 0;
}
.degrees {
color: black;
font-family: sans-serif;
font-size: 14px;
}
button {
border: none;
outline: 0;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover,
a:hover {
opacity: 0.7;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Steven Amerman">
<meta name="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="..\css\index.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Steven Amerman</title>
</head>
<body>
<div class="self">
<img src="..\images\Steven.png" alt="Steven Amerman" style="width:100%">
<h1>Steven Amerman</h1>
<p class="title">Software Developer</p>
<ul class="school">
<li><img src="../images/wvuIcon.png" id="wvuIcon" alt="WVU" style="width:20px; height:20px"> West Virginia University</li>
</ul>
<p class="degrees">B.S. in Computer Science</p>
<i class="fa fa-linkedin-square"></i>
<button>Contact</button>
</div>
</body>
</html>