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>
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
I have unsuccessfully been attempting to change the font family for my top navigation bar to Ubuntu. Currently, the text is not changing and is reverting to this default.
I have experimented with changing it to a div and improving specificity, but it's not working.
I'm not sure if it's being overwritten by the font settings I have put on top?
Would appreciate any guidance on this!
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
#importurl('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700');
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');
* {
font-family: system-ui, sans-serif;
}
* {
margin: 0;
padding: 0;
}
header {
font-family: 'Ubuntu';
}
body {
font-family: 'Montserrat';
text-align: left;
}
/*typography*/
h1 {
font-family: 'Montserrat';
font-style: normal;
font-weight: bold;
font-size: (45px+1vw);
line-height: 55px;
text-align: center;
letter-spacing: 1px;
}
h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: calc(30px+1vw);
line-height: calc(37px+1vw);
letter-spacing: 1px;
color: #FFFFFF;
}
h3 {}
ul {
list-style: inside disc;
font-family: 'Montserrat';
font-style: normal;
font-weight: normal;
font-size: calc(16px+1vw);
line-height: calc(22px+1vw);
color: #FFFFFF;
}
/* Header */
header {
width: 100%;
height: 122px;
background: #FFFFFF;
position: fixed;
}
.wrapper {
width: 90%;
margin: 0 auto;
}
.logo {
width: 30%;
float: left;
text-align: left;
line-height: 122px;
}
nav {
float: center;
line-height: 122px;
}
nav a {
font-family: 'Ubuntu';
text-decoration: none;
letter-spacing: 4px;
font-size: calc(50px+1vw);
color: #616161;
padding: 36px 10px;
margin: 0 1 px;
}
nav a:hover {
background: #F3EA65;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- <div class="box-area"> -->
<header>
<div class="wrapper">
<div class="logo">
<img src="asdf.png" alt="Logo" width="25%" ;>
</div>
<nav>
about
our team
who we help
get involved
Contact
Donate
</nav>
</div>
</header>
It is better to include the fonts link in header tag in HTML and then run.Also add space after #import in second link.
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;
}
I'm relatively new to HTML/CSS, but like to think I have a rather good grasp on most aspects. However, this confuses me.
On my dummy website, no matter what new element I add, it's automatically being placed in a specific position near the top of the page. I've tried fiddling with the CSS but to no avail. In this example, the p element with value "Example element" is the last element in the code but appears just under the nav in the code snippet.
You may have to run the snippet fullscreen; I'm not sure as I haven't done any viewport stuff and it's been made to fit my abnormally-wide monitor.
Maybe I haven't been introduced to this particular concept yet.
#charset "UTF-8";
#font-face {
font-family: 'Gill Sans Std';
src: url(GillSansStd.otf) format("opentype");
}
#font-face {
font-family: 'SofiaPro';
src: url(SofiaPro.otf) format("opentype");
}
#logo {
margin: auto;
display: block;
opacity: 0.6;
}
header > h1 {
margin: 0 auto;
display: block;
border-style: none none solid none;
border-width: thin;
text-align: center;
font-family: "Bebas Neue", sans-serif;
font-size: 90px;
width: 380px;
}
nav {
margin-top: 55px;
margin-left: 650px;
margin-bottom: 20px;
}
nav > a {
margin-left: 85px;
margin-right: 85px;
font-family: "Raleway";
font-weight: bold;
padding: 10px;
}
nav > a:link {
color: black;
text-decoration: none;
}
nav > a:visited {
color: black;
text-decoration: none;
}
nav > a:hover {
background-color: black;
color: white;
}
#hero-content {
float: left;
margin-left: 90px;
margin-top: 150px;
}
#title {
font-size: 30px;
font-family: SofiaPro, sans-serif;
margin-bottom: 60px;
}
#subhead {
font-family: 'Gill Sans Std';
font-weight: 100;
font-size: 18px;
color: dimgrey;
border-style: none none solid none;
border-bottom-width: thin;
border-color: dimgrey;
padding-bottom: 10px;
padding-right: 15px;
padding-left: 10px;
}
#hero {
float: right;
margin-top: 40px;
margin-right: 40px;
}
#heropara {
width: 600px;
margin-top: 60px;
font-family: 'Raleway';
font-size: 20px;
font-weight: 800;
}
<!doctype html>
<html lang="en-gb">
<head>
<title>Blah Group</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="mainstyle.css" type="text/css" />
</head>
<body>
<header>
<h1>Foo</h1>
</header>
<nav>
BLAH
BLAH
BLAH
BLAH
BLAH
</nav>
<div id="hero-content">
<h1 id="title">BLAH</h1>
<h2 id="subhead">BLAH</h2>
<p id="heropara">Lorem Ipsum blahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
</div>
<img id="hero" src="https://www.littlethings.info/wp-content/uploads/2014/04/dummy-image-green-e1398449160839.jpg" height="200" width="200" />
<p>Example element</p>
</body>
</html>
This is my first html/css project. I tried to use nav and ul tags to put a Log in option on the top right corner over the image. When I do it shifts everything from the middle. I did google before posting but I haven't been successful. I am just wanting to know if I have to float it over or mess with the padding and margins? Here is the html markup`
<!DOCTYPE html>
<html>
<head>
<title>AudioPhile</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Audio<img class="logo" src="https://image.ibb.co/n2A7gb/bar_diagram.png" alt=" folder with white music bars">Phile</h1>
<p>Create. Play. Share music anywhere, on any device with unlimited free storage.</p>
<input class="signup" type="email" id="myEmail" value="Type Your Email Here">
<a class="btn-1" href="#">Get Started</a>
<footer class="credits">© Natalie Pickrom</footer>
</div>
</div>
</section>
</body>
</html>`
The CSS:`#import url('https://fonts.googleapis.com/css?family=Archivo+Narrow|Nunito:200');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background:linear-gradient(0deg,rgba(64,64,64,0.8),rgba(64,64,64,0.8)),url(https://preview.ibb.co/jZbkZw/james_stamler_153487.jpg) no-repeat 95% 95% ;
background-size: cover;
display: table;
top:0;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%
max-width: none;
}
.content {
max-width:500px;
margin: 0 auto;
text-align:center;
}
.content h1 {
font-family: "Archivo Narrow", Helvetica, sans-serif ;
color: #F9F3F4;
text-shadow: 0px 0px 300px #000;
font-size: 6em;
padding:0px;
margin:0px;
}
.content p {
font-family: Nunito, "Open Sans", sans-serif;
font-size: 1.253em;
color:#F9F3F4;
Paddding: 0px;
margin-top: 0px;
}
.signup {
border: 0px;
font-family: Nunito, "Open Sans", sans-serif;
letter-spacing: 2px;
color: rgba(128,128,128,0.7) ;
padding: 5px;
width: 67%;
}
.btn-1 {
border-radius:0px;
background-color: #008CBA;
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 3px 10px 4px;
width:50%;
}
.credits {
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
padding: 10px;
}
#media screen and (max-width: 768px) {
.content h1 {
font-size:4em;
}
.btn-1 {
padding: 2px 10px 3px;
width: 25%;
}
p {
font-size: .5em;
}
}
`
Here is the JSfiddle https://jsfiddle.net/1ysegrd6/
Here is what I want to achieve. I want log in where they have home subscribe