i noticed that on my firefox the distance between the bottom of the website and the list for links(terms,about...) is really large, i cannot seem to figure out what to specify in my .ul style to adjust the spacing. i am using firefox. The mobile view is okay, i haven't checked it on my phone, i just used devtools.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="css/navr.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<header>
<span class="iconify" data-inline="false" data-icon="eva:arrow-back-fill" style="color: #63ba86; font-size: 24px; padding-top: 10px;">
</span>
<h1>Forgot password</h1>
</header>
<div class="line"></div>
<h1 class="big">Change your password</h1>
<h1 class="cer">Confirm your email address</h1>
<form action="#" class="formstyle" style="padding-top:10px;padding-left: 10px">
<input type=" text " placeholder="Enter your email address" required>
<li class="btnn"><button type="submit" class="conf">Confirm</button></li>
</form>
<footer class="cl">
<div class="liner"></div>
<ul>
<li>
Terms
Privacy
About
</li>
</ul>
</footer>
</div>
</body>
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js "></script>
</html>
My css
body {
background-color: #FFFFFF;
margin: 0;
}
#media screen and (max-width: 30em) {
.line {
width: auto;
height: 0px;
border: 1px solid #E5E5E5;
}
.liner {
width: auto;
height: 0px;
border: 1px solid #E5E5E5;
}
header {
display: flex;
}
h1.cer {
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 10px;
color: #356B51;
padding-left: 10px;
}
h1.big {
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 29px;
color: #63BA86;
padding-left: 10px;
}
h1 {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
color: #63BA86;
padding-left: 70px;
margin-top: 10px;
}
a {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: #63BA86;
text-decoration: none;
margin: 4px;
}
ul {
display: flex;
justify-content: flex-end;
text-decoration: none;
list-style: none;
}
h2 {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 29px;
color: #63BA86;
padding-left: 10px;
}
input {
width: 300px;
height: 35px;
border: 0.5px solid #63BA86;
border-radius: 5px;
font-family: Montserrat;
padding-left: 5px;
}
input:required {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
}
/* ::-webkit-input-placeholder {
text-align: center;
}
input::-moz-placeholder {
margin-left: 5px;
}
input:-moz-placeholder {
padding-left: 40px;
} */
button {
margin-top: 10px;
height: 25px;
width: 87px;
border: 0.5px solid #63BA86;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
button.conf {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 17px;
color: #FFFFFF;
background-color: #67E298;
}
footer.cl {
padding-top: 400px;
}
main {
flex: 1;
}
li.btnn {
list-style: none;
}
}
#media screen and (min-width: 30em) {
.line {
width: auto;
height: 0px;
border: 1px solid #E5E5E5;
}
header {
display: flex;
}
h1 {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
color: #63BA86;
margin-top: 10px;
padding-left: 500px;
}
h1.cer {
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 10px;
color: #356B51;
padding-left: 460px;
}
h1.big {
font-style: normal;
font-weight: 500;
font-size: 40px;
line-height: 29px;
color: #63BA86;
padding-top: 200px;
padding-left: 450px;
}
li.btnn {
list-style: none;
display: block;
padding-left: 440px;
}
a {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: #63BA86;
text-decoration: none;
margin: 1rem;
}
ul {
display: flex;
justify-content: flex-end;
text-decoration: none;
padding-left: 10rem;
list-style: none;
}
li {
text-align: left;
margin: 10px;
}
link {
margin: 10px;
font-size: large;
}
input {
width: 300px;
height: 35px;
border: 0.5px solid #63BA86;
border-radius: 5px;
font-family: Montserrat;
padding-left: 5px;
margin-left: 450px;
}
input:required {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
}
/* ::-webkit-input-placeholder {
text-align: center;
}
input::-moz-placeholder {
margin-left: 5px;
}
input:-moz-placeholder {
padding-left: 40px;
} */
button {
margin-top: 10px;
height: 25px;
width: 87px;
border: 0.5px solid #63BA86;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
button.conf {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 17px;
color: #FFFFFF;
background-color: #67E298;
}
.liner {
width: auto;
height: 0px;
border: 1px solid #E5E5E5;
margin-top: 40px;
}
}
i noticed that on my firefox the distance between the bottom of the
website and the list for links(terms,about...) is really large
This is the nature of the webpage you have created because the content only goes as far as that height. In order for your footer element to stay at the bottom: I recommend utilizing Flexbox & setting margin-top: auto to your footer. In order for the margin to kick in, simply give your container (in this case, .body) the flex display property & a minimum height of 100vh (so that it takes at least 100% of the viewport in terms of height) and assign column as it's flex-direction. This way, the footer can always stay at the bottom on your given layout.
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
footer.cl {
margin-top: auto;
}
I have made a few changes in your code. hope this will help you.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<span class="iconify" data-inline="false" data-icon="eva:arrow-back-fill"
style="color: #63ba86; font-size: 24px; padding-top: 10px;">
</span>
<h1>Forgot password</h1>
<div class="dummy"></div>
</header>
<div class="content">
<h1 class="big">Change your password</h1>
<h1 class="cer">Confirm your email address</h1>
<form action="#" class="formstyle" style="padding-top:10px;padding-left: 10px">
<input type=" text " placeholder="Enter your email address" required>
<div class="btnn"><button type="submit" class="conf">Confirm</button></div>
</form>
</div>
<footer class="cl">
<div class="liner"></div>
<ul>
<li>
Terms
Privacy
About
</li>
</ul>
</footer>
</div>
</body>
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js "></script>
</html>
CSS:
body {
background-color: #FFFFFF;
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
header {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #E5E5E5;
}
h1 {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
color: #63BA86;
}
h1.big {
font-style: normal;
font-weight: 500;
color: #63BA86;
text-align: center;
}
h1.cer {
font-style: normal;
font-weight: 300;
color: #356B51;
text-align: center;
}
h2 {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
color: #63BA86;
}
form {
margin: auto;
text-align: center;
}
input {
width: 300px;
height: 35px;
border: 0.5px solid #63BA86;
border-radius: 5px;
font-family: Montserrat;
padding-left: 5px;
}
input:required {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
}
button {
margin-top: 10px;
padding: 10px 35px;
border: 0.5px solid #63BA86;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.btnn {
text-align: center;
}
button.conf {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
background-color: #67E298;
}
ul {
display: flex;
justify-content: flex-end;
text-decoration: none;
list-style: none;
}
li {
text-align: left;
margin: 10px;
}
link {
margin: 10px;
font-size: large;
}
a {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: #63BA86;
text-decoration: none;
margin: 1rem;
}
#media screen and (max-width: 30em) {
h1.big {
font-size: 20px;
line-height: 29px;
}
h1 {
font-size: 18px;
line-height: 22px;
}
h1.cer {
font-size: 12px;
line-height: 10px;
}
h2 {
font-size: 18px;
line-height: 29px;
}
form {
width: 90%;
}
button.conf {
font-size: 12px;
line-height: 17px;
}
footer.cl {
border-top: 1px solid #E5E5E5;
}
}
#media screen and (min-width: 30em) {
h1 {
font-size: 18px;
line-height: 22px;
}
h1.big {
font-size: 40px;
line-height: 29px;
}
h1.cer {
font-size: 12px;
line-height: 10px;
}
form {
width: 50%;
}
button.conf {
font-size: 12px;
line-height: 17px;
}
.liner {
width: auto;
height: 0px;
border: 1px solid #E5E5E5;
margin-top: 40px;
}
}
JSFiddle:
https://jsfiddle.net/Danielprabhakaran_N/7t8qk69b/3/
As promised, a complete overhaul of your code. Essentially I simplified your HTML a bit and fully recreated the CSS to make the page fully responsive without the use of #media queries or any external framework.
introduced use of box-sizing: border-box for all elements
main structure uses flexbox layout
introduced banding attributes ([band]) for easy construction of 'Landing Page' layout
inserted responsive page T/L/B/R spacing
used linear equations (y=mx+b) to calculate sizes for responsiveness (mainly fontsizes and element spacing)
now only uses em and rem for sizes where applicably, removed all uses of px
etc... (completion of this list with external references is pending)
Examples of
hover manipulation
using predefined Unicode icon as alternative to iconify JS (prevents load delay)
used inline SVG as an alternative icon to serve Android
Tested both landscape and portrait layout
Works on latest Chrome, Edge, Firefox and IE11 (and IE10 simulated)
And Android 9+, Samsung Galaxy J4+, 360x740 (Chrome, Firefox and default browser)
With minimum fit 320x320, maximum fit 1920x1200
Update
Use of Unicode does not seem to work on Android (or with some workaround), added inline SVG as an alternative. Idea behind it: loading some JS which in turn loads a single icon seems a bit overkill (not to mention s l o w)... SVG works on Android!
The Snippet (on SO full-page view required)
<!--
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js">// this JS disabled</script>
-->
/*****************************/
/* my preferred global rules */
/*****************************/
html,body { box-sizing: border-box; width: 100%; max-width: 100% }
*::before,*::after, * { box-sizing: inherit }
/*
Above CSS defines ALL elements to use 'border-box'
Defining `box-sizing: border-box` will make calculation/manipulating element sizes
much easier as (usually) you would want to know the width/height of an element
including its inner spacing ('padding') and border.
=> element width/height = content width/height + padding + border
Default CSS is 'box-sizing: content-box'
=> element width/height = content width/height
'margin' is never part of an element width/height, so use sparsely!
Own the boxmodel knowledge (MDN): https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
w3schools 'CSS box-sizing Property': https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
*/
/*
All math reference: https://www.mathsisfun.com/equation_of_line.html
*/
/* responsive base font size using y = mx + b */
html { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */
/* Simple banding attribute for use in 'Landing Page' layout */
[band] { display: flex; flex-flow: column wrap; }
[band*="cols"] { flex-direction: row } /* horizontally oriented container */
[band*="rows"] { flex-direction: column } /* vertically oriented container */
[band],[centered] { justify-content: center; align-content: center; align-items: center }
body[padded="1"],
body[padded="0"] [band*="padded"] {
/*
responsive page padding
and responsive band padding (same as responsive page padding, but at band level)
Top/Bottom padding: p1(320,16) p2(1920, 72) => 0.035x + 4.8 => vary from 16 to 72px
Left/Right padding: p3(320, 8) p4(1920,320) => 0.195x - 54.4 => vary from 8 to 320px
'Band padding' is only active when 'page padding' is off (0)
*/
padding: calc(3.5vh + 4.8px) calc(19.5vw - 54.4px);
}
/* prohibit user from selecting text (put in <body>), esp. convenient for 'click-happy' users... */
[no-select] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
[do-select] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: auto }
/* enable user to select text (put in specific elements) */
/* for debugging */
[outlines="1"] * { outline: 1px dashed }
/* YOUR CODE */
/*
Favouring 'mobile' only requires #media queries when you need
to override/modify CSS values for other (larger) devices.
- for the main design I used my Samsung J4+, 360x740
- and as large device my desktop display, 1920x1200
- smallest fit test 320x320 (Smartwatch? With a browser??? Okay...)
- and width 480px
*/
/*************************************/
/* First: setup the main page layout */
/*************************************/
/*
<body> contains a main 'page-wrapper'
with three distinct zones below each other,
(which I have designated to be a [band]):
- header
- content
- footer
[band] is a vertically oriented flexbox container
which centers all its child elements.
<body padded="0"> which means that page spacing is
done at [band="padded"] level.
*/
/******************************/
/* override some CSS defaults */
/******************************/
body { margin: 0 } /* remove default <body> spacing */
a { margin: 0; color: inherit; text-decoration: none }
button { display: block }
body {
height: 100vh; /* full viewport height */
/* all elements inherit below style */
font-size: 1rem; /* make it :root fontsize dependend */
/* which, in turn, is viewport size dependend */
font-family: Montserrat, Arial, Helvetica, sans-serif;
/* with fallbacks for slow/none loading fonts */
font-weight: 500; /* the preference for 'Montserrat' */
color: rgba(99,186,134,1);
/* default is 'Black', but most text is (#63ba86 greenish) */
/* converted to rgba so its transparency can be changed/manipulated */
}
.page-wrapper { /* main container holding all page content */
display: flex; /* it's not a [band], so define FBL */
flex-direction: column; /* of 3 container rows */
justify-content: space-between; /* pushes header/footer apart */
height: 100%; /* full parent height (<body>) */
}
/* .page-wrapper row 1 */
header {
padding: 0.25rem 0; /* instead of '[band="padded"]' */
font-size: 1.125em;
border-bottom: 1px solid rgba(0,0,0,0.1); /* #e5e5e5 */
}
header .text, header .iconify {
margin-right: auto
}
header .iconify {
font-size: 0.9em; margin-left: .5rem;
}
/* Unicode font assignment, does not show on Android! */
[utf] { font-family: serif }
/* icons from Unicode Group 'Supplemental Arrows-C' (https://unicode.org/charts/nameslist/) */
.iconify[utf="1F804"]:before {
content: '\1F804'; /* 1F804 🠄 Leftwards Arrow With Medium Triangle Arrowhead */
}
/* some other arrow, same Group */
.iconify[utf="1F808"]:before {
content: '\1F808'; /* 1F808 🠈 Leftwards Arrow With Large Triangle Arrowhead */
}
/* Inline SVG alternative (see end of document) */
.iconify.svg {
display: inline-block;
width : 0.9em;
height: 0.9em;
vertical-align: -0.1125em; /* 0.9 * -0.125 */
fill: currentColor; /* CSS color keyword */
}
/* .page-wrapper row 2 */
.content {
height: 100%; /* full available vertical FBL space (between header/footer) */
}
form {
padding: calc(3.5vh + 4.8px); /* inner spacing */
}
form>* {
margin: .6rem 0; /* element T/B outer spacing */
width: 100%;
}
.big {
font-size: calc(2.5vmin + 12px); /* (320,20)(1280,44) */
line-height: 1.45; /* original 29/20 */
}
.cer {
margin-bottom: .0625rem;
font-weight: 300;
font-size: 0.631rem; /* was 12px */
line-height: 1;
color: rgba(53,107,81,1); /* #356B51 */
}
button, input {
height: 1.875rem;
line-height: 1.45;
font-weight: bold;
border: 1px solid rgba(99,186,134,1);
border-radius: 0.25rem; /* 5px-ish */
}
button, input:required {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
}
input { padding: 0 .25rem }
button { height: 1.875em; margin-left: auto }
button.conf {
width: 4.5rem;
color: rgba(255,255,255,1); /* White */
background-color: rgba(103,226,152,1) /* lighter green */
}
/* .page-wrapper row 3 */
footer {
border-top: 1px solid rgba(0,0,0,0.1); /* #e5e5e5 */
}
footer a {
font-size: 0.75em;
line-height: 1.214; /* original 17/14 */
margin: calc(1.25vmin + 2px); /* (320,6)(1280,18) */
}
/* for testing (and a bit of fun...just put dots before 'form' to disable) */
form {
background-color: rgba(0,0,0,.05);
/* GMC elevation 1dp */
box-shadow: 0px 2px 1px -1px rgba(0,0,0,.20),
0px 1px 1px 0px rgba(0,0,0,.14),
0px 1px 3px 0px rgba(0,0,0,.12);
}
form:hover {
transform: scale(1.01);
/* GMC elevation 3dp */
box-shadow: 0px 3px 3px -2px rgba(0,0,0,.20),
0px 3px 4px 0px rgba(0,0,0,.14),
0px 1px 8px 0px rgba(0,0,0,.12);
}
form:active { transform: scale(1) }
/**/
<body outlines="0" padded="0" no-select>
<div class="page-wrapper">
<header band="cols">
<!-- div class="iconify" data-inline="false" data-icon="eva:arrow-back-fill"></div -->
<!-- div class="iconify" utf="1F804"></div -->
<svg class="iconify svg"><use xlink:href="#eva-arrow-back-fill"/></svg>
<div class="text">Forgot password</div>
</header>
<div class="content" band>
<form action="#" class="formstyle">
<div class="big">Change your password</div>
<div class="cer">Confirm your email address</div>
<input type="text" placeholder="Enter your email address" required>
<button type="submit" class="conf">Confirm</button>
</form>
</div>
<footer band="padded.cols">
Terms <!-- javascript:void(0) puts no entry in browser history -->
Privacy
About
</footer>
</div>
<!-- 'display: none' to hide this part of the document from view, definition only -->
<!-- usage of a 'symbol' is <use href="#symbol-ID"> in HTML -->
<svg style="display: none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="eva-arrow-back-fill" viewBox="0 0 24 24">
<path d="M19 11H7.14l3.63-4.36a1 1 0 1 0-1.54-1.28l-5 6a1.19 1.19 0 0 0-.09.15c0 .05 0 .08-.07.13A1 1 0 0 0 4 12a1 1 0 0 0 .07.36c0 .05 0 .08.07.13a1.19 1.19 0 0 0 .09.15l5 6A1 1 0 0 0 10 19a1 1 0 0 0 .64-.23a1 1 0 0 0 .13-1.41L7.14 13H19a1 1 0 0 0 0-2z"/>
</symbol>
</svg>
</body>
Check out the MDN Post on these topics too.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
It would be easier to create this entire page than to fix each and every css bugs !
Add this at the very top of your Css below body styling
footer {
position: fixed;
bottom: 0;
margin-bottom: 2vh;
width: 100%;
}
Well i couldnt perform the surgery but applied a little band aid on the injury ! this will stop the bleeding for a while until you walk again .
Related
I am developing a form which has certain error message when there is an error in the form. My problem is when ever the error message is displayed my form inputs are displayed as i wanted. This is the image which shows the display i want (this is with the error display property being commented out. It was display:none)
But when the display property(display:none) is active the input fields tend to shift their position like this
What should i change in the code to make sure that my text input fields should look somehow like this.
How do i achieve this.
My code is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="/styles/style.css">
<title>Frontend Mentor | Intro component with sign up form</title>
</head>
<body>
<section class="container">
<header>
<h1>Learn to code by watching others</h1>
</header>
<article class="first-para">
<p class="main-paragraph"> See how experienced developers solve <span class="second-line">problems in real-time.
Watching</span>
<span class="third-line">scripted tutorials is great, but</span> understanding how developers think is
<span class="invaluable">invaluable.</span></p>
</article>
<section class="try-box">
<p><span class="try">Try it free 7 days</span> then <br /> $20/mo. thereafter</p>
</section>
<form class="claim-form" action="/">
<input type="text" placeholder="First Name" id="first-name">
<img class='error-img' src="/images/icon-error.svg" alt="error">
<div class="err err-first">First Name cannot be empty</div>
<input type="text" placeholder="Last Name" id="last-name">
<img class='error-img' src="/images/icon-error.svg" alt="error">
<div class="err err-last">Last Name cannot be empty</div>
<input type="email" placeholder="Email Address" id="email">
<img class='error-img' src="/images/icon-error.svg" alt="error">
<div class="err err-email">Looks like this is not an email</div>
<input type="password" placeholder="Password" id="password">
<img class='error-img' src="/images/icon-error.svg" alt="error">
<div class="err err-pass">Password cannot be empty</div>
<button class="claim-btn">CLAIM YOUR FREE TRIAL</button>
<p class="agree">By clicking the button, you are agreeing to our <span class="terms">Terms and
Services</span></p>
</form>
</section>
</body>
<script src="script.js"></script>
</html>
CSS:
#import url('css-reset.css');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap');
:root {
--color-red: hsl(0, 100%, 74%);
--color-green: hsl(154, 59%, 51%);
--color-blue: hsl(248, 32%, 49%);
--color-dark-blue: hsl(249, 10%, 26%);
--color-grayish-blue: hsl(246, 25%, 77%);
--color-white: hsl(0, 0%, 100%);
--font-weight-four: 400;
--font-weight-five: 500;
--font-weight-six: 600;
--font-weight-seven: 700;
}
body {
font-family: 'Poppins',
sans-serif;
background: url('/images/bg-intro-mobile.png') var(--color-red);
}
.container {
max-width: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 70px;
}
header h1 {
color: var(--color-white);
font-weight: var(--font-weight-six);
font-size: 1.7em;
padding: 50px 50px 20px 50px;
margin-left: 50px;
line-height: 1.2;
}
.first-para {
max-width: 17rem;
}
.main-paragraph {
color: var(--color-white);
font-weight: var(--font-weight-four);
font-size: 0.85em;
margin-bottom: 50px;
line-height: 2;
}
.second-line {
margin-left: 13px;
}
.third-line {
margin-left: 20px;
}
.invaluable {
margin-left: 92px;
}
.try-box {
width: 270px;
height: 65px;
background-color: var(--color-blue);
border-radius: 10px;
color: var(--color-white);
text-align: center;
padding: 15px;
font-size: 0.8em;
margin-bottom: 20px;
box-shadow: 0px 4px 5px 1px rgba(0, 0, 0, 0.29);
}
.try-box p:not(.try) {
font-weight: var(--font-weight-four);
}
.try {
font-weight: var(--font-weight-six);
}
.claim-form {
width: 270px;
background-color: var(--color-white);
height: 450px;
border-radius: 10px;
box-shadow: 0px 4px 5px 1px rgba(0, 0, 0, 0.29);
margin-bottom: 30px;
}
#first-name,
#last-name,
#email,
#password {
width: 240px;
padding: 7px;
margin: 13px 0 0px 15px;
}
.error-img {
/* display: none; */
position: relative;
left: 220px;
bottom: 24px;
height: 16px;
width: 16px;
}
.err {
/* display: none; */
color: var(--color-red);
font-style: italic;
font-size: 0.7em;
margin-left: 90px;
margin-top: -10px;
}
.err::placeholder {
color: var(--color-dark-blue);
/* opacity for firefox */
opacity: 70%;
font-size: 0.8em;
font-weight: var(--font-weight-seven);
}
.claim-btn {
width: 240px;
margin: 13px 0 13px 15px;
padding: 12px;
color: var(--color-white);
border-radius: 5px;
border: 1px;
background-color: var(--color-green);
font-size: 0.8em;
font-weight: var(--font-weight-four);
box-shadow: 0px 4px 5px 1px rgba(0, 0, 0, 0.29);
cursor: pointer;
}
.claim-btn:active {
opacity: 50%;
}
.agree {
font-size: 0.6em;
color: var(--color-grayish-blue);
margin-left: 35px;
}
.terms {
color: var(--color-red);
font-weight: var(--font-weight-six);
margin-left: 65px;
cursor: pointer;
}
Thank you.
Instead of display: none;, which removes elements from the document, you can use visibility: hidden. Setting the visibility hides the element without changing the layout of a document. Another option that would work similarly, would be opacity: 0.
Both of these options are fine for sighted users, but you should also set aria-hidden to true when they are not visible to avoid the errors being read by screen readers.
I have followed a tutorial on the internet and I have the following html template:
body {
font-weight: 200;
font-size: 14px;
}
.header {
font-size: 20px;
font-weight: 100;
text-align: center;
color: #007cae;
}
.title {
font-size: 22px;
font-weight: 100;
/* text-align: right;*/
padding: 10px 20px 0px 20px;
}
.title span {
color: #007cae;
}
.details {
padding: 10px 20px 0px 20px;
text-align: left !important;
/*margin-left: 40%;*/
}
.hrItem {
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #fff; /* Modern Browsers */
}
<div class='wrapper'>
<div class='header'>
<p class='title'>Invoice #<hr class='hrItem' /> </p>
</div>
<div>
<div class='details'>
Bill to: <br/>
Amount: <br/>
Date:
</div>
</div>
The problem that I am having is that between Invoice # and the horizontal rule there is a significant amount of white space that I want to remove. I tried changing the padding and the margin in the .hrItem,.tittle and .header, however, this made no difference. Is it possible to remove that white space or should I reconsider the method of adding the horizontal line?
You need to place the <hr> outside of your <p>, as having it inside is invalid HTML and actually ends up creating an empty <p></p>, which creates more space:
What you should have is:
<div class='header'>
<p class='title'>Invoice #</p>
<hr class='hrItem' />
</div>
Once you make that change, you can control the spacing between the .hrItem and the .title by changing their margin properties (I set both to 0):
body {
font-weight: 200;
font-size: 14px;
}
.header {
font-size: 20px;
font-weight: 100;
text-align: center;
color: #007cae;
}
.title {
font-size: 22px;
font-weight: 100;
/* text-align: right;*/
padding: 10px 20px 0px 20px;
margin: 0;
}
.title span {
color: #007cae;
}
.details {
padding: 10px 20px 0px 20px;
text-align: left !important;
/*margin-left: 40%;*/
}
.hrItem {
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #fff; /* Modern Browsers */
margin: 0;
}
<div class='wrapper'>
<div class='header'>
<p class='title'>Invoice #</p>
<hr class='hrItem' />
</div>
<div class='details'>
Bill to: <br/>
Amount: <br/>
Date:
</div>
</div>
My issue is with this code here, you can view it at lapismc.net. for whatever reason it displays differently in chrome than it does in Firefox.
The "w-" classes are from CandyUI.css.
The popup-button classes are below.
.popup {
height: 170px;
min-height: 170px;
background-color: #244753;
border-top: 5px black;
box-shadow: black 0 -1px 3px 0, black 0 1px 3px 0;
}
.popup-container {
height: 120px;
}
.popup-para {
font-family: Raleway, sans-serif;
color: white;
font-size: 16px;
}
.popup-button {
width: 250px;
margin-left: 7px;
font-family: Raleway, sans-serif;
color: white;
font-weight: 400;
text-align: center;
}
.popup-button.youtube {
background-color: #5069ed;
}
.popup-button.youtube:hover {
background-color: #4259c0;
}
.popup-button.facebook {
background-color: #3973ed;
}
.popup-button.facebook:hover {
background-color: #3062ce;
}
.popup-button.forums:hover {
background-color: #2776bb;
}
<div class="w-section w-hidden-medium w-hidden-small w-hidden-tiny popup">
<div class="w-container popup-container">
<h1 class="heading white popup-title">Keep Updated</h1>
<p class="popup-para">Check out our Media Portals</p>
Visit our Facebook Page
Send us an Email
Join our Discord Server
</div>
</div>
The buttons display like this in chrome
and like this in firefox and edge
Any and all help is appreciated, please keep in mind that I am primarily a Java developer and have limited knowledge of CSS. Thanks.
I would wrap the three buttons and use flexbox. I'd also make them full-width on narrow devices. Here's an example. It's a proof of concept. If you need help applying it to your code, consider adding a live snippet to your question, reproducing the problem.
.popup {
height: 170px;
min-height: 170px;
background-color: #244753;
border-top: 5px black;
box-shadow: black 0 -1px 3px 0, black 0 1px 3px 0;
display: inlin-block;
}
.popup-container {
height: 120px;
}
.popup-para {
font-family: Raleway, sans-serif;
color: white;
font-size: 16px;
}
.popup-button {
margin: 0 0 7px 7px;
font-family: Raleway, sans-serif;
color: white;
font-weight: 400;
text-align: center;
}
.popup-button.youtube {
background-color: #5069ed;
}
.popup-button.youtube:hover {
background-color: #4259c0;
}
.popup-button.facebook {
background-color: #3973ed;
}
.popup-button.facebook:hover {
background-color: #3062ce;
}
.popup-button.forums {
background-color: #3585ee;
}
.popup-button.forums:hover {
background-color: #2776bb;
}
.button-bar {
display: flex;
flex-wrap: wrap;
background-color: #244753;
padding: 7px 7px 0 0;
}
.button-bar > * {
padding: 1rem .5rem;
box-sizing: border-box;
flex: 1 0 calc(33.33% - 7px);
text-decoration: none;
}
#media (max-width: 768px) {
.button-bar {
flex-wrap: wrap;
}
.button-bar > * {
flex: 1 0 100%;
max-width: calc(100% - 7px);
}
}
<div class="w-section w-hidden-medium w-hidden-small w-hidden-tiny popup">
<div class="w-container popup-container">
<h1 class="heading white popup-title">Keep Updated</h1>
<p class="popup-para">Check out our Media Portals</p>
<div class="button-bar">
Visit our Facebook Page
Send us an Email
Join our Discord Server
</div>
</div>
</div>
I have a set of buttons in html:
<div class="controls">
<div id="s-controls">
<button class="control-btn" style="background-color: #2de7f6">1</button>
<button class="control-btn" style="background-color: #69a6ea">2</button>
<button class="control-btn" style="background-color: #736ace">3</button>
<button class="control-btn" style="background-color: #372ac3">4</button>
</div>
</div>
that I want to shrink when minimizing the page. Right now when doing that, the buttons mantain their size and the design looks messy.
I have tried many things with css but I am not really good at it. This is what I have so far:
.controls {
background-color: #1F1F1F;
min-height: 50px;
}
button {
margin: 20px auto;
max-width: 100%;
}
#s-controls, #p-controls {
text-align: center;
}
#s-controls > *, #p-controls > * {
font-family: "Titillium Web", sans-serif;
font-weight: 600;
color: white;
cursor: pointer;
}
.control-btn {
display: inline-block;
/*border-radius: 4px;*/
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
line-height: 2.5em;
padding: 0 3em;
text-decoration: none;
}
line-height: 1.75em;
padding: 0 0.75em;
}
.control-btn:hover {
box-shadow: inset 0 1px 1px rgba(255,255,255,0.5),
inset 0 1.5em 1em rgba(255,255,255,0.3);
}
I intend to do this in pure html and css. The idea is to shrink the buttons at some point that they mantain the original one row design.
Any help would be appreciatted!
Try setting a width for the all of the containers (#s-controls, div.controls), and setting the actual width for the buttons, not just the max-width.
div.controls { width: 100%; }
#s-controls { width: 100%; }
button { width: 100%; max-width: 100%; }
Using media queries will give you the manipulation you are looking for at different devices and/or shrinking your browser.
Do this for all widths you are looking for and adjust the padding accordingly:
#media (max-width:991px){ //change this number to 768px, 560px, 480px, etc
.control-btn {
padding: 0 2em;
}
}
For different devices alignments you can use media query. For example for mobile width I have added button {width: 100% !important;} so that it will not collapse..
Please let me know if you are not looking for this
#media screen and (max-width: 480px) {
button {
padding: 0 2em !important;
}
}
controls {
background-color: #1F1F1F;
min-height: 50px;
}
button {
margin: 20px auto;
max-width: 100%;
}
#s-controls, #p-controls {
text-align: center;
}
#s-controls > *, #p-controls > * {
font-family: "Titillium Web", sans-serif;
font-weight: 600;
color: white;
cursor: pointer;
}
.control-btn {
display: inline-block;
/*border-radius: 4px;*/
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
line-height: 2.5em;
padding: 0 3em;
text-decoration: none;
}
line-height: 1.75em;
padding: 0 0.75em;
}
.control-btn:hover {
box-shadow: inset 0 1px 1px rgba(255,255,255,0.5),
inset 0 1.5em 1em rgba(255,255,255,0.3);
}
<div class="controls">
<div id="s-controls">
<button class="control-btn" style="background-color: #2de7f6">1</button>
<button class="control-btn" style="background-color: #69a6ea">2</button>
<button class="control-btn" style="background-color: #736ace">3</button>
<button class="control-btn" style="background-color: #372ac3">4</button>
</div>
</div>
.
What you want is to add nowrap to the container for buttons:
#s-controls { white-space: nowrap; }
but you also need to define button width:
.control-btn {
max-width: 90px;
width: 24%;
}
You can play with those values to fine-tune them.
Also, you have an extra closing curly bracket in .control-btn that messes up the code. Delete it.
padding: 0 3em;
text-decoration: none;
/* } extra bracket */
line-height: 1.75em;
padding: 0 0.75em;
See it in the fiddle
Suppose that I have a content div like this:
<div id="content">
</div>
I would like to know if it is possible with CSS to style this div to have a minimum height (let's say 700px, for example) and all the content that is placed inside this div will only stretch (making its height longer) the div if the sum of the height of its content is greater than the div's height.
I tried using the min-height attribute, but it simply didn't work. All content that I place inside the div makes it longer.
UPDATE
This is some page of my application with the css files (the id of the content div in the css files is conteudo) Unfortunatelly my code is not in English, but I think this is irrelevant. If you can spot the bug why the min-height attribute is not working:
acessonegado.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
<title>Grupos de E-mail de Servidores</title>
<link href="resources/css/gruposemailservidores.css" rel="stylesheet" type="text/css" />
<link href="resources/css/layout.css" rel="stylesheet" type="text/css" />
<link href="resources/css/acessonegado.css" rel="stylesheet" type="text/css" /></head><body>
<div id="cabecalho">
<img src="resources/img/ufca.png" alt="Universidade" />
<span>Grupos de E-mail de Servidores</span>
</div>
<form id="form" name="form" method="post" action="/gruposemailservidores/acessonegado.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form" value="form" />
<div id="usuario">
<div>
ADMIN<br />UNIVERSIDADE
</div>
</div>
<div id="barraTitulo">Acesso Negado
Sair
</div>
<div id="conteudo">
<p>Este aplicativo é de uso exclusivo de servidores da</p>
<p>COORDENADORIA DE INFRAESTRUTURA DE TI</p>
</div><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-8939669570174810183:-4107362002777505590" autocomplete="off" />
</form>
<div id="rodape">
<p>aaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbb</p>
</div></body>
</html>
gruposemailservidores.css
body
{
margin: 0;
padding: 0;
font-family: verdana, arial, sans-serif;
font-size: 70%;
}
#cabecalho
{
height: 84px;
background-color: #dde8df;
border-bottom: 1px solid #6f9b76;
}
#cabecalho img
{
position: absolute;
top: 4px;
left: 10px;
}
#cabecalho span
{
position: absolute;
top: 23px;
left: 145px;
font-family: trebuchet ms, arial, sans-serif;
font-size: 240%;
font-weight: bold;
color: rgba(0, 83, 83, 0.8);
text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
}
#rodape
{
font-size: 90%;
color: white;
background-color: #6f9b76;
text-align: center;
padding: 10px 0;
}
#rodape p
{
margin: 0;
}
#rodape p:first-child
{
margin-bottom: 2px;
}
input, select, textarea, button
{
font-family: inherit;
font-size: 100%;
}
input[type="submit"], input[type="button"]
{
border: 1px solid;
}
.ui-dialog
{
box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
-moz-box-shadow: 5px 5px 5px #888;
}
.ui-dialog #iconeAlerta
{
float: left;
margin: 0 7px 10px 0;
}
.ui-dialog #emailGrupoSetor
{
font-style: italic;
}
layout.css
#form #usuario
{
position: absolute;
height: 84px;
top: 0;
margin-right: 10px;
right: 0;
font-size: 105%;
color: #608a66;
}
#form #usuario div
{
height: 84px;
display: table-cell;
vertical-align: middle;
}
#form #barraTitulo
{
color: white;
font-size: 130%;
font-weight: bold;
background-color: #6f9b76;
margin: 0;
padding: 2px 10px;
}
#form #barraTitulo a
{
float: right;
color: white;
font-size: 75%;
font-weight: normal;
text-decoration: underline;
}
#form #conteudo
{
margin: 5px 10px;
min-height: 750px;
}
acessonegado.css
#conteudo p
{
text-align: center;
font-size: 180%;
}
#conteudo p:first-of-type
{
/* Comment the margin-top attribute and the height of the #conteudo div will change. It shouldn't. */
margin-top: 150px;
margin-bottom: 10px;
}
#conteudo p:last-of-type
{
margin: 0;
color: #004182;
}
Using min-height works just fine. see fiddle: http://jsfiddle.net/1g1pdqbc/6/
div {
min-height: 100px;
background-color: blue;
width: 100px;
}
The both divs are set to min-height: 100px but the second div has extra stuff in it and makes it taller.
This might be helpful
<div style = "min-height:100px; background-color:gray" id="content">
div with 100px height
</div>
<br/>
<div style = "min-height:100px; background-color:gray" id="content">
div with 100px height
<div style = "min-height:100px; background-color:blue" id="content">
inner div with 100px height
</div>
<div style = "min-height:100px; background-color:green" id="content">
inner div 3 with 100px height
</div>
</div>