I'm trying to make the card component responsive for the #media screen (max-width: 768px) but I'm getting a small image size that is shrunk.
i tried setting the height of the container to different sizes using vh, % but none of it seems to working like I wanted. Please spare some of your time to review the code and help me. Thank you.
Image link for the error:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;700&family=Lexend+Deca&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css" />
<title>Responsive Card</title>
</head>
<body>
<div class="container">
<div class="card">
<div class="card__header">
<h1>Get <span>insights</span> that help your business grow.</h1>
</div>
<div class="card__paragraph">
<p>Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
</div>
<div class="card__footer">
<span>
<h2>10k+</h2>
<p>Companies</p>
</span>
<span>
<h2>314</h2>
<p>Templates</p>
</span>
<span>
<h2>12M+</h2>
<p>Queries</p>
</span>
</div>
</div>
<div class="img__box">
<div class="overlay"></div>
</div>
</div>
</body>
</html>
Default Code for Desktop screen:
body {
background-color: var(--background-color);
width: 100%;
height: 100vh;
color: #fff;
font-family: var(--body-font);
}
h1,
h2 {
font-family: var(--header-font);
}
.container {
position: relative;
max-width: 1120px;
height: auto;
display: flex;
padding: 25px;
margin: 10vh auto;
}
.card {
position: relative;
background-color: var(--card-background);
position: relative;
width: 100%;
height: auto;
padding: 3rem;
border-radius: 6px 0 0 6px;
}
.card__header {
font-family: var(--header-font);
font-size: 1.2rem;
margin-bottom: 25px;
}
.card__header span {
color: var(--image-overlay);
}
.card__paragraph {
color: var(--paragraph);
margin-bottom: 50px;
line-height: 2rem;
font-size: 1rem;
}
.card__footer {
display: flex;
}
.card__footer span {
margin-right: 3.5rem;
}
.card__footer h2 {
margin-bottom: 0.4rem;
}
.card__footer p {
color: var(--paragraph);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.8rem;
}
.img__box {
position: relative;
background: url(/img/img2.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: auto;
border-radius: 0px 6px 6px 0px;
}
.img__box .overlay {
background-color: var(--image-overlay);
opacity: 0.7;
width: 100%;
height: 100%;
border-radius: 0px 6px 6px 0px;
}
/*Code For making Responsive for screen breakpoint 768px*/
#media screen and (max-width:768px) {
.container {
display: flex;
flex-direction: column-reverse;
width: 80%;
height: 100%;
margin: 50px auto;
}
.card {
width: 100%;
height: 100%;
padding: 2rem;
border-radius: 0 0 6px 6px;
text-align: center;
margin-bottom: 50px;
}
.img__box {
width: 100%;
height: 100%;
border-radius: 6px 6px 0 0;
}
.img__box .overlay {
border-radius: 6px 6px 0 0;
}
.card__footer {
display: block;
}
}
Here hope this solves the issue. Snippet won't show the actual result. Try with your code.
body {
background-color: var(--background-color);
width: 100%;
height: 100vh;
color: #fff;
font-family: var(--body-font);
background:#000;
}
h1,
h2 {
font-family: var(--header-font);
}
.container {
position: relative;
max-width: 1120px;
height: auto;
display: flex;
padding: 25px;
margin: 10vh auto;
}
.card {
position: relative;
background-color: var(--card-background);
position: relative;
width: 100%;
height: auto;
border-radius: 6px 0 0 6px;
}
.card__header {
font-family: var(--header-font);
font-size: 1.2rem;
margin-bottom: 25px;
}
.card__header span {
color: var(--image-overlay);
}
.card__paragraph {
color: var(--paragraph);
margin-bottom: 50px;
line-height: 2rem;
font-size: 1rem;
}
.card__footer {
display: flex;
}
.card__footer span {
margin-right: 3.5rem;
}
.card__footer h2 {
margin-bottom: 0.4rem;
}
.card__footer p {
color: var(--paragraph);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.8rem;
}
.img__box {
position: relative;
background: url(https://www.gsb.stanford.edu/sites/default/files/styles/1630x_variable/public/build-better-teams-key.jpg?itok=cenTh4Hq);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: auto;
border-radius: 0px 6px 6px 0px;
}
.img__box .overlay {
background-color: var(--image-overlay);
opacity: 0.7;
width: 100%;
height: 100%;
border-radius: 0px 6px 6px 0px;
}
/*Code For making Responsive for screen breakpoint 768px*/
#media screen and (max-width:768px) {
.container {
display: flex;
flex-direction: column-reverse;
width: 80%;
height: 100%;
margin: 50px auto;
}
.card {
width: 100%;
height: 100%;
border-radius: 0 0 6px 6px;
text-align: center;
margin-bottom: 50px;
}
.img__box {
width: 100%;
height: 15%;
border-radius: 6px 6px 0 0;
}
.img__box .overlay {
border-radius: 6px 6px 0 0;
}
.card__footer {
display: block;
}
}
<!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="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;700&family=Lexend+Deca&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css" />
<title>Responsive Card</title>
</head>
<body>
<div class="container">
<div class="card">
<div class="card__header">
<h1>Get <span>insights</span> that help your business grow.</h1>
</div>
<div class="card__paragraph">
<p>Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
</div>
<div class="card__footer">
<span>
<h2>10k+</h2>
<p>Companies</p>
</span>
<span>
<h2>314</h2>
<p>Templates</p>
</span>
<span>
<h2>12M+</h2>
<p>Queries</p>
</span>
</div>
</div>
<div class="img__box">
<div class="overlay"></div>
</div>
</div>
</body>
</html>
Related
I've created a login form using html and css. Everything was okay but then there is a problem arises when I tried to resize the width and height of the window screen by cursor. Contents inside the form are overlapping each other when I'm resizing the window screen from the bottom by cursor. I've styled the display of the body as flex but I don't know why this is happening.
Before resizing the window screen
After resizing the window screen from bottom
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(150deg, #311432, #9400D3, #FF0000);
}
.container {
max-width: 1100px;
height: 70%;
width: 80%;
background-color: #05C3DD;
padding: 60px 30px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container {
margin-left: auto;
margin-right: auto;
max-width: 500px;
height: 100%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container .title {
font-size: 25px;
color: #05C3DD;
font-weight: 500;
position: relative;
margin-left: 15px;
margin-bottom: 28px;
}
.content form .login-details {
margin: 20px 0 12px 0;
}
form .login-details .input-box {
margin-bottom: 30px;
margin-left: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span .details {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.login-details .input-box input {
height: 45px;
width: 205%;
outline: none;
font-size: 16px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.login-details .input-box input:focus,
.login-details .input-box input:valid {
border-color: #05C3DD;
}
.button {
text-align: center;
}
form .button input {
height: 40px;
width: 93%;
border: none;
color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(360deg, #05C3DD, #05C3DD);
}
form .button input:hover {
/* transform: scale(0.99); */
background: linear-gradient(-360deg, #71b7e6, #71b7e6);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="style2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="container">
<div class="title">Login To Your Account</div>
<div class="content">
<form action="#">
<div class="login-details">
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Username" required>
</div>
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Password" required>
</div>
</div>
<div class="button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Your .container and body heights are fixed values which means the content won't have any affect on their layout once you start reducing the height of the window.
Try using min-height instead to allow the content to affect their layout:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: flex;
min-height: 100vh; /** min-height used here instead */
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(150deg, #311432, #9400D3, #FF0000);
}
.container {
max-width: 1100px;
min-height: 70%; /** min-height used here instead */
width: 80%;
background-color: #05C3DD;
padding: 60px 30px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container {
margin-left: auto;
margin-right: auto;
max-width: 500px;
height: 100%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container .title {
font-size: 25px;
color: #05C3DD;
font-weight: 500;
position: relative;
margin-left: 15px;
margin-bottom: 28px;
}
.content form .login-details {
margin: 20px 0 12px 0;
}
form .login-details .input-box {
margin-bottom: 30px;
margin-left: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span .details {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.login-details .input-box input {
height: 45px;
width: 205%;
outline: none;
font-size: 16px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.login-details .input-box input:focus,
.login-details .input-box input:valid {
border-color: #05C3DD;
}
.button {
text-align: center;
}
form .button input {
height: 40px;
width: 93%;
border: none;
color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(360deg, #05C3DD, #05C3DD);
}
form .button input:hover {
/* transform: scale(0.99); */
background: linear-gradient(-360deg, #71b7e6, #71b7e6);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="style2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="container">
<div class="title">Login To Your Account</div>
<div class="content">
<form action="#">
<div class="login-details">
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Username" required>
</div>
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Password" required>
</div>
</div>
<div class="button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
css single or multiple line vertical align
(8 answers)
Closed 10 months ago.
I've included the JSFiddle below.You have to shrink the size to about 670px to see the issue. What I am trying to fix are the flexbox items at the bottom of the page where the footer says "call xxx-xxx-xxxx". It is hard to see because the background image isn't loaded on the JSFiddle, but when the screen shrinks, the text "to schedule a consultation" pushes into the white background. Initially I used the line height trick, making it equal to the container height, so it vertically centers my first line of text but pushes the second line 100px down off the footer. What I am going for is to make both lines of text center vertically together instead of 100px apart.
https://jsfiddle.net/4m7pysqb/
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1">
<title>DLGTreecare - Home</title>
<link rel="icon" href="images/favicon-16x16.png">
<link rel="Stylesheet" href="DLGtreecare.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome#1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#400;500&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="dlg.js"></script>
</head>
<body>
<div class="header">
<div class="heroimagecontainer">
<img class="heroimage" src="images/heroimage.jpg">
</div>
<div class="redbar">
</div>
<div class="orangebar">
</div>
</div>
<div class="wrapper">
<div class="logowrapperdiv">
<div class="logoarea"> <p class="dlg">DLG Tree Care </p> <img class="logo" src="images/logotransparent.png"> </div>
<p class="undertree">Professional Tree Services</p>
</div>
<!-- https://drive.google.com/file/d/1YcJmJO-7mKo1er338P4AQ9Kn6HohaJsy/preview
https://drive.google.com/uc?export=view&id=1YcJmJO-7mKo1er338P4AQ9Kn6HohaJsy
-->
<div class= maincontent>
<p class="intro">PROVIDING THE "518" WITH ALL YOUR TREE CARE NEEDS!</p>
<iframe class="videointro" src="https://drive.google.com/file/d/1YcJmJO-7mKo1er338P4AQ9Kn6HohaJsy/preview" allow="autoplay"></iframe>
<div> </div>
<div class="phonebar"> Call 518-407-9500 for a free estimate!</div>
<div class="messagebuttontext"> Or message us on
<a class="messagebutton" href="https://m.me/DLGTreeCare">
<span style=color:orange>Facebook!</span>
<i class="fa fa-facebook-messenger fa-1x" aria-hidden="true"></i>
</a></div>
<div class="clearfix"></div>
</div>
<h2>Services</h2>
<h6>(Click images to see "before and after")</h6>
<div class="services">
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Tree Removal</p><p class="servicedescription ">Removing dead or unwanted trees is sometimes a must, using the proper skills this can be done safely</p>
<img class="toggleon" src = "images/beforeafter/treeremovalflip_300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Tree Trimming</p><p class="servicedescription ">Having your trees trimmed properly is important and can help maintain healthy future growth</p>
<img class="toggleon" src = "images/beforeafter/treetrimmingflip_300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Stump Grinding</p><p class="servicedescription">By grinding the stump of the tree we are able to totally remove the stump in order to grow grass or replant something new</p>
<img class="toggleon" src = "images/beforeafter/stumpgrindingflip_300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Hedge Trimming</p><p class="servicedescription ">From big to small, we have the tools and expertise for all your needs</p>
<img class="toggleon" src = "images/beforeafter/hedgetrimmingflip300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Fruit Tree Pruning</p><p class="servicedescription">From big to small, we have the tools and expertise for all your needs</p>
<img class="toggleon" src = "images/beforeafter/fruittreeflip_300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Wood & Brush Removal</p><p class="servicedescription">From big to small, we have the tools and expertise for all your needs</p>
<img class="toggleon" src = "images/beforeafter/treeremovalflip300x400.png">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Lot Clearing</p><p class="servicedescription">We can turn any wooded lot into an open usable space for the building of Homes, Businesses, etc.</p>
<img class="toggleon" src = "images/beforeafter/lotclearingflip300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Cabling & Bracing</p><p class="servicedescription">Large branches and/or weak crotches sometimes can split under their own weight, cabling can keep this from happening without damaging the tree</p>
<img class="toggleon" src = "images/beforeafter/cablingbracingflip_300x400.jpg">
</div>
<div class="servicenode"><button class="mybutton" type="button">></button><p class="servicetitle">Storm Damage</p><p class="servicedescription">We're available 24/7 for any tree related emergencies</p>
<img class="toggleon" src = "images/beforeafter/stormdamageflip_300x400.jpg">
</div>
</div>
<h2>See more of our work</h2>
<div class="gallery">
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized95FB95IMG951628801998990.jpg"></div>
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/FB95IMG951628860144118.jpg"></div>
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/FB_IMG_1628860108712.jpg"></div>
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized_20210319_094919.jpg"></div>
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized_20210325_104241.jpg"></div>
<div class="gallerynode"><img class="galleryimg" src="images/GALLERY/Resized_20210322_131140.jpg"></div>
</div>
<div class="flex-container">
<div class="flex-item">Serving the 518 area</div><div class="flex-item">Call 518-407-9500 to schedule a consultation.</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
/* base red */
--base-red: 10;
/* base yellow */
--base-yellow: 60;
/* base green */
--base-green: 99;
/*base blue*/
--base-blue: 200;
/* colors */
--brown-normal: hsla(17, 42%, 41%, 100%);
--brown-normal: hsla(17, 42%, 41%, 100%);
--red-light: hsla(var(--base-red), 100%, 75%, 100%);
--red-normal: hsla(var(--base-red), 100%, 45%, 100%);
--red-darker: hsla(var(--base-red), 100%, 35%, 100%);
--yellow-light: hsla(var(--base-yellow), 50%, 75%, 100%);
--yellow-normal: hsla(var(--base-yellow), 50%, 50%, 100%);
--yellow-darker: hsla(var(--base-yellow), 50%, 35%, 100%);
--green-light: hsla(var(--base-green), 50%, 75%, 100%);
--green-normal: hsla(var(--base-green), 50%, 50%, 100%);
--green-darker: hsla(var(--base-green), 50%, 35%, 100%);
--blue-light: hsla(var(--base-blue), 50%, 75%, 100%);
--blue-normal: hsla(var(--base-blue), 50%, 50%, 100%);
--blue-darker: hsla(var(--base-blue), 50%, 35%, 100%);
}
#font-face {
font-family: TreeHuggerMedium-lEqZ;
src: url(TreeHuggerMedium-lEqZ.ttf);
}
body {
min-height: 100vh;
max-height: 195.625rem;
background-image: url("images/stump.jpg");
background-color: white;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
margin: auto;
}
div.header {
min-width: 320px;
text-align: center;
height: 300px;
}
div.heroimagecontainer {
height: 210px;
width: inherit;
}
img.heroimage {
height: 100%;
width: 100%;
object-fit: cover;
}
div.redbar {
width: inherit;
background-color: var(--red-normal);
height: 20px;
}
div.orangebar {
width: inherit;
background-color: orange;
height: 70px;
}
div.logowrapperdiv {
min-width: 320px;
max-width: 1000px;
position: relative;
height: auto;
margin: auto;
top: -50px;
}
div.logoarea {
border-bottom-style: solid;
border-color: white;
border-width: 5px;
min-width: 320px;
max-width: 525px;
margin: auto;
height: 92px;
color: white;
position: relative;
}
img.logo {
max-width: 36.5%;
top: -188px;
display: block;
left: 17%;
position: relative;
overflow: visible;
z-index: 105;
object-fit: contain;
}
p.dlg {
font-family: Roboto Slab;
position: relative;
max-width: 525px;
min-width: 320px;
font-size: 3.9em;
font-weight: 500;
text-align: center;
white-space: pre;
top: 20px;
}
.undertree {
font-family: Roboto Slab;
font-weight: 500;
max-width: 525px;
color: white;
text-align: center;
height: 50px;
margin: auto;
margin-top: 0;
padding-bottom: 40px;
letter-spacing: 0.10em;
font-size: 2.16em;
position: relative;
top: 0px;
}
.wrapper {
margin: auto;
min-width: 320px;
max-width: 1000px;
background-image: linear-gradient(var(--brown-normal), orange);
padding-top: 50px;
border-radius: 0px 0px 5px 5px;
}
.maincontent {
min-width: 320px;
text-align: center;
height: auto;
color: white;
position: relative;
margin-bottom: 25px;
padding: 15px;
}
.intro {
font-family: Roboto Slab;
font-weight: 400;
font-size: 1.7em;
color: white;
text-align: center;
padding-bottom: 25px;
min-width: 300px;
max-width: 1000px;
}
.videointro {
min-width: 300px;
min-height: 225px;
position: relative;
display: block;
border-style: solid;
border-width: 2px;
border-color: white;
border-radius: 5px;
margin: auto;
}
.phonebar {
font-family: Roboto Slab;
font-weight: 400;
text-align: center;
position: relative;
float: left;
min-width: 295px;
max-width: 550px;
margin: 25px 0px 0px 20px;
font-size: 1.7em;
border: 1px solid white;
padding: 5px;
border-radius: 15px;
}
.phonebar a {
color: orange;
text-decoration: none;
}
.messagebutton {
display: inline-block;
text-align: center;
color: orange;
position: relative;
margin: auto;
text-decoration: none;
}
.messagebuttontext {
min-width: 295px;
max-width: 550px;
color: white;
position: relative;
font-family: Roboto Slab;
font-weight: 400;
font-size: 1.7em;
display: block;
float: right;
border: 1px solid white;
border-radius: 15px;
margin: 25px 20px 0px 0px;
padding: 5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
/*code for photo galley */
h2 {
font-family: Roboto Slab;
font-weight: 400;
text-align: center;
font-size: 5em;
color: white;
margin: 50px auto;
position: relative;
}
h6 {
font-size: 2em;
font-family: Roboto Slab;
font-weight: 400;
text-align: center;
color: white;
position: relative;
margin: 10px auto;
}
button {
appearance: button;
background-color: white;
color: red;
cursor: pointer;
font-weight: 500;
border-color: white;
z-index: 101;
top: 30px;
left: 0px;
position: relative;
border-radius: 5px;
height: 25px;
width: 25px;
margin: 0 auto;
border-width: 1px;
transition: transform .3s linear;
}
.buttonrotate {
transform: rotate(90deg);
}
.services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
width: auto;
height: auto;
margin: auto;
}
.servicenode {
position: relative;
width: 300px;
margin: auto;
margin-bottom: 25px;
}
.servicenode img {
display: block;
margin-left: auto;
margin-right: auto;
width: 300px;
height: 200px;
object-fit: none;
border: 1px solid red;
border-radius: 8px;
transition: 0.1s object-position ease;
position: relative;
}
.servicetitle {
font-family: Roboto Slab;
font-weight: 400;
font-size: 1.4em;
vertical-align:top;
display:inline-block;
color: white;
width: 100%;
position: relative;
text-align: center;
margin-bottom: 10px;
}
.servicedescription {
font-family: Roboto Slab;
font-weight: 400;
font-size: 1.2em;
color: white;
z-index: 100;
transition-property: opacity, border-radius;
transition-duration: .4s;
transition-timing-function: linear;
opacity: 0;
margin: auto;
width: 298px;
position: absolute;
display: block;
background: rgba(0,0,0, 0.6);
left: 0;
right: 0;
border-radius: 8px 8px 8px 8px;
text-align: center;
user-select: none; /* supported by Chrome and Opera */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
pointer-events: none;
}
.servicedescriptionshow {
position: absolute;
display: block;
width: 298px;
left: 0;
right: 0;
border-radius: 8px 8px 0px 0px;
text-align: center;
opacity: 1;
}
.toggleon {
object-position: top;
cursor: pointer;
}
.toggleoff {
object-position: bottom;
cursor: pointer;
}
/* Gallery stuff */
.gallery {
display: grid;
grid-template-columns: repeat(2, minmax(320px, auto));
width: auto;
height: auto;
margin: auto;
}
.gallerynode {
color: white;
text-align: center;
position: relative;
margin: auto;
border-width: 1px;
border-style: solid;
border-color: white;
height: 490px;
}
.galleryimg {
object-fit: cover;
width: 490px;
height: 490px;
}
/* footer stuff */
.footer {
height: 5vh;
width: 100%;
background-color: white;
position: relative;
margin-top: 100px;
bottom: 0;
border-style: solid;
border-color: red;
border-width: 3px;
border-radius: 0px 0px 5px 5px;
}
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 10px;
}
.flex-item {
-ms-flex-preferred-size: 33%;
flex-basis: 50%;
background-color: orange;
padding: 5px;
height: 100px;
color: white;
font-weight: bold;
font-size: 1.5em;
text-align: center;
border: 1px solid #333;
box-sizing: border-box;
line-height: 100px;
}
.flex-item a {
color: white;
}
/* media queries */
#media screen and (max-width: 1000px) {
div.maincontent {
height: auto;
}
.messagebuttontext {
float: none;
margin: 20px auto;
}
.phonebar {
float: none;
margin: 20px auto;
}
.gallery {
grid-template-columns: repeat(1, minmax(320px, auto));
}
.flex-item {
font-size: 1em;
}
}
#media screen and (max-width: 545px) {
div.logoarea {
width: 420px;
}
p.dlg {
font-size: 3em;
top: 35px;
}
img.logo {
left: 17%;
top: -130px;
}
.undertree {
font-size: 1.6em;
}
}
#media screen and (max-width: 500px) {
.gallerynode {
height: 320px;
}
.galleryimg {
object-fit: cover;
width: 320px;
height: 320px;
margin: auto;
}
}
#media screen and (max-width: 485px) {
div.logoarea {
width: 320px;
}
img.logo {
top: -86px;
left: 16%
}
p.dlg {
font-size: 2.6em;
top: 42px;
}
}
#media screen and (max-width: 354px) {
p.dlg {
font-size: 2.6em;
top: 42px;
}
.undertree {
font-size: 1.39em;
}
img.logo {
top: -86px;
}
.maincontent {
padding: 8px;
}
}
JS
$(document).ready(function(){
$(".servicenode > img").click(function(){
$(this).toggleClass('toggleon toggleoff');
});
$(".mybutton").click(function() {
$(this)
.siblings(".servicedescription")
.toggleClass('servicedescriptionshow');
$(this).toggleClass('buttonrotate');
});
});
This question already has answers here:
Break long word with CSS
(6 answers)
Closed 1 year ago.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Floating Nav</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="nav">
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
</div>
<div id="root">
<p>xxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxx
</p>
</div>
</body>
</html>
CSS
html,
body {
height: 100%;
margin: 0;
flex-direction: column;
}
body,
#nav {
display: flex;
justify-content: center;
align-items: center;
}
#nav {
height: 4rem;
width: 90%;
background-image: linear-gradient(170deg, #37F7, #37F9);
justify-content: space-around;
border: 0.1rem solid #37F7;
border-radius: 1rem;
box-shadow: 0.15rem 0.3rem 0.3rem #04C3;
position: sticky;
top: 0;
z-index: 1;
}
button {
color: #000;
border: none;
height: 3rem;
width: 3rem;
border: 0.1rem solid #FFFA;
border-radius: 0.5rem;
background-color: #FFFA;
transition: transform 0.2s ease-in-out;
box-shadow: 0.05rem 0.1rem 0.1rem #04C3;
}
button:focus {
transform: scale(1.1);
background-color: #FFFC;
box-shadow: 0.1rem 0.2rem 0.2rem #04C4;
}
#root {
height: 80%;
width: 90%;
border: 1px solid red;
}
#media (orientation:landscape) {
html,
body {
flex-direction: row;
}
#nav {
height: 90%;
width: 4rem;
flex-direction: column;
}
#root {
width: 80%;
}
}
I've been trying to figure this out in ways such as
display:inline
display:inline-block
but it doesn't work.
It works when I manually put new line space inside the text but thats not what I want ultimately the text should just wrap around the limited given width instead of going past the width in a single line.
The solutions that exist online seem to be too complex for what I'm looking for, can anyone tell me whats going on here and how can I make it normal?
html,
body {
height: 100%;
margin: 0;
flex-direction: column;
}
body,
#nav {
display: flex;
justify-content: center;
align-items: center;
}
#nav {
height: 4rem;
width: 90%;
background-image: linear-gradient(170deg, #37F7, #37F9);
justify-content: space-around;
border: 0.1rem solid #37F7;
border-radius: 1rem;
box-shadow: 0.15rem 0.3rem 0.3rem #04C3;
position: sticky;
top: 0;
z-index: 1;
}
button {
color: #000;
border: none;
height: 3rem;
width: 3rem;
border: 0.1rem solid #FFFA;
border-radius: 0.5rem;
background-color: #FFFA;
transition: transform 0.2s ease-in-out;
box-shadow: 0.05rem 0.1rem 0.1rem #04C3;
}
button:focus {
transform: scale(1.1);
background-color: #FFFC;
box-shadow: 0.1rem 0.2rem 0.2rem #04C4;
}
#root {
height: 80%;
width: 90%;
border: 1px solid red;
}
#media (orientation:landscape) {
html,
body {
flex-direction: row;
}
#nav {
height: 90%;
width: 4rem;
flex-direction: column;
}
#root {
width: 80%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Floating Nav</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="nav">
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
</div>
<div id="root">
<p>xxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxx
</p>
</div>
</body>
</html>
Use the CSS on the parent overflow-wrap: break-word;
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
html,
body {
height: 100%;
margin: 0;
flex-direction: column;
}
body,
#nav {
display: flex;
justify-content: center;
align-items: center;
}
#nav {
height: 4rem;
width: 90%;
background-image: linear-gradient(170deg, #37F7, #37F9);
justify-content: space-around;
border: 0.1rem solid #37F7;
border-radius: 1rem;
box-shadow: 0.15rem 0.3rem 0.3rem #04C3;
position: sticky;
top: 0;
z-index: 1;
}
button {
color: #000;
border: none;
height: 3rem;
width: 3rem;
border: 0.1rem solid #FFFA;
border-radius: 0.5rem;
background-color: #FFFA;
transition: transform 0.2s ease-in-out;
box-shadow: 0.05rem 0.1rem 0.1rem #04C3;
}
button:focus {
transform: scale(1.1);
background-color: #FFFC;
box-shadow: 0.1rem 0.2rem 0.2rem #04C4;
}
#root {
height: 80%;
width: 90%;
border: 1px solid red;
overflow-wrap: break-word;
}
#media (orientation:landscape) {
html,
body {
flex-direction: row;
}
#nav {
height: 90%;
width: 4rem;
flex-direction: column;
}
#root {
width: 80%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Floating Nav</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="nav">
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
</div>
<div id="root">
<p>xxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxxxxbsjsjsjsjnsnsnsnnsnsnsnansnsnsnnsnssnxx
</p>
</div>
</body>
</html>
When I try to go from mobile to desktop screen , navigation does not show up.I am pretty much a beginner in frontend, so any hint on this is welcome.
I did responsive part for header links to show from 50em screeen width, but i could not show it appropriately.Still not sure(do not know) how to get this to work.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sunnyside agency landing page_challenge_1</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght#600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght#700;900&display=swap" rel="stylesheet">
</head>
<body>
<!--HEADER-->
<header>
<nav>
<a href="#">
<img src="./images/logo.svg" alt="Sunnyside logo" class="logo">
</a>
<a href="#" class="header__menu">
<span></span>
<span></span>
<span></span>
</a>
<div class="header__links">
About
Services
Projects
Contact
</div>
</nav>
</header>
<!--HERO-->
<section class="home__hero">
<div class="container">
<h1 class="title">We are Creatives</h1>
<img src="./images/icon-arrow-down.svg" alt="down arrow" class="hero__arrow">
</div>
</section>
<!--ABOUT-->
<section class="about__cta">
<div class="container">
<div class="about__card bg__spec__img__1">
</div>
<div class="about__card">
<h4 class="transform__title">Transform your brand</h4>
<p class="transform__par">We are a full-service creative agency specializing
in helping brands grow fast.Engage your clients
through compelling visuals that do most of the marketing
for you.
</p>
Learn More
</div>
<div class="about__card bg__spec__img__2">
<img src="./images/mobile/image-stand-out.jpg" alt="Call to action image">
</div>
<div class="about__card">
<h4 class="standout__title">Stand out to the right audience</h4>
<p class="standout__par">Using a collaborative formula of designers, researchers,
photographers, videographers, and copywriters, we'll
build and extend your brain in digital places.
</p>
</div>
<div class="about__card graphic__design__card">
<h4>Graphic Design</h4>
<p>Great design makes you memorable.We deliver artwork
that underscores your brand message and captures
potential client's attention.
</p>
</div>
<div class="about__card photo__card">
<h4>Photography</h4>
<p>Increase your credibility by getting the most stunning,
high-quality photos that improve your business image.
</p>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
Here is my CSS(not finished, in progress):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* font-family: 'Fraunces', serif;
font-family: 'Barlow', sans-serif; */
/* global styles
---------------- */
img {
max-width: 100%;
height: auto;
}
.container {
width: 100%;
margin: 0 auto;
}
/* typography
------------- */
.transform__title,
.standout__title {
font-size: 1.8rem;
font-weight: 900;
font-family: 'Fraunces', serif;
margin: 2.5em 1em 1.5em 1em;
text-align: center;
width: 55vw;
}
.transform__par,
.standout__par {
font-family: 'Barlow', sans-serif;
font-weight: 600;
line-height: 1.6;
text-align: center;
padding-bottom: 1.5em;
margin: 0em 1em 1em 1em;
width: 60vw;
font-size: 1.125em;
color: hsl(232, 10%, 55%);
}
/* buttons
--------- */
.btn {
border: none;
outline: none;
background: white;
text-decoration: none;
text-transform: uppercase;
padding: 0.6em 1.75em;
border-radius: 50px;
font-family: 'Fraunces', serif;
font-weight: 900;
color: hsl(212, 27%, 19%);
}
.btn__cta {
padding-bottom: 2em;
background: transparent;
}
#media (min-width: 50em) {
.btn {
font-size: 0.925em
}
.header__text {
font-size: 0.925em;
}
}
#media (min-width: 60em) {
.btn {
font-size: 1em;
}
}
/* header
--------- */
header {
position: absolute;
left: 0;
right: 0;
}
nav {
height: 7vh;
width: 100%;
padding: 2.5em 1.5em;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__menu {
position: absolute;
right: 5%;
top: 50%;
transform: translate(5%, -50%);
}
span {
display: block;
width: 25px;
height: 2px;
background: white;
margin: 5px;
transition: all 400ms ease-in-out;
}
.header__links {
font-size: 1.125em;
font-family: 'Barlow', sans-serif;
font-weight: 200;
z-index: 98;
}
.header__text {
text-decoration: none;
color: white;
font-weight: 200;
z-index: 99;
}
.header__text:hover {
color: #eee;
}
.header__text:not(:last-child) {
margin-right: 1.125em;
}
/* header===responsive
-------------------- */
#media screen and (min-width: 23.4375em) {
body {
overflow-x: hidden;
}
.header__links {
display: none;
position: absolute;
top: 110%;
right: 50%;
transform: translateX(160%);
transition: transform 400ms ease-in-out;
background: white;
width: 90vw;
height: 40vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.header__links::after {
content: '';
position: absolute;
top: -1em;
right: 0em;
border-width: 1em;
border-style: solid;
border-color: transparent white transparent transparent;
}
.header__text {
color: hsl(213, 9%, 39%);
}
.header__text:hover {
color: hsl(210, 4%, 67%);
}
.btn {
background: hsl(51, 100%, 49%);
}
}
/* mobileMenu
------------- */
.burgerActive {
transform: translateX(50%);
}
.header__menu.anim span:nth-child(1) {
transform: translate(5px, 8px) rotate(135deg);
}
.header__menu.anim span:nth-child(2) {
opacity: 0;
}
.header__menu.anim span:nth-child(3) {
transform: translate(5px, -8px) rotate(-135deg);
}
/* ----------------------------- */
#media screen and (min-width: 50em) {
.header__links {
display: block;
}
.header__menu {
display: none;
}
}
/* home-hero
------------ */
.home__hero {
background-image: url('./images/mobile/image-header.jpg');
padding: 10em 0;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom 20% right;
font-family: 'Fraunces', serif;
}
.title {
color: hsl(0, 0%, 100%);
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 3rem;
padding-bottom: 3.5em;
}
.container {
position: relative;
}
.hero__arrow {
position: absolute;
right: 50%;
top: 60%;
transform: translateX(50%);
}
/* about
------------ */
.about__cta {
display: grid;
grid-template-columns: auto;
}
.about__card {
width: 100%;
border: 2px solid red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bg__spec__img__1 {
background-image: url('./images/mobile/image-transform.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
min-height: 45vh;
}
Your <nav> element in the header has a height of 0, according to chrome inspector.
Culprit appears to be some combination of the following styles on .header__links being applied in this media query: #media screen and (min-width: 23.4375em):
position: absolute;
transform: translateX(160%);
height: 40vh;
If I remove the above styles then I can see the desktop header, so my guess is you'll need to add an additional media query (with a larger, more desktop-appropriate min-width value) that overrides those styles with something more like what you're going for for your desktop UI. You'll likely need to play around with it to get it to look right.
I want my text in the three link boxes to be vertically aligned in the middle - but they won't for some reason?
I also want the entire div each of the three sport options sit in, to be a clickable box. I have made "marathon" div clickable, but it messes up the alignment
What are these 2 problems ocurring?
*{
margin: 0;
padding: 0;
}/*
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}*/
html,
body {
height:100%;
width: 100%;
}
.parent-container {
min-height:100%;
width: 100%;
position:relative;
background: black;
text-align: center;
margin: 0 auto;
}
.child-container{
margin: 0 auto;
width: 80%;
height: 60%;
display:flex;
justify-content: center;
left: 10%;
top: 20%;
background: black;
position: absolute;
flex-direction: column;
align-items: center;
border-radius: 0%;
border: 2px solid #39ff14 ;
font-family: 'Montserrat';
}
.Marathon {
top: 17.5%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
margin-top: auto;
}
.Marathon:hover{
background: grey;
}
.Hockey:hover{
background: grey;
}
.Cycling:hover{
background: grey;
}
.Hockey {
border: 2px solid #39ff14 ;
width: 50%;
height: 10%;
top: 45%;margin-top: auto;
}
.Cycling {
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
top: 72.5%;
margin-top:auto;
margin-bottom:auto;
}
h1{
color:#39ff14;
font-family: 'Nunito';
padding-top: 5%;
text-align: left;
margin-left: 10%;
}
a{
text-decoration: none;
}
.child-container a{
color: #39ff14;
text-decoration: none;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5">
<link type="text/css" rel="stylesheet" href="Styles.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<title>My Map App</title>
</head>
<body>
<div class="parent-container">
<h1>My Map App</h1>
<div class="child-container">
<div class="Marathon">Marathon</div>
<div class="Hockey">Hockey</div>
<div class="Cycling">Cycling</div>
</div>
</div>
</body>
</html>
Also, I want my web app to show up nicely on my mobile. Currently, my web app shows nicely on my PC, but when I open on mobile, the title "My Map App" is tiny! How can I resolve this?
Thanks in advance
PS, very new to this!
You should remove all those individual styles for Hockey, Cycling, and Marathon. And add this to your .child-container style:
flex-direction: column;
align-items: center;
Though I wouldn't recommend something so general, a more global style for your links could look something like this:
.child-container > * {
padding: 12px 10%;
border: solid 2px #39ff14;
min-width: 150px;
margin-bottom: 20px;
}
Lastly, add this to the head of your document so mobile isn't so zoomed out:
<meta name="viewport" content="width=device-width, initial-scale=1">
Your Code has a minor syntax error. Make sure to keep track of tags. In this case, the div tag was accidentally placed after the anchor tag in the marathon section of the html. If you have a bug with an html element- go to that class to see why it is different from the others.
*{
margin: 0;
padding: 0;
}/*
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}*/
html,
body {
height:100%;
width: 100%;
}
.parent-container {
min-height:100%;
width: 100%;
position:relative;
background: black;
text-align: center;
margin: 0 auto;
}
.child-container{
margin: 0 auto;
width: 80%;
height: 60%;
display:flex;
justify-content: center;
left: 10%;
top: 20%;
background: black;
position: absolute;
border-radius: 0%;
border: 2px solid #39ff14 ;
font-family: 'Montserrat';
}
.Marathon {
padding: 0;
position: absolute;
top: 17.5%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
color: #39ff14;
vertical-align: middle;
margin-top: auto;
border-radius: 0%;
}
.Marathon:hover{
background: grey;
}
.Hockey:hover{
background: grey;
}
.Cycling:hover{
background: grey;
}
.Hockey {
padding: 0;
position: absolute;
top: 45%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
color: #39ff14;
vertical-align: middle;
margin-top: auto;
border-radius: 0%;
}
.Cycling {
padding: 0;
position: absolute;
top: 72.5%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
color: #39ff14;
vertical-align: middle;
margin-top: auto;
border-radius: 0%;
}
.parent-container h1{
color:#39ff14;
font-family: 'Nunito';
padding-top: 5%;
text-align: left;
margin-left: 10%;
}
a{
text-decoration: none;
}
.child-container a{
color: #39ff14;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5">
<link type="text/css" rel="stylesheet" href="Styles.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<title>My Map App</title>
</head>
<body>
<div class="parent-container">
<h1>My Map App</h1>
<div class="child-container">
<div class="Marathon">Marathon</div>
<div class="Hockey">Hockey</div>
<div class="Cycling">Cycling</div>
</div>
</div>
</body>
</html>
You probably want to change the box styles so that they look nicer.
As for the mobile vs desktop problem look into this:
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
How about something super simple as this?
<a> //This will act as your button container
<p>Cycling</p> // Here goes the name
</a>
Give style of Button to your <a>, hence it will function as a button.
Keep CSS as simple as you could.
* {
background: black;
}
.parent-container {
margin: 40px;
}
.parent-container h1 {
font-size: 30px;
color: #39ff14;
}
.child-container {
display: flex;
flex-direction: column;
border: 2px solid #39ff14;
padding-top: 20px;
}
.child-container a {
flex: 1;
border: 2px solid #39ff14;
margin: 0px auto 20px auto;
width: 30%;
text-decoration: none;
}
.Marathon {
text-align: center;
color: #39ff14;
margin: 0;
height: 40px;
line-height: 40px;
}
.Hockey {
color: #39ff14;
text-align: center;
margin: 0;
height: 40px;
line-height: 40px;
}
.Cycling {
color: #39ff14;
text-align: center;
margin: 0;
height: 40px;
line-height: 40px;
}
<div class="parent-container">
<h1>My Map App</h1>
<div class="child-container">
<a href="marathon.php">
<p class="Marathon">Marathon</p>
</a>
<a href="hockey.php">
<p class="Hockey">Hockey</p>
</a>
<a href="cycling.php">
<p class="Cycling">Cycling</p>
</a>
</div>
</div>