This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
At the bottom of the form. There is white.
I can't recreate it in a snippet because the snippet isn't big enough to recreate the problem. Here is a picture of what is happening and below that is the code.
I need to get rid of that white space so that the div covers the whole page. Any helps is appreciated
/* styles */
/* called by your view template */
* {
box-sizing: border-box;
}
html {
height: 100%;
width: 100%;
}
body {
font-family: "Comic Sans MS", "Comic Sans MS", helvetica, arial, sans-serif;
width: 100%;
height: 100%;
margin: 0;
}
h1 {
text-align: center;
font-style: oblique;
color: red;
font-size: 100px
}
#join {
width: 100%;
height: 100%;
background: repeating-linear-gradient( 225deg, cyan, blue 250px);
border: 1px black solid
}
.bold {
font-weight: bold;
}
#joinForm {
display: block;
width: 100%;
height: 100%;
}
#username {
margin: auto;
display: block;
margin-bottom: 5px;
padding: 10px;
width: 35%;
border-color: blue;
border-radius: 25px;
font-size: 15px;
font-family: "Comic Sans MS", "Comic Sans MS", helvetica, arial, sans-serif;
background: #D4D2D2;
color: red;
}
#play {
margin-left: 32.5%;
text-align: center;
font-size: 28px;
width: 35%;
border-radius: 1px;
background-color: red;
border: 1px solid grey;
box-shadow: 2px 2px black;
cursor: pointer;
font-family: "Comic Sans MS", "Comic Sans MS", helvetica, arial, sans-serif;
}
#play:hover {
background-color: yellow;
}
#play:active {
box-shadow: none;
}
#ctx {
width: 100%;
height: 100%;
display: none;
border: black 1px solid
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animz.io</title>
<meta name="description" content="A cool thing made with Glitch">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's client-side javascript file -->
<script src="/client.js" defer></script>
</head>
<body>
<main>
<div id="join">
<form id="joinForm">
<h1>
Animz.io
</h1>
<input placeholder="Username here" id="username">
<button id='play' onclick="startgame()">Play!</button>
</form>
</div>
<canvas id="ctx"></canvas>
</main>
</body>
</html>
Your parent's height must be determined if you want to work with a percentage value of height.
Add this to your css or style tag
html,body,main,#join,#joinform {
height: 100%;
width: 100%;
min-height: 100% !important;
}
with regards..
Tested solution
Replaced
height: 100%;
with
height: 100vh;
in #joinForm
Also, I see a lot of CSS styles that are repetitive and could be optimized for better performance and maintenance. You would thank yourself later if you get the basics right from beginning. Hope this solves your issue. You can read more about the fix here.
Related
with the following html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Company Home Page with Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="about">
<h4><span>A work selection by </span><a class="sobre" href="">sfgndfyj</a></h4>
</div>
</header>
<main>
<article class="uno">
<h1>
<span id="ppal" class="title_part" style="display: block; font-size: 12vw";>stills & moving image</span>
<span id="sec" class="title_part" style="display: block; font-size: 11vw";>TECHNICAL PRODUCTION</span>
</h1>
</article>
<article class="dos">
</article>
</main>
</body>
</html>
and the following css:
html {
box-sizing: border-box;
font-size: 16px;
}
body {
max-width: 1500px;
margin: 0 auto;
}
/* -------------------------------------- fonts */
#font-face {
font-family: 'Alternate Gothic';
src: url('Alternate Gothic W01 No 3.ttf') format('truetype');
}
#font-face {
font-family: 'Times Roman';
src: url('OPTITimes-Roman.otf') format('opentype');
}
.sobre {
color: black;
}
.sobre:hover {
transition: background-color .1s ease-out,color .1s ease-out;
position: relative;
overflow: hidden;
text-decoration: underline;
background-color: black;
color: white;
}
h1 {
font-family: 'Alternate Gothic';
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
font-size: clamp(.5rem, 10vw, 1rem);
}
h4 {
font-weight: lighter;
letter-spacing: .1rem;
}
#ppal {
word-spacing: 90%;
}
.title_part {
display: inline;
position: relative;
}
/* --------------------------------- spacing */
.about {
text-align: center;
margin: 0 5vw;
}
header {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 2.5rem;
}
.dos {
border-width: 1px 0 0 0;
border-style: solid;
border-color: #000;
margin: 0 2.5rem;
}
I have tried for hours to find out why the h1 goes beyond the limits of its parent.
I am trying to keep h1 in two lines of (responsive) text. When you grow the window it goes above the 1600px limit placed on the body.
No matter if I try max-width, overflow, etc that it keeps getting out the box.
Can anybody tell me what am I doing wrong? Im trying to figure out how to stop the h1 to go beyond the above limit.
Best
It is the white-space: nowrap; which prevents your span to break your lines when the content is filled in the parent. Remove that and your code will work fine
Working Fiddle
html {
box-sizing: border-box;
font-size: 16px;
}
body {
max-width: 1600px;
margin: 0 auto;
border: 1px solid red;
}
main {
}
#font-face {
font-family: "Alternate Gothic";
src: url("Alternate Gothic W01 No 3.ttf") format("truetype");
}
#font-face {
font-family: "Times Roman";
src: url("OPTITimes-Roman.otf") format("opentype");
}
.about {
text-align: center;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 5vw;
}
.fulltitle {
}
h1 {
font-family: "Alternate Gothic";
text-align: center;
border: 1px solid red;
display: inline-block;
}
.uno {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 4vw;
max-width: 1600px;
position: relative;
}
.title_part {
margin: 0 auto;
/* white-space: nowrap; */
}
<header>
<div class="about">
<h4><span>A work selection by </span>mfowmyoxsnk</h4>
</div>
</header>
<main>
<article class="uno">
<div class="fulltitle">
<h1>
<span class="title_part" style="display: block; font-size: 12vw" ;
>stills & moving image</span
>
<span class="title_part" style="display: block; font-size: 11vw" ;
>TECHNICAL PRODUCTION</span
>
</h1>
</div>
</article>
<article class="dos"></article>
</main>
If you want your title to return to the line you have to put wrap like this
white-space: wrap;
Like the others have said you need to remove the "white-space", this will cause the text to go in to two lines. If you want to prevent this behavior you will have to change the font-size to be smaller.
After that, remove the margin from ".uno". This will ensure that the h1 element remains in the div. The margin currently pushes it out the div no matter the size of the child, even if the text is responsive.
Another recommendation beyond what you're looking for, instead of wrapping two spans in a single "h1", remove the h1, and replace the two spans with 1 "h1" element and the other with a "h2" or whatever subheader element depending on the size you want. If you are trying to modify the positions of elements(center, left, right) instead of margins I recommend looking into flexbox.
.uno {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
max-width: 1600px;
position: relative;
}
.title_part {
margin: 0 auto;
}
<div class="fulltitle">
<h1 class="title_part" style="display: block; font-size: 5vw;";>stills & moving image</h1>
<h2 class="title_part" style="display: block; font-size: 3vw; text-align: center; ">TECHNICAL PRODUCTION</h2>
</div>
My bad for the formatting, I'm still learning how to post answers on stackoverflow.
I have found that:
(index.html)
font-size placed in span is making it grow endlessly because of the vw.
(style.css)
clamp will make it responsive the way I want to, with a max-limit to whatever I want in the final layout.
Posting what I get as soon as I have it ready
Below what I accept as a solution to the issue I was having with h1.
It does not jump to a new line once I changed the units applied on index.html / .uno / span you can see applied on the very first post, and some tweaking on the css that you can see hereunder.
I did not need white-space.
I welcome any feedback to fine tune it.
(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Company Home Page with Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="about">
<h4><span>A work selection by </span><a class="sobre" href="">sfgndfyj</a></h4>
</div>
</header>
<main>
<article class="uno">
<h1>
<span id="ppal" class="title_part" style="display: block;";>stills & moving image</span>
<span id="sec" class="title_part" style="display: block;";>TECHNICAL PRODUCTION</span>
</h1>
</article>
<article class="dos">
</article>
</main>
</body>
(style.css)
html {
box-sizing: border-box;
font-size: 16px;
}
body {
max-width: 1500px;
margin: 0 auto;
}
/* -------------------------------------- fonts */
#font-face {
font-family: 'Alternate Gothic';
src: url('Alternate Gothic W01 No 3.ttf') format('truetype');
}
#font-face {
font-family: 'Times Roman';
src: url('OPTITimes-Roman.otf') format('opentype');
}
.sobre {
color: black;
}
.sobre:hover {
transition: background-color .1s ease-out,color .1s ease-out;
position: relative;
overflow: hidden;
text-decoration: underline;
background-color: black;
color: white;
}
h1 {
font-family: 'Alternate Gothic';
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
font-size: clamp(1rem, 11.3vw, 11rem);
margin: 2rem 0;
}
h4 {
font-weight: lighter;
letter-spacing: .1rem;
font-size: clamp(.1rem, 2.5vw, 1rem);
}
#ppal {
font-size: 50%;
font-weight: 400;
word-spacing: 100%;
}
#sec {
word-spacing: 30%;
}
.title_part {
display: inline;
position: relative;
}
/* --------------------------------- spacing */
.about {
text-align: center;
margin: 0 5vw;
}
header {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 1rem;
}
.dos {
border-width: 1px 0 0 0;
border-style: solid;
border-color: #000;
margin: 0 1rem;
padding: 1rem 0;
}
Best
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 12 months ago.
It's good on big screens, but when I resize the window to less than 600px, everything aligns on left. I wanted it to break on different lines if the screen size is less + aligned centre. Can you please help, as I am frustrated with this...don't know what am I doing wrong. Also, is there a way to add some breakpoint manually to break text (or other things) on different screens manually.
Thankyou.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght#800&family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
/* overflow-y:hidden; */
}
:focus {
outline: none;
}
:root {
/* Colors*/
--primary: #FF7300;
--primary-light: #FFE3CC;
--secondary: #334762;
--white: #ffffff;
/* Fonts */
--font-one: 'Poppins', sans-serif;
--font-two: 'Exo', sans-serif;
--font-three: 'Baloo Da 2', cursive;
--font-four: 'Fira Sans', sans-serif;
--font-five: 'Lato', sans-serif;
}
body {
background-color: var(--primary-light);
font-family: var(--font-four);
color: var(--secondary);
font-size: 16px;
}
section {
width: 100%;
height: 100vh;
}
.head__container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0px 20px;
}
.head__container h2 {
font-family: var(--font-two) !important;
font-size: 36px !important;
font-weight: 900 !important;
line-height: 1.1;
color: var(--secondary);
margin-top: 20px;
}
.head__container > h2 span {
color: var(--primary) !important;
}
a.start-button {
margin-top: 30px;
font-family: var(--font-three);
min-width: 120px;
padding: 15px 28px;
background-color: var(--primary);
color: var(--white);
font-size: 18px;
font-weight: 900;
line-height: 18px;
text-decoration: none;
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="csshake.min.css">
<link rel="stylesheet" href="color-brewer.min.css">
<title>Select10X</title>
</head>
<body>
<section id="main" class="head__container">
<div class="logo">
<img src="logo.svg" alt="" width="250px">
</div>
<h2>
Hello There!
</h2>
<a class="start-button" href="#name">
Explore
</a>
</section>
</body>
</html>
h2 is a block level element, whose default text-align is left unless specified.
What's happening is that while h2 block is center-aligned, its text content inside is left-aligned. You simply need to add text-align: center; to your h2 as in the snippet below.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght#800&family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
/* overflow-y:hidden; */
}
:focus {
outline: none;
}
:root {
/* Colors*/
--primary: #FF7300;
--primary-light: #FFE3CC;
--secondary: #334762;
--white: #ffffff;
/* Fonts */
--font-one: 'Poppins', sans-serif;
--font-two: 'Exo', sans-serif;
--font-three: 'Baloo Da 2', cursive;
--font-four: 'Fira Sans', sans-serif;
--font-five: 'Lato', sans-serif;
}
body {
background-color: var(--primary-light);
font-family: var(--font-four);
color: var(--secondary);
font-size: 16px;
}
section {
width: 100%;
height: 100vh;
}
.head__container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0px 20px;
}
.head__container h2 {
font-family: var(--font-two) !important;
font-size: 36px !important;
font-weight: 900 !important;
line-height: 1.1;
color: var(--secondary);
margin-top: 20px;
text-align: center;
}
.head__container>h2 span {
color: var(--primary) !important;
}
a.start-button {
margin-top: 30px;
font-family: var(--font-three);
min-width: 120px;
padding: 15px 28px;
background-color: var(--primary);
color: var(--white);
font-size: 18px;
font-weight: 900;
line-height: 18px;
text-decoration: none;
}
<section id="main" class="head__container">
<div class="logo">
<img src="logo.svg" alt="" width="250px">
</div>
<h2>
One-click Solution for <span>Hirings</span>.
</h2>
<a class="start-button" href="#name">
Start Assessment
</a>
</section>
Hi im a begginer web developer and im making a practice.I want to change my span's label color when i hover to "container" ( btw i also want to change my border's properties as you can see in my code (container :hover))
I hope I explained myself well
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body{
background-color: #14213d;
margin: 0;
}
.container li{
list-style: none;
}
.container{
border: 2px solid #fca311;
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
.container:hover{
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
background-color: #43aa8b;
}
#mainm:hover{
color: white;
}
<!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="style.css">
</head>
<body>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
Move the container styles to #mainm and add the color: white; to :hover.
Make note of the other styles I changed to clean it up a bit. I added text-align: center; to the id and removed the height. Instead of a fixed height just use padding.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body {
background-color: #14213d;
margin: 0;
}
.container li {
list-style: none;
}
.container {
width: 100%;
height: 100%;
}
li#mainm {
border: 2px solid #fca311;
width: 400px;
padding: 30px 0px;
position: relative;
left: 720px;
top: 400px;
}
#mainm {
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
text-align: center;
}
#mainm:hover {
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
color: white;
background-color: #43aa8b;
}
<!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="style.css">
</head>
<body>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
:root {
--colorsame: #1e90ff;
}
.container{
border: 2px solid var(--colorsame);
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: var(--colorsame);
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
I'm building my first proper website from stratch and I've been using some of your responses which have been really helpful so thanks to everyone :)
I just have a question, but will probably have more in the future.
I would like the website to be responsive and I already put the viewpoint code, however the text itself is not responsive and due to this, when you reduce the size of the screen there is a white patch at the right side of the page that shouldnt be there. I was wondering if anyone could help me find out whats wrong with my code.
Thanks!
/* Text properties */
body {
font-family: 'Futura', sans-serif;
margin: 0;
padding: 0;
font-size: 10px;
}
h1 {
position: relative;
left:70vw;
top:30vh;
text-align: right;
font-size: 3em;
color: white
}
h2 {
font-family: 'Roboto', sans-serif;
position: relative;
left:70vw;
top:28vh;
text-align: right;
font-size: 2em;
color: white
}
h3 {
position: relative;
left:70vw;
top:28vh;
text-align: right;
font-size: 14px;
color: white
}
h4 {
position: relative;
font-family: 'Arial';
left:70vw;
top:27vh;
text-align: right;
font-size: 14px;
color: white
}
a {
color: #FFFFFF;
}
p {
margin: 0;
padding: 0;
}
.bg {
/* The image used */
background-image: url("https://eskipaper.com/images/dark-background-4.jpg");
/* Full height */
height: 96vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#title
{
position: absolute;
}
.footer p
{
padding-top: 6px;
font-size: 12px;
}
.footer {
margin: 0px;
Height:30px;
width:100%;
background-color: black;
color: white;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link href="C:\Users\Tola\Documents\Tola Photography\Landing Page\style.css" rel="stylesheet">
<title>Tola Akindipe</title>
</head>
<body>
<div class="bg">
<div id="title">
<h1>Tola Akindipe</h1>
<h2>Photography</h2>
<h3><a href="/TolaMobile"style="text-decoration: none;" >Mobile Portfolio </a> <a href="/TolaDSLR"style="text-decoration: none;" > DSLR Portfolio</a></h3>
<h4><a href="/contact" style="text-decoration: none;" >Contact</a></h4>
</div>
</div>
<div class="footer">
<p>Copyright 2020 # Tola Akindipe - All Rights Reserved</p>
</div>
</body>
</html>
Try to change your CSS to this:
/* Text properties */
body {
font-family: 'Futura', sans-serif;
margin: 0;
padding: 0;
font-size: 10px;
height: 100%;
width: 100%;
}
h1 {
text-align: right;
font-size: 3em;
color: white
}
h2 {
font-family: 'Roboto', sans-serif;
text-align: right;
font-size: 2em;
color: white
}
h3 {
text-align: right;
font-size: 14px;
color: white
}
h4 {
font-family: 'Arial';
text-align: right;
font-size: 14px;
color: white
}
a {
color: #FFFFFF;
}
p {
margin: 0;
padding: 0;
}
.bg {
/* The image used */
background: url("https://eskipaper.com/images/dark-background-4.jpg") center center no-repeat;
/* Screen Height - Footer Height */
height: calc(100vh - 30px);
/* Set The Background Size */
background-size: cover;
/* Align The Content To The Center */
display: flex;
justify-content: center;
align-items: center;
}
.footer p {
padding-top: 6px;
font-size: 12px;
}
.footer {
margin: 0px;
Height: 30px;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
When I am trying to add a border to a div element on my website, I am getting these weird borders.
This is the result I was looking for:
intended result
HTML
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
CSS
.outlined-button
{
border: 3px solid #fff;
border-radius: 10px;
box-sizing: border-box;
height: 48px;
width: 140px;
}
.outlined-button-text
{
color: #fff;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
}
The cause of the border is that a elements have inline flow while the enclosed p element has display block behaviour. Inline elements have no inherited width, this causes the border property to think that the element is 0 px wide, and places a border where it thinks the element is.
A fix for your solution is to use display: block for the link element(https://jsfiddle.net/qtdz296j/1/)
I also attached an alternative solution:
body {
background: #162CEA;
padding: 2rem 1rem;
}
.heading {
color: #FFF;
}
.button {
padding: .5rem 1rem;
border-radius: .5rem;
}
.filled-button {
background: #FFF;
}
.outline-button {
border: 3px solid #FFF;
color: #FFF;
}
<h1 class="heading">hey<h1>
<a class="button filled-button">sign up</a>
<a class="button outline-button">log in</a>
Can't tell anything without the rest of the css and html. Your post starts in the middle of a rule. I'd try playing with it and see what you can change. Make sure your css is affecting the elements you want it to be affecting.
Edit: Try changing your <p> tags inside the buttons to <span>. Or better yet, don't enclose them in anything, and just style the button text directly. I also highly suggest looking into the correct use of <button> vs. <a>. It's a lot easier to make buttons work when they're actually buttons. But changing the <p>s to an inline element like <span> will fix your immediate problem.
this works if you just need a border around that div. cleaned it up a little and added a missing ;. it there are a lot of nested classes and you just need to target the right one. there are only 2 divs in this, so if you are talking about the outer/parent div, just give that an id and target it. Enjoy!
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
</body>
<style>
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.filled-button-text {
display: table-cell;
vertical-align: middle;
}
.filled-button {
float: left;
width: 140px;
height: 48px;
margin-left: 15%;
background: #FFFFFF;
border-radius: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #000000;
display: table;
text-align: center;
}
.outlined-button {
width: 140px;
height: 48px;
box-sizing: border-box;
}
.outlined-button-text {
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #FFFFFF;
}
.buttons {
border: 2px solid black;
}
</style>
</html>
You can use this code
body {
margin: 0;
padding: 0;
font-family: Roboto;
background-color: #162cea;
}
.headline {
text-align: center;
color: #ffffff;
}
.buttons {
padding: 30px;
margin: 0 auto;
text-align: center;
}
.filled-button {
border-radius: 10px;
color: #000000;
font-weight: bold;
font-size: 30px;
height: 55px;
width: 140px;
background-color: #ffffff;
display: inline-block;
cursor: pointer;
margin: 0 10px 0 0;
padding: 0;
}
.filled-button .filled-button-text {
margin: 0;
padding: 9px;
}
.outlined-button {
border-radius: 10px;
color: #ffffff;
font-weight: bold;
font-size: 30px;
height: 52px;
width: 140px;
background-color: #162cea;
display: inline-block;
border: 3px solid #ffffff;
cursor: pointer;
margin: 0 0 0 10px;
padding: 0;
}
.outlined-button .outlined-button-text {
margin: 0;
padding: 9px;
}
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
Hello I hope this will help. and a small advice, as you might already know it. do not use a block level element inside a inline element even though you are changing the display property its safer that way.
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.button {
width: 100%;
text-align: center;
}
.filled-button-text,
.outlined-button-text {
display: block;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 1.75em;
line-height: 2.25em;
width: 100%;
text-align: center;
}
.outlined-button-text {
color: #FFFFFF;
}
.filled-button {
background: #FFFFFF;
}
.filled-button,
.outlined-button {
width: 49%;
display: inline-block;
border: 3px solid #FFFFFF;
box-sizing: border-box;
display: inline-block;
border-radius: 0.5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button">
<span class="filled-button-text">sign up</span>
</a>
<a class="outlined-button">
<span class="outlined-button-text">log in</span>
</a>
</div>
</div>
</body>
</html>