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>
Related
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');
});
});
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>
I have following html for my site:
Edit: https://jsfiddle.net/3v66fv3u/1/ for the static site
and my approach of making the site responsive: https://jsfiddle.net/wba321bm/
<!DOCTYPE html>
<html>
<head>
<link href="custom.css" rel="stylesheet">
</head>
<body>
<h1 class="title">Headline</h1>
<div class="wrapper">
<div class="left">
<div class="top">
<img id="img_1" src="img_1.png">
</div>
<div class="bottom">
<img id="img_3" src="img_3.png">
</div>
</div>
<div class="middle">
<div class="about-text">
<h3>small headline</h3>
<p>actually a lot of text</p>
</div>
</div>
<div class="right">
<div class="top">
<img id="img_2" src="img_2.png">
</div>
<div class="bottom">
<img id="img_4" src="img_4.png">
</div>
</div>
</div>
<img class="banner" src="banner.png"/>
</body>
</html>
And this is my current css file:
html {
font-family: "Verdana", Geneva, sans-serif;
color: white;
}
body {
margin: auto;
background-color: black;
width: 1150px;
}
hr {
border-top: 1px dotted black;
}
.title {
text-align: center;
padding-bottom: 20px;
}
.wrapper {
margin: auto;
}
.left {
float: left;
}
.middle {
height: 597px;
width: 550px;
float: left;
border-top: 1px solid white;
border-bottom: 1px solid white;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
margin-top: -4px;
}
.about-text {
margin-left: 25px;
margin-right: 25px;
}
.right {
float: left;
}
.gallery {
padding-top: 100px;
width: 100%;
text-align: center;
}
img {
height: 300px;
transition: 0.5s ease;
backface-visibility: hidden;
/* inline-block fügt standardmäßig 4px Padding hinzu
das muss nun wieder subtrahiert werden. */
margin-top: -4px;
}
img:hover {
opacity: 0.5;
}
#img_1 {
border-top-left-radius: 30px;
}
#img_2 {
border-top-right-radius: 30px;
}
#img_3 {
border-bottom-left-radius: 30px;
}
#img_4 {
border-bottom-right-radius: 30px;
}
/* 827 x 178 */
.banner {
width: 410px;
height: 90px;
position: absolute;
right: 0px;
bottom: 0px;
}
The website currently looks like this (with static layout):
Now I want to go away from the fixed layout and want to make the website responsive. However, when I give the fields a relative width the whole layout gets messed up...
This is the css I tried to use to achieve the responsive layout:
html, body {
font-family: "Verdana", Geneva, sans-serif;
color: white;
background-color: black;
height: 100%;
}
hr {
border-top: 1px dotted black;
}
.title {
text-align: center;
padding-bottom: 20px;
}
.wrapper {
border: 1px solid white;
margin: auto;
width: 80%;
}
.left {
float: left;
}
.middle {
width: 40%;
height: auto;
float: left;
border-top: 1px solid white;
border-bottom: 1px solid white;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
margin-top: -4px;
}
.about-text {
margin-left: 25px;
margin-right: 25px;
}
.right {
float: left;
}
.gallery {
padding-top: 100px;
width: 100%;
text-align: center;
}
img {
width: 40%;
height: auto;
transition: 0.5s ease;
backface-visibility: hidden;
/* inline-block fügt standardmäßig 4px Padding hinzu
das muss nun wieder subtrahiert werden. */
margin-top: -4px;
}
img:hover {
opacity: 0.5;
}
#img_1 {
border-top-left-radius: 30px;
}
#img_2 {
border-top-right-radius: 30px;
}
#img_3 {
border-bottom-left-radius: 30px;
}
#img_4 {
border-bottom-right-radius: 30px;
}
/* 827 x 178 */
.banner {
width: 20%;
height: 10%;
position: absolute;
right: 0px;
bottom: 0px;
}
It's a matter of WHICH elements get the percentage value. In my adaptation of your fiddle, I assigned width: 30% to .left and right (which are the containers for the images) and made the image width 100% to span the whole width of their containers.
See here: https://jsfiddle.net/35n4dxqn/1/
well, when you give a or a division relative attribute it will be placed relative or according to the previous div i.e. it will not be independent from other divisions.
the solution if you want to make it responsive one forward and efficient way is to use Grid System (Bootstrap class).
Im trying to make the height of the "mainbar" div stretch the entire page without there being a need for the vertical scrollbar while also making sure I can see the top of the div. when I remove the "margin-top" value from the "mainbar" css it removes the scrollbar but cuts off the top 50px. How would I move the div 50px lower (so I can see all of the content inside of it) without extending the page and adding the scrollbar back?
Here is the html:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul>
<li class="nav">Home</li>
<li class="nav">About</li>
<li class="nav">Upload</li>
</ul>
</div>
<div class="mainbar">
<h1>hello</h1>
<h2>whats up</h2>
</div>
</body>
</html>
Here is the css
* {
box-sizing: border-box;
}
body {
background-color: #450068;
background-color: rgb(69, 0, 104);
margin: 0px;
padding: 0px;
}
h1, h2 {
text-align: center;
color: white;
}
li {
display: inline;
text-align: right;
list-style: none;
padding: 20px;
}
.navbar {
background-color: #8729a5;
border-bottom: .5px solid gray;
width: 100%;
height: 50px;
position: fixed;
top: 0;
padding: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.mainbar {
background-color: #8729a5;
background-color: black;
height: 100vh;
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: .5px solid gray;
border-radius: 15px;
overflow: scroll;
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
body {
background-color: #450068;
background-color: rgb(69, 0, 104);
margin: 0px;
padding: 0px;
}
h1, h2 {
text-align: center;
color: white;
}
li {
display: inline;
text-align: right;
list-style: none;
padding: 20px;
}
.navbar {
background-color: #8729a5;
border-bottom: .5px solid gray;
width: 100%;
height: 45px;
position: fixed;
top: 0;
padding: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
body > .mainbar {
background-color: #8729a5;
background-color: black;
height: 90vh;
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: .5px solid gray;
border-radius: 15px;
overflow: scroll;
overflow-x: hidden;
overflow-y: auto
}
new slimScroll(Element);
<!DOCTYPEhtml>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="slimscroll.js"></script>
</head>
<body>
<div class="navbar">
<ul>
<li class="nav">Home</li>
<li class="nav">About</li>
<li class="nav">Upload</li>
</ul>
</div>
<div class="mainbar">
<h1>hello</h1>
<h2>whats up</h2>
<h2>whats up</h2>
</div>
</body>
Looked at : https://github.com/kamlekar/slim-scroll
and Hide scroll bar, but still being able to scroll
Not sure if that is what you wanted but the plugin removed the scrollbar on the right of the page >>
So the problem, it seems, is that you have a fixed height for navbar, and want mainbar to take the remainder of the screen.
With mainbar having a height of 100vh it will be as tall as the viewport; so anything you do to move it down 50px will cause the scrollbar to appear. This is the headache of mixing pixel sizes and relative (%, vh/vw) sizes.
If your target browser(s) support modern CSS, a flexbox is the solution to this problem.
If not, the "old way" is to use JavaScript to adjust the size of your mainbar div after the initial CSS-based layout is calculated; a pure CSS solution didn't exist before flexbox.
Try modifing your CSS maybe it will solve the problem.
margin-top to padding-top for the .mainbar.
* {
box-sizing: border-box;
}
body {
background-color: #450068;
background-color: rgb(69, 0, 104);
margin: 0px;
padding: 0px;
}
h1, h2 {
text-align: center;
color: white;
}
li {
display: inline;
text-align: right;
list-style: none;
padding: 20px;
}
.navbar {
background-color: #8729a5;
border-bottom: .5px solid gray;
width: 100%;
height: 50px;
position: fixed;
top: 0;
padding: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.mainbar {
background-color: #8729a5;
background-color: black;
height: 100vh;
width: 1100px;
margin-left: auto;
margin-right: auto;
padding-top: 50px; /* here */
border: .5px solid gray;
border-radius: 15px;
overflow: scroll;
overflow-x: hidden;
}
How can I push the button down just after the text, as it stands now, it is stuck at the top before the text. It should go after the text:
Current result:
Desired result:
Here is the HTML/CSS markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/*--------------------------------------------------------------------------------------------------
CUSTOM ALERT BOX
--------------------------------------------------------------------------------------------------*/
#alertBox_container {
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid #808080;
position: relative;
color: rgb(11,63,113);
}
#alertBox {
height: 100px;
width: 400px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: Arial;
font-size: 9pt;
}
#alertBox_titlebar {
line-height:24px;
width: 100%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
font-weight: bold;
}
.alertBox_Button {
color: #464646;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color:#ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
}
.alertBox_Button:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
#alertBox_close {
line-height: 10px;
width: 18px;
font-size: 8pt;
font-weight: bold;
margin-top: 2px;
margin-right: 2px;
padding-left: 2px;
padding-top: 2px;
position:absolute;
top:0;
right:0;
}
#alertBox_text {
position: absolute;
width: 100%;
height: auto;
top: 50%;
text-align: center;
}
#alertBox_div_btn_OK {
position: absolute;
width: 100%;
height: auto;
text-align: center;
}
#alertBox_btn_OK {
height: 20px;
width: 50px;
font-size: 9pt;
}
</style>
</head>
<body>
<!-- Start of custom alertbox -->
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input class="alertBox_Button" id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text">Searching the database...</div>
<div id="alertBox_div_btn_OK"><input class="alertBox_Button" id="alertBox_btn_OK" type="button" value="OK" onclick="alertBox_hide()"></div>
</div>
</div>
</div>
<!-- End of custom alertbox -->
</body>
</html>
I don't see any reason why you are positioning the elements absolutely within the box. Get rid of that:
http://jsfiddle.net/qysTW/1
#alertBox_text {
width: 100%;
height: auto;
text-align: center;
}
#alertBox_div_btn_OK {
width: 100%;
height: auto;
text-align: center;
}
You can then use margin to space them out properly. Even the width and height shouldn't be needed unless there's something else on your greater page which this is overriding.