This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 3 years ago.
I'm working on a simple template for a web page. On a large screen, my page looks like this:
![1] https://imgur.com/a/M6ARRoJ
On a small screen it looks like this:
![2] https://imgur.com/a/6kLOSEI
And, as I show in the image, the background of the footer disappears.
Here are my HTML and CSS codes:
body {
background-color: #bccedc;
}
#content {
width: 800px;
margin-left: auto;
margin-right: auto;
}
/* === HEADER === */
#header {
height: 50px;
background-color: #99ccff;
}
#header h1 {
text-align: center;
margin: auto;
padding-top: 10px;
font-size: 25px;
color: #3a3a3a;
text-transform: uppercase;
font-family: 'Century Gothic', 'Futura', sans-serif;
}
#middle {
display: flex;
/* Align sidebar with main */
}
/* === SIDEMENU === */
#sidebar {
float: left;
width: 20%;
background-color: #00cc00;
font-family: 'Century Gothic', 'Futura', sans-serif;
}
#sidebar ul {
list-style-type: none;
margin-left: auto;
margin-right: auto;
}
#sidebar li {
margin-top: 10px;
}
#sidebar a:link,
a:visited {
text-decoration: none;
color: #12366d;
}
#sidebar a:hover {
color: white;
}
#sidebar a:active {
color: yellow;
}
/* === MAIN === */
#main {
min-height: 500px;
float: left;
width: 85%;
background-color: #ffff99;
}
#main h2 {
text-align: center;
font-family: 'Century Gothic', 'Futura', sans-serif;
color: #373737;
}
#main h3 {
font-family: 'Century Gothic', 'Futura', sans-serif;
padding-left: 20px;
font-size: 14px;
text-transform: uppercase;
text-decoration: underline;
}
#main p {
text-align: justify;
margin: 20px;
font-family: 'Calibri', 'Arial', sans-serif;
}
#main ul {
padding-left: 70px;
list-style-image: url(bullet.png);
}
#main ol {
padding-left: 70px;
}
#main dt {
font-family: 'Calibri', 'Arial', sans-serif;
text-align: justify;
font-weight: bold;
padding-left: 40px;
}
#main li,
dd {
font-family: 'Calibri', 'Arial', sans-serif;
text-align: justify;
margin-right: 30px;
}
#main table,
th,
td {
border: 2px solid #003e80;
border-collapse: collapse;
height: 40px;
}
#main table {
text-align: center;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
width: 550px;
font-family: 'Calibri', 'Arial', sans-serif;
caption-side: bottom;
}
#main th {
background-color: #99ccff;
font-size: 20px;
color: #e6f2ff;
}
#main td {
background-color: #e6f2ff;
}
#main td:hover {
background-color: white;
}
#main caption {
font-style: italic;
color: #003e80;
}
/* === FOOTER === */
#footer {
height: 30px;
padding-top: 20px;
background-color: #99ccff;
}
#footer>p {
margin: auto;
text-align: center;
font-family: 'Century Gothic', 'Futura', sans-serif;
font-size: 14px;
}
/* === RESPONSIVE === */
#media only screen and (max-width: 850px) {
#content {
width: 600px;
}
#sidebar {
width: 25%;
}
#main table {
width: 400px;
}
}
#media only screen and (max-width: 650px) {
#content {
width: 450px;
}
#middle {
display: initial;
}
#sidebar {
display: flex;
justify-content: center;
width: 100%;
}
#sidebar ul {
margin-left: 30px;
}
#sidebar li {
float: left;
margin: 10px;
}
#main {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<div id="header">
<h1>title</h1>
</div>
<div id="middle">
<div id="sidebar">
<ul>
<li>Home</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div id="main">
<h2>Main body</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="footer">
<p>Footer is here</p>
</div>
</div>
</body>
</html>
I searched on the Internet for a solution but nothing helped me.
Can someone please tell me what exactly is the problem and how do I solve it?
That's because your #main element is floated. That way the position of the footer itself "officially" is right under the header, since floated elements are not wrapped by their parent elements by default. (check in the browser tools)
Add clear: both; to the footer's CSS to fix that:
body {
background-color: #bccedc;
}
#content {
width: 800px;
margin-left: auto;
margin-right: auto;
}
/* === HEADER === */
#header {
height: 50px;
background-color: #99ccff;
}
#header h1 {
text-align: center;
margin: auto;
padding-top: 10px;
font-size: 25px;
color: #3a3a3a;
text-transform: uppercase;
font-family: 'Century Gothic', 'Futura', sans-serif;
}
#middle {
display: flex;
/* Align sidebar with main */
}
/* === SIDEMENU === */
#sidebar {
float: left;
width: 20%;
background-color: #00cc00;
font-family: 'Century Gothic', 'Futura', sans-serif;
}
#sidebar ul {
list-style-type: none;
margin-left: auto;
margin-right: auto;
}
#sidebar li {
margin-top: 10px;
}
#sidebar a:link,
a:visited {
text-decoration: none;
color: #12366d;
}
#sidebar a:hover {
color: white;
}
#sidebar a:active {
color: yellow;
}
/* === MAIN === */
#main {
min-height: 500px;
float: left;
width: 85%;
background-color: #ffff99;
}
#main h2 {
text-align: center;
font-family: 'Century Gothic', 'Futura', sans-serif;
color: #373737;
}
#main h3 {
font-family: 'Century Gothic', 'Futura', sans-serif;
padding-left: 20px;
font-size: 14px;
text-transform: uppercase;
text-decoration: underline;
}
#main p {
text-align: justify;
margin: 20px;
font-family: 'Calibri', 'Arial', sans-serif;
}
#main ul {
padding-left: 70px;
list-style-image: url(bullet.png);
}
#main ol {
padding-left: 70px;
}
#main dt {
font-family: 'Calibri', 'Arial', sans-serif;
text-align: justify;
font-weight: bold;
padding-left: 40px;
}
#main li,
dd {
font-family: 'Calibri', 'Arial', sans-serif;
text-align: justify;
margin-right: 30px;
}
#main table,
th,
td {
border: 2px solid #003e80;
border-collapse: collapse;
height: 40px;
}
#main table {
text-align: center;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
width: 550px;
font-family: 'Calibri', 'Arial', sans-serif;
caption-side: bottom;
}
#main th {
background-color: #99ccff;
font-size: 20px;
color: #e6f2ff;
}
#main td {
background-color: #e6f2ff;
}
#main td:hover {
background-color: white;
}
#main caption {
font-style: italic;
color: #003e80;
}
/* === FOOTER === */
#footer {
height: 30px;
padding-top: 20px;
background-color: #99ccff;
clear: both;
}
#footer>p {
margin: auto;
text-align: center;
font-family: 'Century Gothic', 'Futura', sans-serif;
font-size: 14px;
}
/* === RESPONSIVE === */
#media only screen and (max-width: 850px) {
#content {
width: 600px;
}
#sidebar {
width: 25%;
}
#main table {
width: 400px;
}
}
#media only screen and (max-width: 650px) {
#content {
width: 450px;
}
#middle {
display: initial;
}
#sidebar {
display: flex;
justify-content: center;
width: 100%;
}
#sidebar ul {
margin-left: 30px;
}
#sidebar li {
float: left;
margin: 10px;
}
#main {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<div id="header">
<h1>title</h1>
</div>
<div id="middle">
<div id="sidebar">
<ul>
<li>Home</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div id="main">
<h2>Main body</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="footer">
<p>Footer is here</p>
</div>
</div>
</body>
</html>
Related
I have put the image inside of the paragraph tag itself and floated it right, however it moves it to the right but underlaps the container edge.
I have taken it out of the paragraph section as well and it still does the same. I have created containers as well for them. I want the image in the container with the paragraph. I have attached an image of the issue I am having as well as my css.
body {
background-image: url(../images/keyboard.jpeg);
background-repeat: no-repeat;
background-size: cover;
font-family: cursive;
}
/* GOOGLE FONTS*/
#import url('https://fonts.googleapis.com/css2?family=Cookie&family=Fuzzy+Bubbles&family=Jost:wght#700&display=swap');
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Cookie';
font-weight: 700;
}
/*ID Classes*/
#mainTitle {
color: #FFF;
font-size: 5em;
text-align: center;
text-shadow: 5px 5px 10px #17e85f;
text-decoration: underline solid;
font-family: fantasy;
}
#container {
border: 10px solid #FFF;
margin: auto;
margin-top: 10px;
padding: auto;
width: 50%;
}
#footer {
color: #FFF;
text-align: center;
border: 2px;
border-style: solid;
}
/* REUSABLE CLASSES*/
.navbar {
background-color: #0a861d;
border-radius: 30px;
text-align: center;
}
.navbar li {
display: inline-block;
list-style: none;
margin: 13px 20px;
text-align: center;
}
.navbar ul {
overflow: auto;
}
.navbar li a {
padding: 3px 3px;
text-decoration: none;
color: white;
}
.search {
float: right;
color: white;
padding: 12px 75px;
}
.navbar input {
border: 2px solid black;
border-radius: 14px;
padding: 3px 17px;
width: 129px;
}
/*SERVICES PAGE LIST*/
.servicelist ul {
line-height: 1.5em;
margin: 5px 0 15px;
padding: 0;
}
.servicelist li {
font-size: 50px;
font-weight: 500;
background-image: linear-gradient(to left, rgba(60, 154, 118, 0.91), #15c723);
color: transparent;
text-align: center;
background-clip: text;
-webkit-background-clip: text;
}
.center {
text-align: center;
}
.margin {
margin-top: 10px;
}
.scontainer {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box {
float: left;
width: 50%;
color: #ccc;
text-align: center;
height: 50%;
font-size: 50vmin;
font-family: helvetica;
}
/* SINGLE CLASSES*/
a:hover {
box-shadow: inset 100px 0 0 0 #54b3d6;
color: white;
}
h2 {
color: #FFF;
font-size: 2em;
text-align: center;
text-shadow: 5px 5px 10px #17e85f;
text-decoration: underline solid;
font-family: fantasy;
}
p {
color: #b8dae2;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.3em;
line-height: 24px;
margin: 10px 10px 24px;
padding: 30px;
text-align: justify;
border: 3px solid #FFF;
}
.service_styling {
color: #b8dae2;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.3em;
line-height: 24px;
margin: 10px 10px 24px;
padding: 30px;
text-align: justify;
border: 3px solid #FFF;
}
.imgcontainer {
width: auto;
height: auto;
border: 2px solid red;
float: inline-end;
}
.realImgContainer {
width: auto;
height: auto;
border: 2px solid red;
float: right;
}
img {
/* max-width: 50%; */
/* max-height: 50%; */
/* border: 5px solid #FFF; */
/* margin: auto; */
/* margin-top: 10px; */
/* padding: auto; */
/* width: 50%; */
}
/*
.imgHardware{
float: right;
}
.imgSoftware{
float: right;
}
.imgApp{
float: right;
}
.imgCabling{
float: right;
}
*/
<!-- NAV BAR-->
<nav class="navbar">
<ul>
<li>Home</li>
<li>Services</li>
<li>Locations</li>
<div class="search">
<input type="text" name="search" id="search" placeholder="Search this website">
</div>
</ul>
</nav>
<h1 id="mainTitle"> Services</h1>
<!-- MAIN SECTION-->
<section id="container">
<h2> Things We Do </h2>
<div class="servicelist margin">
<h2>Hardware</h2>
<div class="service_styling">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<div><img class="realImgContainer" src="images/cpusocket.jpeg" alt="computer socket"></div>
</span>
</div>
<div style="clear:both"></div>
<h2>Software</h2>
<p> We provide the latest software for all kinds of fields. We work directly with vendors to get the best rate - we provide competitive rates and offer affordable and simple subscription solutions - we also carry full version software that is subscription-free.
<img class="imgSoftware" src="images/code.jpeg" alt="computer code"></p>
<h2>Application development</h2>
<p> We can create and deploy custom software for whatever task you need completed. Our seasoned developers specialize in C, C++ and Java. Allowing us to create versailte and flexible software. Our team will with work with you hand in hand to ensure you
get exactly what you need. We will also provide 24/7 maintenance as well as upgrades on all of our in house software.
<img class="imgApp" src="images/codedeveloper.jpeg" alt="someone coding"></p>
<h2>Enterprise cabling</h2>
<p> We have over 30 years of infrastructure cabling experience. We have in house techncians who can terminate and pull ethernet and fiber optic cabling. We use our own equipment and do all of our work in house - without the use of a third party. So we
can give you a fair price as well as a clean and concise debriefing of the exact work we will be doing and its core benefits.
<img class="imgCabling" src="images/switchandcable.jpeg" alt="switch and cable">
</p>
</ul>
</section>
<!-- SUB SECTION-->
<section>
</section>
<!-- FOOTER-->
<div id="footer">© 2050</div>
I am trying to create a fixed nav. For the most part, it works. But I want to center the h1 for responsive design. I could just push it away from the burger menu but then it wouldn't be responsive and bang in the middle.
Also I would like to push the .intro paragraph down away from the top. But every time I do a margin gap appears at the top, and I can't for the life of me remember how to get rid of this.
Thank you to anyone who takes a look. Means a lot! Hopefully one day I can repay the favor!
Below is my HTML and CSS. I also used a standard normalize.css, and some Js but I don't think you will need that. If you do, let me know:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Code Review</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
</head>
<body>
<header>
<!-- Introduction -->
<div class="background">
<nav class="navbar">
<span class="open-slide" onclick="openSideMenu()">
<!-- <a href="#" onclick="openSideMenu()">-->
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="4"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="4"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="4"/>
</svg>
<!-- </a>-->
</span>
<div id="main">
<h1>Luke Bennett</h1>
</div>
<!--
<ul class="navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
-->
</nav>
<!-- Side Navigation Bar -->
<div id="side-menu" class="side-nav">
<span class="btn-close exit" onclick="closeSideMenu()">×</span>
Home
<a onclick="closeSideMenu()" href="#about">About</a>
<a onclick="closeSideMenu()" href="#portfolio-link">Portfolio</a>
<a onclick="closeSideMenu()" href="#resume-link">Resume</a>
<a onclick="closeSideMenu()" href="#contact">Contact</a>
</div>
<p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</header>
<main>
<!-- About Me -->
<div class="about-me"><a id="about"></a>
<h2>About Me</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<!-- Portfolio -->
<div class="portfolio"><a id="portfolio-link"></a>
<h2>Portfolio</h2>
<!-- Front Page -->
<img src="img/well-being/well-being.png" alt="Donjas-Well-Being-For-Kids"/>
</div>
<!-- Resume -->
<div class="resume">
Download Resume
</div>
<!-- Contact Form -->
<div class="contact-form"><a id="contact"></a>
<form>
<fieldset>
<legend>Contact Form</legend>
<ul>
<li>
<label for="name">Name</label>
<input required type="text" id="name" name="full_name" placeholder="Required">
</li>
<li>
<label for="email">Email</label>
<input required type="text" id="email" name="email_address" placeholder="Required">
</li>
<li>
<label for="message">Message</label>
<textarea id="message" name="other_topics"></textarea>
</li>
<button type="submit">Hello!</button>
</ul>
</fieldset>
</form>
</div>
</main>
<footer>
<p>My name is Luke Bennett and I am a Human - Luke Bennett</p>
</footer>
<script src="javascript/menu.js"></script>
*,
input,
textarea,
button {
font-family: 'Lato', sans-serif;
}
h1 {
font-size: 1.7rem;
font-weight: 300;
letter-spacing: 3px;
}
h2 {
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 2px;
}
p {
letter-spacing: 1px;
}
ul {
list-style: none;
padding: 0;
}
a {
text-decoration: none;
}
/************************************************************
HEADER
*************************************************************/
.navbar {
display: flex;
position: fixed;
overflow: hidden;
height: 40px;
padding: 16px 16px;
align-items: center;
}
#main {
margin: 0 auto;
}
#main a {
color: black;
}
.background {
background: linear-gradient(0deg, #fff, transparent 40%),
#333333 url('../img/sophie.jpg') no-repeat center;
background-size: cover;
padding-bottom: 50%;
margin-bottom: 30px;
}
.intro {
background: white;
opacity: 0.65;
line-height: 40px;
letter-spacing: 4px;
padding: 20px;
margin: 0 15% 15%;
}
/************************************************************
SIDE NAV
*************************************************************/
svg {
padding-top: 3px;
transition: 1s;
/*
border: 1px solid black;
border-radius: 50%;
*/
}
svg:hover {
opacity: 0.3;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #333333;
opacity: 0.9;
overflow-x: hidden;
text-align: center;
transition: 0.5s;
padding-top: 90px;
}
.side-nav a,
.btn-close {
display: block;
font-weight: 400;
color: white;
padding: 15px;
transition: 1s;
}
.side-nav a:hover,
.btn-close:hover {
background: white;
color: black;
font-weight: 400;
cursor: pointer;
}
.side-nav .btn-close {
position: absolute;
top: 0;
right: 22px;
font-size: 36px;
margin-left: 50px;
}
/************************************************************
MAIN
*************************************************************/
main {
margin-bottom: 0
}
.about-me {
margin-bottom: 40px;
}
.about-me h2 {
margin-bottom: 30px;
}
.about-me h2,
.about-me p {
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
.about-me p {
font-weight: 300;
margin-bottom: 0px;
}
/************************************************************
PORTFOLIO
*************************************************************/
.portfolio {
background: #DCEAF5;
text-align: center;
padding: 20px 20px 50px;
}
.portfolio h2 {
color: black;
margin-bottom: 40px;
}
.portfolio img {
width: 80%;
padding: 3px;
transition: 1s;
margin-bottom: 10px;
border: 2px solid grey;
}
.portfolio img:hover {
opacity: 0.6;
}
/************************************************************
RESUME
*************************************************************/
/* #DCEAF5 #659EB8 */
.resume {
display: flex;
background: #969DA3;
padding: 10%;
}
.resume a {
display: block;
background: #DCEAF5;
color: black;
font-size: 1.2rem;
text-align: center;
margin: auto;
padding: 7%;
border-radius: 5px;
transition: 0.5s;
}
.resume a:hover {
opacity: 0.6;
}
/************************************************************
CONTACT
*************************************************************/
.contact-form {
background: #cc8c33;
height: 500px;
padding: 20% 10%;
}
fieldset {
border: 0;
}
legend {
font-size: 1.5rem;
font-weight: 400;
text-align: center;
color: white;
}
label {
display: block;
color: white;
margin-bottom: 10px;
}
input,
textarea {
box-sizing: border-box;
border-radius: 5px;
padding: 10px;
}
input:focus,
textarea:focus {
border: 2px solid #969DA3;
outline: none;
}
input {
border-style: none;
width: 100%;
border: 2px solid #cc8c33;
margin-bottom: 10px;
transition: 0.5s;
}
::placeholder {
text-align: right;
font-style: italic;
font-size: 0.7rem;
padding-right: 1px;
}
/* Textarea styling */
textarea {
height: 110px;
resize: none;
width: 100%;
margin-bottom: 30px;
border: 2px solid #cc8c33;
}
/* Button styling */
button {
border: none;
background: lightblue;
color: white;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 1px;
width: 100%;
border-radius: 5px;
padding: 20px;
transition: 0.5s;
}
button:hover {
background: #DCEAF5;
color: black;
}
/************************************************************
SOCIAL
*************************************************************/
footer {
background: lightblue;
height: 500px;
}
I'm making a page layout and I can't apply styles only to the footer for some reason, I've reviewed the code and did find anything wrong (But i'm sure there bc its not working -_-) I've tried rewriting the code and still not working.
//*GENERAL*//
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
border: 1px solid black;
}
.logo img {
width: 100px;
margin: 50px auto 10px;
display: block;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: black;
}
//*NAVIGATION*//
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
padding: 10px;
text-align: center;
margin: 5px;
}
nav ul li a {
color: black;
}
//*HERO*//
.wrap {
height: 400px;
padding: 1px
}
.head-content {
height: 505px;
background: url(../img/hero.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 40% 50%;
padding: 10px;
text-align: center;
}
.head-content h1, a {
color: white;
}
.head-content h1 {
margin-top: 130px;
font-size: 3em;
}
.head-content .btn {
padding: 15px 20px;
margin: 10px auto;
background: #FF0080;
border-radius: 3px;
display: inline-block;
border-radius: 5px;
}
.btn:hover {
color: #FF0080;
background: white;
font-weight: bold;
transition: .25s;
}
//*LEARN MORE*//
.wrap-services {
height: 1400px;
padding: 1px;
margin: 1px;
}
.headline {
color: rgba(0,0,0, .8);
text-align: center;
padding: 10px;
height: 100px;
margin: 70px 0 0 0;
}
.headline h2 {
font-size: 1.5em;
padding: 0;
margin: 0;
}
.headline h3 {
color: rgba(0,0,0, .4);
font-weight: lighter;
font-size: 1em;
}
.ser-1,
.ser-2,
.ser-3 {
height: 400px;
padding: 10px;
margin: 0 2.5%;
text-align: center;
/*border: 1px solid black;*/
}
.ser-1 h3,
.ser-2 h3,
.ser-3 h3 {
border-bottom: 2px solid #FF0080;
padding: 10px;
margin: 5px 5px 30px;
font-size: 1em;
}
.ser-1 p,
.ser-2 p,
.ser-3 p {
color: rgba(0,0,0, .5);
font-size: .9em;
line-height: 2em;
}
//*REVIEWS*//
.wrap-review {
height: 770px;
}
.content-review {
text-align: center;
height: 770px;
background: #FF0080;
color: white;
padding: 1px;
}
.content-review h3 {
margin-top: 80px;
font-size: 1.7em;
}
.review {
background: white;
color: #FF0080;
margin: 20px 2.5%;
border-radius: 2px;
height: 200px;
display: block;
}
.review-content {
text-align: center;
padding: 40px 20px 20px;
}
.review-name {
font-style: italic;
font-weight: bold;
}
.review-name-img {
display: none;
}
//*FORM*//
.wrap-form {
height: 770px;
padding: 1px;
}
.wrap-form-contect {
text-align: center;
height: 770px;
padding: 1px;
margin: 70px 10px 10px;
border: 5px solid black;
}
.wrap-form-contect p {
text-transform: capitalize;
line-height: 1.5em;
font-size: .95em;
}
input,
textarea {
border: none;
background: #eee;
margin: 10px;
padding: 20px;
}
textarea {
padding: 30px;
}
button {
display: block;
margin: 10px auto;
background: #FF0080;
color: white;
border: none;
padding: 20px;
width: 75%;
font: bold 1.4em/1 sans-serif;
}
button:hover {
cursor: pointer;
background: yellow;
color: black;
transition: .5s;
}
//*FOOTER*//
footer {
background: black;
height: 500px;
margin: 500px;
padding: 500px;
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<title>FSA Doc.</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style/nor.css">
<link rel="stylesheet" type="text/css" href="style/main.css">
</head>
<body>
<header>
<div class="logo">
<img src="img/black.png" alt="FSA Doc.">
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>REVIEWS</li>
<li>CONTACT US</li>
</ul>
</nav>
</header>
<div class="head-content">
<h1>FSA Doc.</h1>
<a class="bth" href="#">CALL (866) 210-1337</a>
<a class="bth" href="#">LEARN MORE</a>
</div>
<div class="headline">
<h2>LEARN MORE</h2>
<h3>about how we help</h3>
</div>
<div class="ser-1">
<h3>SATISFACTION GUARANTEED</h3>
<p>Document Prep Express has a stellar success rate and we strive to provide services will get you the best results possible!</p>
</div>
<div class="ser-2">
<h3>NO UPFRONT FEES</h3>
<p>Period.</p>
</div>
<div class="ser-3">
<h3>WE’RE HERE TO HELP</h3>
<p>Confused? Don’t know where to turn? Our experts will answer all your questions.</p>
</div>
<div class="review">
<h3 class="head-review">what people say</h3>
<div class="review-contienr">
<p class="review">“FSA Doc. saved me from losing my car and apartment! I could not thank Document Prep Express enough.”</p>
<h3 class="reivew-name">Lindsay Anderson</h3>
</div>
<div class="review-contienr">
<p class="review">“Experts in their field! They told me everything to look out for and acted quickly”</p>
<h3 class="reivew-name">Ashley Guthrie</h3>
</div>
</div>
<div class="wrap-form">
<h3>get started</h3>
<p>let us know what can we do for you</p>
<form>
<input value="Your Name" type="text">
<input value="Email" type="text">
<textarea>Your Message</textarea>
<button type="submit">Send</button>
</form>
</div>
<footer>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</footer>
</body>
</html>
Remove the double back slashes from your css comments. Proper css comment syntax looks like this:
/* comment */
I am trying to make two sections called, get started and about us responsive, and I am a beginner at using bootstrap so I am making some mistakes.
I tried to make the get started section work, but the buttons are not responsive at all. The about us section, I used 2 images for laptop and cellphone but even that is creating some problems as the margin doesn't stay the same for picture and image, so need help.
HTML Code:
<section class="cont_1">
<div class="container">
<h2>Get started!</h2>
<div class="row">
<div class="col-md-7">
<p>Now that you now the process it's time to check out recent offer.
it only take 5 min to get ypur loan or invest</p>
</div>
<div class="col-md-1"></div>
<div class="col-xs-6 col-md-2 borrow"> Borrow </div>
<div class="col-xs-6 col-md-2 borrow"> <a style="background-color:#fff; color:#66cccc; border: 1px solid #66cccc;" href="#">invest</a> </div>
</div>
</div>
</section>
<section class="about">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="about_tx">
<h4>About Us</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="col-md-6"> <img src="img/corporate3.jpg"> </div>
</div>
</div>
<div class="about_tx"> <img src="img/corporate3.jpg"> </div>
</section>
CSS:
.cont_1 {
float: left;
width: 100%;
color: #676767;
padding: 82px 0px;
border-bottom: 2px solid #eeeeee;
border-top: 2px solid #eeeeee;
}
.cont_1 h2 {
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 25px;
font-weight: 600;
}
.cont_1 .col-md-7 p {
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 23px;
}
/*.cont_1 .col-md-2 a{font-family: 'Lato', Helvetica, Arial, sans-serif; font-size:28px;background:#66cccc; color:#FFF;padding:14px 30px 17px 37px; display:block; margin-bottom:10px;}
.cont_1 .col-md-2:last-child a {background: #fff; border: 1px solid #66cccc; color: #66cccc; display:block;}*/
.cont_1 .col-md-2 a {
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 28px;
background: #66cccc;
color: #FFF;
padding: 6px 40px;
float: left;
margin-bottom: 10px;
text-transform: capitalize;
border: 1px solid #fff;
}
.cont_1 .col-md-2 a:hover {
background: #fff;
border: 1px solid #66cccc;
color: #66cccc;
}
/******************************
*******************************
*********ABOUT US***************
*******************************
******************************/
.about {
float: left;
position: relative;
width: 100%;
}
.about_tx {
width: 100%;
float: left;
text-align: left;
margin-bottom: 25px;
}
.about_tx h4 {
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 25px;
color: #666;
font-weight: 600;
margin-top: 45px;
margin-bottom: 35px;
}
.about_tx p {
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 18px;
color: #666;
font-weight: 400;
margin: 0;
}
.about_tx img {
width: 100%;
height:80%;
float: left;
}
.about_tx img:last-child {
margin-top: 113px;
}
.about img {
bottom: 0;
position: absolute;
right: 0;
width: 49%;
}
.about .col-md-6 img {
display: none;
}
/******************************
*******************************
*********RESPONSIVE DIV********
*******************************
******************************/
#media only screen and (max-width: 1024px) {
.borrow {
width: auto;
padding: 0;
}
}
#media only screen and (max-width: 992px) {
.about img {
display: none;
}
.about .col-md-6 img {
display: block;
float: left;
position: relative;
width: 100%;
}
}
#media only screen and (max-width: 980px) {
.col-md-2 > a {
display: block;
margin: 0 10px 0 0;
}
}
#media only screen and (max-width: 768px) {
.copy_tx p {
text-align: center;
}
.sm {
text-align: center;
}
}
#media only screen and (max-width: 480px) {
}
#media only screen and (max-width: 320px) {
.cont_1 .col-md-2 a {
padding: 6px 25px;
}
}
If there is a very easy way of making it responsive with just bootstrap classes please do help me out, and is it possible using just one image and making it responsive for about us? And the files are also attached if you want to take a look at it.File
Try replacing your section (cont_1) by below:
<section class="cont_1">
<div class="container">
<h2>Get started!</h2>
<div class="row">
<div class="col-md-12">
<div class="col-md-7">
<p>Now that you now the process it's time to check out recent offer.
it only take 5 min to get ypur loan or invest</p>
</div>
<div class="col-md-2 borrow"> Borrow </div>
<div class="col-md-2 borrow"> <a style="background-color:#fff; color:#66cccc; border: 1px solid #66cccc;" href="#">invest</a> </div>
</div>
</div>
</div>
</section>
I have a section where I have floated content on the left and right. The left content is gonna be bigger that the right (on height) so I want the right content to be vertically centered/aligned to the left content. How can I make that ?
Example image:
The blue content is gonna be mostly h1 and p and the red one just one small image and 1-2 words below it.
Code:
.inner {
background: none repeat scroll 0 0 #FFFFFF;
max-width: 576px;
width: 100%;
padding: 37px 34px 37px 34px;
}
.leftSide {
width: 80%;
float: left;
border-right: 1px solid #f2f2f2;
}
.leftSide a h1 {
font-size: 20px;
color: #3c3c3c;
text-transform: none;
font-family: 'Open Sans light';
}
.leftSide span p {
font-size: 12px;
padding-top: 2px;
}
.leftSide .description {
font-size: 13px;
padding: 15px 0 25px 0;
color: #6a6868;
line-height: 1.4;
font-family: 'Open Sans';
}
.leftSide .button {
background-color: #8D1313;
border-radius: 3px;
color: #FFFFFF;
font-family: 'Open Sans light';
font-size: 13px;
margin-top: 20px;
padding: 7px 10px;
}
.rightSide {
float: right;
width: 15%;
height: 100%;
text-align: center;
}
.rightSide p {
text-align: center;
color: #565656;
font-size: 14px;
font-family: 'Open Sans';
}
<div class="inner clearfix">
<div class="leftSide">
<a href="#">
<h1>Jsut a simple Headline</h1>
</a>
<span>
<p> 15 April / 4 Comments / 434Views </p>
</span>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class="button" href="#">learn more...</a>
</div>
<div class="rightSide">
<img src="img/author.png" alt="author" />
<p>J.Smith</p>
</div>
</div>
I found a method that works. You will have to tweak it based on your code. JsFiddle here.
HTML:
<div id="myrow">
<div id="content">Content<br/>alpha</div>
<div id="rightside">Right Side</div>
</div>
CSS:
body {
font-family: sans-serif;
font-size: 20pt;
box-sizing: border-box;
}
#myrow {
vertical-align: middle;
width: 100%;
border: solid 1px black;
position: relative;
}
#myrow:after {
content: "";
display: table;
clear: both;
}
#content, #rightside {
display: inline-block;
float: left;
margin: 0 auto;
height: 3em;
text-align: center;
vertical-align: middle;
color: white;
}
#content {
width: 55%;
background-color: #307FFF;
line-height: 1.5em;
}
#rightside {
width 45%;
min-width: 45%;
background-color: #F56362;
line-height: 3em;
}
The line-height is what centers the text or image. You may need to adjust your line-heights to accommodate your content.