So I've been formatting this form and it looks ok on Desktop now.
But I need it to change when it's on mobile.
It's two elements, one image and one form, side by side.
I need them to change to top and bottom when on mobile.
Probably a #media query CSS?
I've tried using percentages for widths, but the image size isn't changing and the form component either ends up overlapping it, or it gets cut off...
HTML Code:
<head>
<link rel="stylesheet" href="/assets/signup.css">
</head>
<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup">
<div id="image"><img src="images/genesis.gif"></div>
<form action="https://opipets.us17.list-manage.com/subscribe/post?u=3fa8d83aedc08e2a8814c787c&id=27f9c81072&v_id=4140&f_id=00bb56e0f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Join our Whitelist</h2>
<div class="mc-field-group">
<label for="mce-EMAIL">Email
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
<div id="mergeRow-gdpr" class="mergeRow gdpr-mergeRow content__gdprBlock mc-field-group">
<div class="content__gdpr">
<span>
<fieldset class="mc_fieldset gdprRequired mc-field-group" name="interestgroup_field">
<label class="checkbox subfield" for="gdpr_90860"><input type="checkbox" id="gdpr_90860" name="gdpr[90860]" value="Y" class="av-checkbox gdpr"></label>
</fieldset>
<p><b>I agree to receive communications from Opis Group Ltd</b></p>
</span>
<br>
<p>Your privacy is our policy. Occasionally, we'll contact you about our products and services, and other content that may be of interest. You can unsubscribe at any time.</p>
<p>We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. </p>
<br>
<p>Learn more about Mailchimp's privacy practices here.</p>
</div>
</div>
<div hidden="true"><input type="hidden" name="tags" value="6456416,6456520"></div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3fa8d83aedc08e2a8814c787c_27f9c81072" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
CSS Code:
#font-face {
font-family: museo-sans;
src: url(/fonts/museosans_300.otf) format("opentype");
font-display: auto;
font-style: normal;
font-weight: 300;
font-stretch: normal
}
#font-face {
font-family: museo-sans-bold;
src: url(/fonts/museosans_700.otf) format("opentype");
font-display: auto;
font-style: normal;
font-weight: 700;
font-stretch: normal
}
#font-face {
font-family: bwstretch;
src: url(/fonts/BWSTRETCH-BLACK.OTF) format("opentype");
font-display: auto;
font-style: normal;
font-weight: 800;
font-stretch: normal
}
a {
font-family: museo-sans-bold;
color: #ffc860;
}
h2 {
font-family: bwstretch;
text-align: center;
text-transform: uppercase;
font-size: 3vh !important;
}
body {
font-size: 1.5vh;
background-color: #191f43;
font-family: museo-sans;
color: #191f43;
}
#mc_embed_signup {
width: 90% overflow: auto;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #191f43;
}
div.mc-field-group {
width: 90% overflow: auto;
}
div.mc-field-group label {
font-size: 2vh;
font-family: museo-sans-bold;
width: auto;
}
div.mc-field-group input {
font-size: 1.5vh;
font-family: museo-sans-bold;
width: 90%;
color: #191f43;
border: 0;
height: 30px;
border-radius: 5px;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
margin-left: 10px;
}
#image {
max-width:30% overflow: auto;
background-color: #191f43;
}
#content__gdpr {
display: flex;
justify-content: center;
align-items: center;
}
#mc_embed_signup {
width: 90%;
background-color: #191f43;
color: #ffc860;
font-family: museo-sans;
}
#mc-embedded-subscribe-form input[type=checkbox]{
display: flex;
width: auto;
margin-right: 0px;
margin-left: -15px;
margin-top: -2px;
}
#mergeRow-gdpr {
margin-top: 20px;
font-size: 1.5vh;
}
#mergeRow-gdpr fieldset label {
font-weight: normal;
}
#mc-embedded-subscribe-form .mc_fieldset {
border:none;
min-height: 0px;
padding-bottom:0px;
}
input.button {
color: #191f43;
background-color: #ffc860;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 45px;
padding-right: 45px;
font-family: bwstretch;
text-transform: uppercase;
font-size: 1.5em;
border: 0;
border-radius: 40px;
}
span {
display: flex;
align-items: center;
}
#Media works like this:
#media (max-width: 768px) {
h2{
background-color: #ffc860;
}
}
768px is generally regarded as a breaking point between vertical(smartphone) view and horizontal(Tablet, Desktop) view.
I would recommend to do every class twice one for bellow 768px screen width and one for above.
Related
i have 3 sections in this html 3 page, header, inner body, and footer, i would like you to focus on the inner body only, in there, i have a form, and an information box with title and text, i would like to make the form and information box to be centered in the inner body, and to sit side by side , and the information box to be in the middle of the form height.
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.content {
width: 1400px;
margin: auto;
padding: 10px;
}
/* inner body styling */
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
div.inner-body {
background-image: url(image/blueimage.png);
margin-bottom: 20px;
margin-top: 20px;
height: 900px;
text-align: center;
align-items: center;
display: grid;
}
form {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-top: 80px;
align-items: center;
border-radius: 40px;
width: 525px;
height: 700px;
background-color: rgb(99, 198, 223);
box-shadow: 0px 15px 20px rgba(0,0,0,0.5);
}
.signin {
font-size: 35px;
padding: 10px;
width: 530px ;
height: 500px;
display: inline-block;
background-color: rgb(173, 241, 241);
border-radius: 30px;
margin-top: -50px;
margin: 10px;
box-shadow: 0px 15px 20px rgba(0,0,0,0.5);
margin-right: 50px;
}
.signin-intro {
color: black;
}
.passlabel {
white-space: pre;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-style: oblique;
}
.stafflabel {
white-space: pre;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-style: oblique;
}
.field {
width: 500px;
font-size: 25px;
font-style: oblique;
}
.error {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
}
.error1 {
color: red;
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.userlogo {
width: 200px;
border-radius: 100px;
margin-top: -15px;
}
.area {
width: 280px;
height: 30px;
border-radius: 20px;
font-size: 20px;
padding: 5px;
font-style: oblique;
}
.btn {
width: 400px;
height: 40px;
font-size: 30px;
border-radius: 20px;
background-color: rgb(54, 88, 238);
cursor: pointer;
}
.account-link {
font-size: 20px;
}
.checkbox {
display: inline-flex;
font-size: 20px;
}
.remember {
white-space: pre;
}
form .pass-link a:hover,
form .account-link a:hover{
text-decoration: underline;
}
.pass-link {
white-space: pre;
}
.remember-me {
width: 20px;
height: 20px;
}
<!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="signin.css">
<script src="signin.js"></script>
<title>Document</title>
</head>
<body>
<div class= "content">
<div class="inner-body">
<div class ="signin">
<h3><u>Staff Members Sign In</u></h3>
<p class="signin-intro"> This sign in form is meant for staff memebers only, if you are a student, please use this link
Student Account </p>
</div>
<form method="GET" onsubmit=" return formSubmit() " action="#">
<div class="userimage">
<img class="userlogo" src="image/userlogo.png" alt="Picture- User Profile picture">
</div><br>
<div class="error" id= "errorMsg"></div><br>
<div class="error" id= "errorMsg1"></div>
<div class="field">
<label class="stafflabel"> Staff Name </label>
<input class="area" placeholder="staffmember or admin" onclick=" return userValidation()" onchange=" return userValidation()" id="staff" name="staff" type="text">
</div> <br>
<div class="error" id= "errorMsg2"></div>
<div class="field">
<label class="passlabel"> Password </label>
<input class="area" placeholder="password" onclick=" return userValidation()" onchange=" return userValidation()" id="pass" name="pass" type="password">
</div><br>
<div class="checkbox">
<input type="checkbox" class="remember-me">
<label class="remember" for="remember-me">Remember me </label>
<a class="pass-link" href="#"> Forgot password? </a>
</div><br><br><br>
<div class="field">
<input class="btn" type="submit" value="Sign in">
</div> <br>
<div class="account-link">
Didn't create an account yet? Create Account
</div>
</form>
</div>
</div>
</body>
</html>
You can use display: flex; to achieve this easier.
Here is the CodePen: https://codepen.io/Juka99/pen/qBVJdNv
Use flex, remove margin-top, and everything works perfectly. :)
I just made my website header and now I'm trying to build the side bar, however instead of sticking to the left, it's being pushed to the right and I don't know why... but I guess it's because of the float elements that I added in the header? I've tried setting the margins to 0, floating it to the left, and nothing works.
Here's the code:
body {
font-size: 62.5%;
}
:root {
--color-primary: #b22222;
}
/* Box */
#box {
margin: 2% 20%;
}
/* Header */
#header {
background-color: var(--color-primary);
width: 100%;
height: 100px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.oldenhook_icon {
height: 90px;
width: 90px;
margin-left: 15px;
float: left;
}
.header_h1 {
color: #800000;
font-family: "Noto Sans Mono", monospace;
font-size: 2.5rem;
font-weight: 900;
display: inline-block;
margin-left: 30%;
margin-bottom: 0;
}
.flexbox {
display: flex;
flex-direction: row;
float: right;
list-style-type: none;
margin-right: 22%;
}
.list-item {
color: #fff;
padding-left: 5px;
text-decoration: none;
font-size: 12px;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
}
/* Search box */
#searchbox {
top: 40px;
position: relative;
}
<div id="box">
<div id="header">
<i
><img
class="oldenhook_icon"
src="icons/icon2.png"
alt="The Oldenhook Icon"
/></i>
<div>
<h1 class="header_h1">[ oldenhook ]</h1>
<ul class="flexbox">
home
search
global
social net
invite
faq
logout
</ul>
</div>
<div id="searchbox">
<label for="email">Email:</label>
<input name="email" id="email" type="text">
<p>oifjqoifjq</p>
<p>ofijqofiqjf</p>
</div>
</div>
Your code is fine just remove float: right; from class flexbox in css
I think you can add position: absolute; to class .flexbox{}
I'm building homepage for a website for my first web dev module at uni and i'm running into an issue. Below my navigation bar and above the main content section there is a whitespace for some reason. I'm using CSS grid so maybe it's due to a mistake there somewhere but not sure.
Basically I only want 1 column and 3 rows in the grid: Header - where my nav bar will go, a main-content section where a few headlines will go and a footer. But I seem to have a 4th section in between. Initially I had this whitespace below my footer and then I changed the positioning settings to 'stick' the footer to the bottom (not really knowing what I was doing) and now I think the whitespace has been pushed up or something. I want the 'main-content' section to start at the bottom border of the header and end at the top border of the footer and add a background image to it. Thanks in advance for the assistance!
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewpoint"
content="width=device-width, initial scale=1">
<link
href="https://fonts.googleapis.com/css2?family=Orbitron:wght#500&display=swap"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght#700&display=swap"
rel="stylesheet">
<link href="CSS/styles2.css" rel="stylesheet"
type="text/css">
<title>Uwais Kushi-Mohammed</title>
</head>
<body>
<div class="grid">
<div class="header">
<header>
<h1>U <span
style="color: white;">K
</span></h1>
<nav>
<ul class="nav-links">
<li>Home
</li>
<li>Profile
</li>
<li><a href="">Experience
& Education</a>
</li>
<li>Interests
</li>
</ul>
</nav>
</header>
</div>
<div class="main-content">
<div class="greeting">
<h1>Hello,</h1>
</div>
<div class="intro">
<h2>My name is <span
style="color: #2ac984;">Uwais
Kushi-Mohammed</span></span>,
<br />a computer science
student based in Sheffield,
England.</h2>
</div>
<div class="tagline">
<h1>This Is <span
style="color: #2ac984;">What
I Do. </span></h1>
</div>
</div>
<div class="footer">
<div class="footer-content">
<div class="footer-section-about">
<h1 class="logo">U<span
style="color: white;">K
</span></h1>
<p>Welcome to my resume site.
My name is Uwais
Kushi-Mohammed, I am a
first year computer
science student at
Sheffield Hallam
University. If you want to
hire me for a project get
in touch.</p>
</div>
<div class="footer-section-links">
<h1>Quick <span
style="color: white;">Links
</span></h1>
<nav>
<ul>
<li>Home
</li>
<li>Profile
</li>
<li><a href="">Experience
&
Education</a>
</li>
<li>Interests
</li>
</ul>
</nav>
</div>
<div
class="footer-section-contact">
<h1>Contact<span
style="color: white;">
Me</span></h1>
<br />
<form class="contact-form"
action="results.html"
method="GET">
<div>
<input
class="contact-input"
type="text"
id="first-name"
placeholder="First Name...">
</div>
<div>
<input
class="contact-input"
type="text"
id="last-name"
placeholder="Last Name...">
</div>
<div>
<input
class="contact-input"
type="email"
id="email"
placeholder="Email Address...">
</div>
<div>
<textarea
class="message-input"
id="message"
placeholder="Message..."></textarea>
</div>
<button
class="button">Send</button>
</form>
</div>
<div class="footer-bottom">
Copyright 2020 © |
Designed by Uwais
Kushi-Mohammed. All Rights
Reserved.
</div>
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"header"
"main-content"
"footer";
}
header {
background-color: black;
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center ;
height: 70px;
margin-bottom: 0;
}
header h1 {
color: #2ac984;
font-size: 46px;
font-family: 'Orbitron', sans-serif;
padding-left: 30px;
font-weight: 100;
text-align: center;
text-decoration: none;
list-style: none;
}
.nav-links li , .nav-links li a {
text-decoration: none;
list-style-type: none;
padding: 30px;
font-size: 17px;
color: #e4e6e3;
display: inline-block;
font-family: 'Orbitron', sans-serif;
}
header h1:hover {
color: #2ac984;
margin-bottom: 15px;
}
.nav-links a {
transition: all 0.3s ease 0s;
}
.nav-links a:hover {
color: #2ac984;
}
.main-content{
grid-area: main-content;
background-color: black;
}
.greeting h1{
font-family: 'Anonymous Pro', monospace;
font-size: 30px;
color: #e4e6e3;
position: relative;
padding-left: 15%;
}
.intro h2{
font-family: 'Anonymous Pro', monospace;
font-size: 20px;
color: #787672;
text-align: justify;
position: relative;
padding-left: 15%;
}
.tagline h1 {
font-family: 'Anonymous Pro', monospace;
font-size: 40px;
color: #e4e6e3;
position: relative;
padding-top: 100px;
padding-left: 50%
}
.footer {
grid-area: footer;
background-color: #1c1b1b;
height: 350px;
position: relative;
bottom: 0px;
}
.footer .footer-content{
height: 300px ;
display: flex;
}
.footer .footer-content .footer-section-about, .footer-section-links, .footer-section-contact{
flex: 1;
padding: 25px;
}
.footer .footer-content .footer-section-about .logo {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-about p {
font-family: 'Anonymous Pro', monospace;
margin-top: 3px;
font-size: 15px;
color: #787672;
padding-top: 30px;
text-align: justify;
}
.footer .footer-content .footer-section-links h1 {
font-family: 'Orbitron', sans-serif;
color:#2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-links li, .footer-section-links a{
font-family: 'Anonymous Pro', monospace;
color:#dbdbdb;
text-decoration: none;
list-style-type: none;
margin:3px 0 10px 0;
padding-top: 15px;
transition: all 0.3s;
}
.footer-section-links a:hover {
color: #2ac984;
margin-left: 15px;
transition: all 0.3s;
}
.footer-section-contact h1 {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer-section-contact .contact-form .contact-input {
border: 0;
background-color: #c7c3c3;
width: 160px;
margin: 3px ;
padding: 2px;
line-height: 0.7rem;
}
.footer-section-contact .contact-form .message-input{
border: 0;
background-color: #c7c3c3;
width: 240px;
margin:3px;
height: 75px;
line-height: 0.7rem;
padding: 2px;
}
.button{
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 0;
padding: 5px;
margin-left: 3px;
line-height: 0.7rem;
background-color:#c7c3c3;
}
::placeholder{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.footer .footer-bottom {
font-family: 'Anonymous Pro', monospace;
color:#787672 ;
font-size: 15px;
font-weight: 50%;
width: 100%;
background-color: #343a40;
text-align: center;
height: 40px;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
Combined as a snippet:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "header" "main-content" "footer";
}
header {
background-color: black;
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
margin-bottom: 0;
}
header h1 {
color: #2ac984;
font-size: 46px;
font-family: 'Orbitron', sans-serif;
padding-left: 30px;
font-weight: 100;
text-align: center;
text-decoration: none;
list-style: none;
}
.nav-links li,
.nav-links li a {
text-decoration: none;
list-style-type: none;
padding: 30px;
font-size: 17px;
color: #e4e6e3;
display: inline-block;
font-family: 'Orbitron', sans-serif;
}
header h1:hover {
color: #2ac984;
margin-bottom: 15px;
}
.nav-links a {
transition: all 0.3s ease 0s;
}
.nav-links a:hover {
color: #2ac984;
}
.main-content {
grid-area: main-content;
background-color: black;
}
.greeting h1 {
font-family: 'Anonymous Pro', monospace;
font-size: 30px;
color: #e4e6e3;
position: relative;
padding-left: 15%;
}
.intro h2 {
font-family: 'Anonymous Pro', monospace;
font-size: 20px;
color: #787672;
text-align: justify;
position: relative;
padding-left: 15%;
}
.tagline h1 {
font-family: 'Anonymous Pro', monospace;
font-size: 40px;
color: #e4e6e3;
position: relative;
padding-top: 100px;
padding-left: 50%
}
.footer {
grid-area: footer;
background-color: #1c1b1b;
height: 350px;
position: relative;
bottom: 0px;
}
.footer .footer-content {
height: 300px;
display: flex;
}
.footer .footer-content .footer-section-about,
.footer-section-links,
.footer-section-contact {
flex: 1;
padding: 25px;
}
.footer .footer-content .footer-section-about .logo {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-about p {
font-family: 'Anonymous Pro', monospace;
margin-top: 3px;
font-size: 15px;
color: #787672;
padding-top: 30px;
text-align: justify;
}
.footer .footer-content .footer-section-links h1 {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-links li,
.footer-section-links a {
font-family: 'Anonymous Pro', monospace;
color: #dbdbdb;
text-decoration: none;
list-style-type: none;
margin: 3px 0 10px 0;
padding-top: 15px;
transition: all 0.3s;
}
.footer-section-links a:hover {
color: #2ac984;
margin-left: 15px;
transition: all 0.3s;
}
.footer-section-contact h1 {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer-section-contact .contact-form .contact-input {
border: 0;
background-color: #c7c3c3;
width: 160px;
margin: 3px;
padding: 2px;
line-height: 0.7rem;
}
.footer-section-contact .contact-form .message-input {
border: 0;
background-color: #c7c3c3;
width: 240px;
margin: 3px;
height: 75px;
line-height: 0.7rem;
padding: 2px;
}
.button {
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 0;
padding: 5px;
margin-left: 3px;
line-height: 0.7rem;
background-color: #c7c3c3;
}
::placeholder {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.footer .footer-bottom {
font-family: 'Anonymous Pro', monospace;
color: #787672;
font-size: 15px;
font-weight: 50%;
width: 100%;
background-color: #343a40;
text-align: center;
height: 40px;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial scale=1">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght#700&display=swap" rel="stylesheet">
<link href="CSS/styles2.css" rel="stylesheet" type="text/css">
<title>Uwais Kushi-Mohammed</title>
</head>
<body>
<div class="grid">
<div class="header">
<header>
<h1>U <span style="color: white;">K
</span></h1>
<nav>
<ul class="nav-links">
<li>Home
</li>
<li>Profile
</li>
<li><a href="">Experience
& Education</a>
</li>
<li>Interests
</li>
</ul>
</nav>
</header>
</div>
<div class="main-content">
<div class="greeting">
<h1>Hello,</h1>
</div>
<div class="intro">
<h2>My name is <span style="color: #2ac984;">Uwais
Kushi-Mohammed</span></span>,
<br />a computer science student based in Sheffield, England.
</h2>
</div>
<div class="tagline">
<h1>This Is <span style="color: #2ac984;">What
I Do. </span></h1>
</div>
</div>
<div class="footer">
<div class="footer-content">
<div class="footer-section-about">
<h1 class="logo">U<span style="color: white;">K
</span></h1>
<p>Welcome to my resume site. My name is Uwais Kushi-Mohammed, I am a first year computer science student at Sheffield Hallam University. If you want to hire me for a project get in touch.</p>
</div>
<div class="footer-section-links">
<h1>Quick <span style="color: white;">Links
</span></h1>
<nav>
<ul>
<li>Home
</li>
<li>Profile
</li>
<li><a href="">Experience
&
Education</a>
</li>
<li>Interests
</li>
</ul>
</nav>
</div>
<div class="footer-section-contact">
<h1>Contact<span style="color: white;">
Me</span></h1>
<br />
<form class="contact-form" action="results.html" method="GET">
<div>
<input class="contact-input" type="text" id="first-name" placeholder="First Name...">
</div>
<div>
<input class="contact-input" type="text" id="last-name" placeholder="Last Name...">
</div>
<div>
<input class="contact-input" type="email" id="email" placeholder="Email Address...">
</div>
<div>
<textarea class="message-input" id="message" placeholder="Message..."></textarea>
</div>
<button class="button">Send</button>
</form>
</div>
<div class="footer-bottom">
Copyright 2020 © | Designed by Uwais Kushi-Mohammed. All Rights Reserved.
</div>
</div>
</div>
</body>
</html>
It seems that the grid template is causing this issue.
commenting out line 13 or just deleting that line all together should fix it
Your .grid css should look like this when you're done:
.grid {
display: grid;
grid-template-columns: 1fr;
/* grid-template-rows: 1fr 1fr 1fr; */
grid-template-areas:
"header"
"main-content"
"footer";
}
or you can just delete the grid template rows line all together. Let me know if this helps! Good luck!
The following problem only happens in Firefox. The html after my textarea appears in the text box when the page runs in the browser. It works fine on Chrome and Safari. I've cleared my cache but it's still doing it. I can't work out why any code would appear in the box after the closing tag. Screenshot below to better explain the problem.
button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
}
.home-name {
position: absolute;
width: 828px;
height: 38px;
left: 303px;
top: 4184px;
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 25px;
/* identical to box height, or 167% */
text-align: left;
color: #eaeaea;
}
input[type=text] {
padding-left: 20px;
padding-top: 2px;
}
.home-email {
position: absolute;
width: 406px;
height: 38px;
left: 303px;
top: 4236px;
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
font-family: Roboto;
font-style: normal;
font-size: 15px;
line-height: 18px;
/* identical to box height */
color: #d3d3d3;
}
.home-phone {
position: absolute;
width: 406px;
height: 38px;
left: 725px;
top: 4236px;
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
font-family: Roboto;
font-style: normal;
font-size: 15px;
line-height: 18px;
/* identical to box height */
color: #d3d3d3;
}
.home-message {
position: absolute;
width: 828px;
height: 167px;
left: 303px;
top: 4288px;
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 18px;
;
/* identical to box height */
color: #eaeaea;
}
.home-message-contact {
position: absolute;
width: 163px;
height: 47px;
left: 638px;
top: 4490px;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<title>Hello</title>
<body>
<form>
<div class="name-form">
<input type="text" placeholder="Name" class="home-name" required>
</div>
<div class="phone-form">
<input type="text" placeholder="Phone" class="home-phone" required>
</div>
<div class="email-form">
<input type="text" placeholder="Email" class="home-email" required>
</div>
<div class="message-form">
<textarea placeholder="Message" class="home-message" required></textarea>
</div>
</form>
<button class="home-message-contact" type="submit">Submit</button>
Looking on your code, you forgot to close </head>. Although it could be unclosed quote, or some script. Your code works fine. You can attach a full code of your file.
UPDATED
I'v recreated your issue. You forgot to close </textarea>
Like this
<textarea placeholder="Message" class="home-message" required></textarea>
This what happens when I removed </textarea>
UPDATE 2
Try to put <button class="home-message-contact" type="submit">Submit</button> inside tag <form>.
Or use construction like this
<div>
<form id="my-form">
<label for="name">Name:</label>
<input type="text" name="name"></input>
</form>
<!-- ... -->
<button type="submit" form="my-form">Submit</button>
</div>
Your question is not clear, however I found same results across browsers.
Closing of head is missing </head> is your html
just change it and refresh on Firefox pressing Shift + F5.
When I open my HTML file on Chrome, the HTML and CSS are shown properly. However, after I uploaded it on a server and when i open the website from the URL, it is being displayed all wrong. What is the reasoning behind this? I used the code given by Mailchimp for the newsletter html and then modified the design.
HTML:
<!-- NEWSLETTER START-->
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://whammychat.us18.list-manage.com/subscribe/post?u=87245bd3ecc92795b3acf19b0&id=5d33f134e3" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>What to Stay Updated?</h2>
<p class="description2">We hired a team of Koalas to write our newsletters. <br> They sleep 18 hours a day so, don't worry about spam! </p>
<p class="description2"> We just want to inform you when Whammychat is available and any other crazy things our team is up to.</p>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<br>
<div class="mc-field-group">
<label for="mce-EMAIL" id="emailadd">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="personalinfo">
</div>
<div class="mc-field-group">
<label for="mce-FNAME" id="firstname">First Name </label>
<input type="text" value="" name="FNAME" class="" id="personalinfo">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_87245bd3ecc92795b3acf19b0_5d33f134e3" tabindex="-1" value=""></div>
<br>
<p class="policy"><br><br>By clicking on Subscribe, you automatically agree to our newsletter policies.<p>
<br>
<input type="image" name="submit" class="submit" src="Subscribe%20Button.png" border="0" value="Subscribe" alt="Submit">
</div>
</form>
</div>
<!-- NEWSLETTER END-->
CSS:
/* NEWSLETTER*/
form div input {
font-family: Helvetica;
}
label {
display: inline-block;
float: left;
width: 50%;
text-align: right;
}
#personalinfo {
display: inline-block;
float: left;
width: 15vw;
height: 2.5vw;
margin-top: 2%;
margin-left: 3%;
border: solid #3fa6d2;
border-radius: 4px;
}
#media only screen and (min-width: 700px) {
.description2 {
font-size: 1.8vw;
font-family: Helvetica;
margin-left: 10%;
margin-right: 10%;
line-height: 1.5;
}
#personalinfo {
display: inline-block;
float: left;
width: 15vw;
height: 2.5vw;
margin-top: 2%;
margin-left: 3%;
border: solid #3fa6d2;
border-radius: 4px;
}
#firstname {
font-size: 1.8vw;
}
#emailadd {
font-size: 1.8vw;
}
.indicates-required{
font-size:1.5vw
}
.policy {
font-size: 1.5vw;
margin: 10% 10% -1% 10%;
font-family: Helvetica;
}
.submit {
width: 25%;
margin-top: -9%;
margin-bottom: -7%;
}
}
#media only screen and (max-width: 700px) {
.description2 {
font-size: 90%;
font-family: Helvetica;
margin-left: 10%;
margin-right: 10%;
line-height: 1.5;
}
#personalinfo {
display: inline-block;
float: left;
width: 25%;
height: 20px;
margin-top: 2%;
margin-left: 3%;
border: solid #3fa6d2;
border-radius: 4px;
}
.indicates-required{
font-size: 80%;
margin-top: 5%;
margin-bottom: -2%;
font-family: Helvetica;
}
.policy {
font-size: 80%;
margin: 10% 10% -1% 10%;
}
.submit {
width: 20%;
margin-top: -9%;
margin-bottom: -7%;
}
}
.mc-field-group label {
font-size: 1.8vw;
margin-top: 2%;
font-family: Helvetica;
}
/* Style the input elements and the submit button */
.submit {
transition: 1s ease;
}
.submit:focus {
outline:0;
}
.submit:hover{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: 0.5s ease;
}
Not all servers were created equal.
It's possible that some images or CSS files were not loaded because the server blocked them. This is often related to headers sent from the server's response which browsers usually respect and block.
For example, the server could return this header:
Access-Control-Allow-Origin: https://www.only-my-domain.com
which means that the domain your site is being served from does not allow loading javascript and css files from domains other then the ones specified in the header.
Missing fonts or other assets could also be the problem.
Check the browser's console and network tabs for errors and warning.
You're using a scheme-relative URL: link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css"
If you open a page containing this from the file system, the scheme is file://. I'm guessing you don't have a drive or network location such that "file://cdn-images.mailchimp.com/embedcode/classic-10_7.css" resolves correctly.
Add http: or https: to the beginning of that URL if you want it to resolve while browsing from the file system.
#Shahar's answer is also relevant. CORS is likely a problem with some of the links you're using as well.