Issue
The social media links are going on the right bottom corner instead of top right, I searched how to position flex items vertically and I got to try align-items: start. I tried it and it didn't worked.
I used CSS grid to make the mobile style, and then flex in the media links to try to make it horizontal in tablet & desktop. I'm quite new in coding so I prefer simpler answers to understand.
footer {
width: 100%;
padding: 25px 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"section-1 section-2";
background-color: black;
color: white;
}
.section-1 {
grid-area: section-1;
}
.section-2 {
grid-area: section-2;
}
footer .section-1 ul {
padding-left: 50px;
}
footer .section-2 ul {
margin-right: 70px;
padding-left: 30px;
}
footer section ul li {
padding: 3px 0;
font-size: 16px;
}
footer section ul li h3 {
padding-bottom: 5px;
font-size: 22px;
}
#media only screen and (min-width: 768px) {
/* < FOOTER > (desktop & tablet resolution) */
footer {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"section-1 ";
background-color: black;
color: white;
}
footer .section-1 ul {
padding-left: 70px;
}
footer .section-2 ul {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
justify-content: center;
}
footer section ul li {
font-size: 20px;
}
footer section ul li h3 {
padding-bottom: 10px;
font-size: 25px;
}
footer .section-2 ul li {
padding: 0 18px;
}
}
<div class="container">
<header>
<nav>
<ul>
<li>
</li>
</ul>
</nav>
</header>
<main>
<div class="page-wrap">
<p></p>
</div>
</main>
<footer>
<!-- Site Links -->
<section class="section-1">
<ul>
<li>
<h3>Title</h3>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</section>
<!-- Social Media Links -->
<section class="section-2">
<ul>
<li>Twitter</li>
<li>Reddit</li>
<li>Instagram</li>
<li>Linkedin</li>
</ul>
</section>
</footer>
</div>
Image
Footer issue picture
Try this updated css :
/* < FOOTER > (mobile) */
footer {
width: 100%;
padding: 25px 0;
display: flex;
background-color: black;
color: white;
}
footer .section-1 ul {
padding-left: 50px;
}
footer .section-2 ul {
margin-right: 70px;
padding-left: 30px;
}
footer section ul li {
padding: 3px 0;
font-size: 16px;
}
footer section ul li h3 {
padding-bottom: 5px;
font-size: 22px;
}
#media only screen and (min-width: 768px) {
/* < FOOTER > (desktop & tablet resolution) */
footer {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"section-1 ";
background-color: black;
color: white;
}
footer .section-1 ul {
padding-left: 70px;
}
footer .section-2 ul {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
justify-content: center;
}
footer section ul li {
font-size: 20px;
}
footer section ul li h3 {
padding-bottom: 10px;
font-size: 25px;
}
footer .section-2 ul li {
padding: 0 18px;
}
}
I need something like this, i tried alot but failed lol, im newenter image description here
flex space between
.row {
display: flex;
justify-content: space-between;
}
<div class="row">
<div class="left">logo</div>
<div class="center">menu menu menu menu</div>
<div class="right">anonymous</div>
</div>
You'll need some HTML and some CSS.
I don't have the time to make you the header just like in that screenshot you postet but maybe heres a start.
Put this in the body of your HTML page:
<div class="header">
CompanyLogo
<div class="header-right">
<a class="active" href="#home">Home</a>
Contact
About
</div>
</div>
<div style="padding-left:20px">
<h1>Responsive Header</h1>
<p>Resize the browser window to see the effect.</p>
<p>Some content..</p>
</div>
At the beginning of your document make a block or use an external stylesheet.
If you use an external stylesheet remember to link it in your HTML document.
In your style block put the following:
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
You'll end up with a fairly responsive header.
Now just link in your logo.
This is an example from w3Schools.
Check out this snippet.
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
CompanyLogo
<div class="header-right">
<a class="active" href="#home">Home</a>
Contact
About
</div>
</div>
<div style="padding-left:20px">
<h1>Responsive Header</h1>
<p>Resize the browser window to see the effect.</p>
<p>Some content..</p>
</div>
</body>
</html>
I want to say first that I'm new to web dev, so maybe there's an obvious error I can't catch in my code... My problem is that the responsiveness of the site works only while I'm trying it in the dev tools, but in the actual site, there's a section that doesn't resize along with the others (section1 actually). This happens whit the tablet.css, because mobile and desktop work almost fine. I'm starting to have the doubt that maybe even mobile.css has this problem because I can't make the browser window so small, so I rely on the dev tools. I honestly can't figure why... I've tried in different browsers (Brave, FF Developer Edition, Microsoft Edge) and the story is the same.
I leave you my code, I use three CSS for mobile, tablet, and desktop, since I thought with media queries it would have been too complicated.
with dev tools
in the site
HTML:
<!DOCTYPE html>
<html lang="it" dir="ltr">
<head>
<link rel="stylesheet" href="style.css">
<link
href="https://fonts.googleapis.com/css2?family=Domine:wght#400;700&family=Lora:ital,wght#0,400;0,600;0,700;1,400;1,500&family=Montserrat:wght#300;400;700&display=swap"
rel="stylesheet">
<link rel="icon" href="images/alebacce.ico">
<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />
<link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 957px)" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Bacce's Angle</title>
</head>
<body>
<nav class="navflex">
<img class="logo" src="images/alebacce.png" alt="a logo representing html tags">
<ul class: "menu">
<li>Home</li>
<li>Chi sono</li>
<li>Skills</li>
<li>Interessi</li>
<li>Contattami</li>
</ul>
<input id="hamburger" type="checkbox">
<label for="hamburger"></label>
</nav>
<div class="main">
<picture>
<source
media="(min-width: 650px)"
srcset="images/webdevlr2.png">
<source
media="(max-width: 465px)"
srcset="images/webdevlr2mobile.png">
<img src="images/webdevlr2.png"
alt="Welcome on my site!">
</picture>
<div class="welcome">
<p>
<h1><strong>ALESSANDRO BACCELLI</h1></strong>
</p>
<p><em>Work in progress</em> WEB DEVELOPER</p>
</div>
</div>
<div class="divide first">
<div class="heading">
<h1 id="chisono">Chi sono</h1>
</div>
<div class="section1">
<div class="profile">
<picture>
<source
media="(min-width: 650px)"
srcset="images/profiledef.png">
<source
media="(max-width: 465px)"
srcset="images/profiledefmobile.png">
<img src="images/profiledef.png" alt="A picture of me">
</picture>
</div>
<div class="biography">
<p>Un ragazzo genovese di 24 anni, laureato in <em>Scienze della Comunicazione</em> da sempre appassionato di
tecnologia e digitale. <br><br> Ho recentemente scoperto
la mia passione per la programmazione grazie ai corsi di <strong>start2impact</strong>,
iniziando il mio viaggio nel mondo di Html, CSS e via discorrendo... <br><br>
Per quanto la strada sia ancora lunga ho fiducia nel futuro, questo sito vuole infatti essere l'inizio di un
lungo percorso.</p>
<div class="download">
<button>Scarica il mio CV</button>
</div>
</div>
</div>
</div>
<div class="divide colordifferent">
<div class="heading margin">
<h1 id="skills">Skills</h1>
</div>
<div class="section2">
<div class="hard">
<h2>Hard skills</h2>
<ul>
<li>Inglese fluente</li>
<li class="modifiedli">HTML</li>
<li class="modifiedli">CSS</li>
<li>Canva</li>
</ul>
</div>
<div class="soft">
<h2>Soft skills</h2>
<ul>
<li>Autonomia</li>
<li>Fast learner</li>
<li>Empatia</li>
<li>Ascolto attivo</li>
</ul>
</div>
</div>
</div>
<div class="divide">
<div class="heading bottomodif">
<h1 id="interessi">Interessi</h1>
</div>
<div class="section2">
<div class="inte hard">
<ul>
<li id="programmazione">Coding</li>
<li id="foto">Fotografia digitale</li>
<li id="grafica">Grafica</li>
<li id="discover">Scoprire nuove cose</li>
<li id="cucina">Cucina</li>
<li id="videogiochi">Video-games</li>
</ul>
</div>
<div class="ressi soft">
<ul>
<li id="self">Self-growth</li>
<li id="mind">Mindfulness</li>
<li id="fit">Fitntess & Health</li>
<li id="storia"><span class="history">Storia e Antropologia</span></li>
<li id="book">Lettura</li>
<li id="eco">Ambiente</li>
</ul>
</div>
</div>
</div>
<footer id="chiamami">
<div class="foot"></div>
<div class="foot contact">E-mail<span class="not"><br></span><span class="bracket"> | </span>Linkedin<span class="not"><br></span><span class="bracket"> | </span>Start2impact<br>
<br> ALESSANDRO BACCELLI 2020 ©</div>
<div class="foot"></div>
</footer>
</body>
</html>
Style.CSS (desktop)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
background-color: #E5DDC8;
color: #1F1F1F;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #EBFDFF;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #B1C5E7;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #7699D4;
}
h1,
h2 {
font-family: "Montserrat", "Helvetica", "Arial", sans-serif;
color: #141414;
}
#hamburger {
display: none;
}
.navflex {
display: flex;
background-color: #004369;
font-size: 130%;
color: #FFFFFF;
width: 100%;
height: 100px;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
}
.logo {
height: 100%;
margin-left: 150px;
}
nav ul {
list-style-type: none;
text-align: right;
margin-right: 30px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
text-decoration: none;
color: #FFFFFF;
padding: 0px 25px;
}
nav a:hover {
text-decoration: underline;
}
nav a:visited {
color: #ffffff;
}
.main {
display: flex;
}
.welcome {
display: none;
color: #FFFFFF;
font-size: 3em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
text-shadow: 2px 2px 2px #1F1F1F;
}
.welcome h1 {
white-space: nowrap;
color: #ffffff;
}
.main img {
width: 100%;
position: relative;
}
.divide {
height: 900px;
margin-top: 120px;
}
.heading {
font-family: "Montserrat",
"Helvetica",
"Arial",
sans-serif;
color: #141414;
font-size: 200%;
margin-bottom: 80px;
text-align: center;
}
.section1 {
display: flex;
justify-content: center;
width: 958px;
margin: 0 auto;
}
.profile {
text-align: center;
}
.biography {
align-self: center;
font-size: 140%;
margin-left: 80px;
}
.biography a {
color: #01949A;
text-decoration: none;
}
.biography a:hover {
color: #004369;
text-decoration: underline;
}
.download {
display: flex;
justify-content: center;
margin: 0 auto;
}
.biography button {
font-size: 130%;
padding: 15px;
background-color: #01949A;
border-radius: 10px;
border: none;
margin-top: 40px;
}
.biography button a {
color: #ffffff;
text-decoration: none;
}
.biography button a:hover {
color: #ffffff;
text-decoration: none;
background-color: #004369;
}
.biography button:hover {
background-color: #004369;
}
.section2 {
display: flex;
margin: 0 auto;
justify-content: space-evenly;
font-size: 200%;
}
.colordifferent {
background-color: #E5F9E0;
padding-top: 120px;
}
.margin {
margin-bottom: 145px;
}
.hard h2,
.soft h2 {
margin-bottom: 25px;
}
.section2 ul {
list-style-type: none;
margin-bottom: 140px;
}
.section2 li {
margin-bottom: 25px;
;
}
.section2 ul li::before {
content: "\2705";
margin-right: 25px;
}
.section2 ul .modifiedli::before {
content: "🚧";
}
.section2 ul #programmazione::before {
content: "👨🏻💻";
}
.section2 ul #foto::before {
content: "📸";
}
.section2 ul #grafica::before {
content: "🎨";
}
.section2 ul #discover::before {
content: "🗺️";
}
.section2 ul #cucina::before {
content: "👨🏻🍳";
}
.section2 ul #videogiochi::before {
content: "🎮";
}
.section2 ul #self::before {
content: "📈";
}
.section2 ul #mind::before {
content: "🧘🏻♂️";
}
.section2 ul #fit::before {
content: "🏋🏻";
}
.section2 ul #storia::before {
content: "🏺";
}
.section2 ul #book::before {
content: "📖";
}
.section2 ul #eco::before {
content: "♻️";
}
.bottomodif {
margin-bottom: 110px;
}
footer {
display: flex;
text-align: center;
align-items: center;
height: 350px;
background-color: #004369;
color: #FFFFFF;
font-size: 130%;
}
.foot {
width: 33.33333%;
}
footer a {
color: #FFFFFF;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
.not {
display: none;
}
Mobile:
body {
display: flex;
flex-direction: column;
font-size: 90%;
width: 100%;
}
nav {
width: 100%;
}
nav ul {
display: none;
}
#hamburger {
visibility: hidden;
}
label,
label::before,
label::after {
width: 100px;
height: 15px;
border-radius: 5px;
background: white;
transition: 0.6s;
-webkit-transition: 0.6s;
}
label {
cursor: pointer;
}
label::before {
content: "";
transform: translateY(-30px);
}
label::after {
content: "";
transform: translateY(30px);
}
#hamburger:checked+label {
width: 0px;
}
#hamburger:checked+label::before {
transform: rotate(45deg) translate(0px);
}
#hamburger:checked+label::after {
transform: rotate(-45deg) translate(0px);
}
.logo {
margin-left: 25px;
}
.main {
display: block;
}
.main img {
display: block;
min-height: 100%;
min-width: 100%;
position: static;
overflow: hidden;
}
.welcome {
display: none;
}
.divide {
height: fit-content;
width: 100%;
}
.section1,
.section2 {
display: block;
width: 100%;
height: initial;
overflow-y: auto;
}
.profile img {
height: auto;
max-width: 100%;
margin-bottom: 20px;
}
.biography {
display: block;
width: 90%;
text-align: left;
margin-left: 5px;
margin: 0 auto;
}
.hard,
.soft {
text-align: center;
margin-bottom: 80px;
}
.hard h2,
.soft h2 {
margin-bottom: 50px;
}
.hard ul,
.soft ul {
text-align: left;
width: 70%;
margin: auto;
word-wrap: break-word;
}
.hard ul li,
.soft ul li {
padding-left: 65px;
text-indent: -65px;
}
.inte,
.ressi {
margin-bottom: 0;
}
.ressi ul {
margin-bottom: 150px;
}
.history {
padding-left: 10px;
}
.bracket {
display: none;
}
.not {
display: unset;
}
Tablet:
body {
width: 100%;
}
.divide,
.section1 {
width: 100%;
}
.first {
height: 1200px;
flex-direction: column;
}
.section1 {
width: 90%;
display: block;
}
.profile {
margin-bottom: 70px;
}
.biography {
margin: 0 auto;
}
.biography button {
margin-top: 70px;
}
Thanks everyone for the help!
As you main issue has been fixed, I try to adress your question from the comments how to use media queries.
You only use one css file for everything. For tablet and mobile devices you use the media queries as below. You start a media query with #media followed by only screen to adress only screens. Then you apply rules like and (min-width) and/or and (max-width) followed by the css opening tag { and closed with the css closing tag }. inbetween the css the same way you write it normally.
/* your normal css here that should apply to every screen width as well as your desktop css that is not covered with the media queries for mobile and tablet */
#media only screen
and (max-width: 480px) { /* <-opening tag media query */
/* your mobile css here
as example: */
.class { /* <-opening tag css selector */
background-color: blue;
} /* closing tag css selector */
#id { /* <-opening tag css selector */
background-color: red;
} /* closing tag css selector */
} /* <-closing tag media query */
#media only screen
and (min-width: 481px)
and (max-width: 957px) { /* <-opening tag media query */
/* your tablet css here
as example: */
.class { /* <-opening tag css selector */
background-color: blue;
} /* closing tag css selector */
#id { /* <-opening tag css selector */
background-color: red;
} /* closing tag css selector */
} /* <-closing tag media query */
I am sure this is something very simple but I want to align my burger Nav with the text I have defined. It is currently sitting underneath.
I have tried including the href link within the defined text but this then causes the burger nav to be shown at all times, and not just mobile sizes. Ideally this will only be shown at smaller screen widths.
Here is my code.
body {
font: 100%/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: white;
}
/* Style the list 'container' */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */
ul.topnav li {
float: left;
}
/* style the links */
ul.topnav li a {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* hover */
ul.topnav li a:hover {
color: gold;
}
/* Hide the icon initially */
ul.topnav li.icon {
display: none;
}
/* Global */
.container {
width: 60%;
margin: auto;
overflow: hidden;
}
a {
text-decoration: none;
color: black;
}
ul {
margin: 0;
padding: 0;
}
.subscribe {
height: 38px;
background: gold;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: black;
}
.dark {
padding: 25px;
background: #35424a;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
/* Header **/
header {
background: #35424a;
color: white;
padding-top: 30px;
min-height: 70px;
border-bottom: gold 5px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 100%;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight {
color: gold;
}
header a:hover {
color: gold;
}
h3 .bronze {
color: #cc6633;
}
h3 .silver {
color: silver;
}
h3 .gold {
color: gold;
}
/* Showcase */
#showcase {
min-height: 400px;
color: black;
}
#showcase h1 {
margin-top: 50px;
font-size: 300%;
margin-bottom: 10px;
}
#showcase p {
font-size: 120%;
}
/* Newsletter */
#newsletter {
padding: 15px;
color: #ffffff;
background: #35424a
}
#newsletter h1 {
float: left;
}
#newsletter form {
float: right;
margin-top: 15px;
}
#newsletter input[type="email"] {
padding: 4px;
height: 26px;
width: 250px;
}
/* Sidebar */
aside#sidebar {
float: right;
margin-top: 10px;
}
aside#sidebar .quote input,
aside#sidebar .quote textarea {
top-margin: 10px;
width: 80%;
padding: 10px;
}
/* Main-col */
article#main-col {
float: left;
width: 65%;
}
/* Imagery */
#social {
margin-top: 10%;
text-align: center;
font-size: 150%;
color: black;
}
#imagery {
margin-top: 5%;
margin-bottom: 5%;
}
#imagery .box {
float: right;
text-align: center;
width: 30%;
padding: 10px;
}
#imagery .box i {
font-size: 700%;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
.column img {
margin-top: 12px;
width: 100%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Services */
ul#services li {
list-style: none;
padding: 20px;
border: #cccccc solid 1px;
margin-bottom: 5px;
background: #35424a;
color: white;
}
footer {
padding: 20px;
margin-top: 20px;
color: black;
background-color: gold;
text-align: center;
}
/* Media Queries */
#media(max-width: 768px) {
header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
text-align: center;
width: 100%;
}
header {
padding-bottom: 20px;
}
#imagery {
font-size: 50%;
float: none;
}
#showcase h1 {
margin-top: 40px;
}
#newsletter button,
.quote button {
display: block;
width: 100%;
}
#newsletter form input[type="email"],
.quote input,
.quote textarea {
width: 100%;
margin-bottom: 5px;
}
/* nav */
ul.topnav li {
display: none;
}
ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
/* 'un' float the list items so they return to displaying vertically */
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/*css reset
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-image: url("bg.jpg");
background-size: cover; /*this seems better*/
/*background-size: contain;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end reset */
<!DOCTYPE html>
<html lang="en">
<head>
<title>DB Plumbing | Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://use.fontawesome.com/3a2264e344.js"></script>
<script src="html8shiv.js"></script>
<link rel="shortcut icon" type="image/png" href="wrench.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="desciption" content="Darran Brady Plumbing">
<meta name="keywords" content="Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
<meta name="author" content="DB, Darran, Brady, Darran Brady">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav" id="myTopnav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Coverage</li>
<li>Contact</li>
<li class="icon">
☰
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Local Award Winning Trader</h1>
<h2>Call Darren | <i class="fa fa-phone" aria-hidden="true"></i> 07756848657</h2>
<p>DB Plumbing provides a full range of general plumbing and repair services, from installing your new bathroom suite to fixing that leaking tap or joint that has been annoying you for ages. </p>
<p>Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Weekly Blog</h1>
<form>
<input type="email" placeholder="Subscribe today...">
<button type="submit" class="subscribe">Subscribe</button>
</form>
</div>
</section>
<section id="imagery">
<div class="container">
<div class="box">
<i class="fa fa-star" aria-hidden="true"></i>
<h1>Accredited</h1>
<p>Gas Safe Accreditted </p>
</div>
<div class="box">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
<h1>Reputable</h1>
<p>"25 years service experience "</p>
</div>
<div class="box">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<h1>Local</h1>
<p>Sussex and Surrey Countywide</p>
</div>
</div>
</section>
<footer>
<div>
<p>Darren Brady Plumbing Copyright © 2017</p>
</div>
</footer>
</body>
</html>
Wanting to float the burger nav to align with text
Place your button first, on the top of the nav like this
body {
font: 100%/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: white;
}
/* Style the list 'container' */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */
ul.topnav li {
float: left;
}
/* style the links */
ul.topnav li a {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* hover */
ul.topnav li a:hover {
color: gold;
}
/* Hide the icon initially */
ul.topnav li.icon {
display: none;
}
/* Global */
.container {
width: 60%;
margin: auto;
overflow: hidden;
}
a {
text-decoration: none;
color: black;
}
ul {
margin: 0;
padding: 0;
}
.subscribe {
height: 38px;
background: gold;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: black;
}
.dark {
padding: 25px;
background: #35424a;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
/* Header **/
header {
background: #35424a;
color: white;
padding-top: 30px;
min-height: 70px;
border-bottom: gold 5px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 100%;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight {
color: gold;
}
header a:hover {
color: gold;
}
h3 .bronze {
color: #cc6633;
}
h3 .silver {
color: silver;
}
h3 .gold {
color: gold;
}
/* Showcase */
#showcase {
min-height: 400px;
color: black;
}
#showcase h1 {
margin-top: 50px;
font-size: 300%;
margin-bottom: 10px;
}
#showcase p {
font-size: 120%;
}
/* Newsletter */
#newsletter {
padding: 15px;
color: #ffffff;
background: #35424a
}
#newsletter h1 {
float: left;
}
#newsletter form {
float: right;
margin-top: 15px;
}
#newsletter input[type="email"] {
padding: 4px;
height: 26px;
width: 250px;
}
/* Sidebar */
aside#sidebar {
float: right;
margin-top: 10px;
}
aside#sidebar .quote input,
aside#sidebar .quote textarea {
top-margin: 10px;
width: 80%;
padding: 10px;
}
/* Main-col */
article#main-col {
float: left;
width: 65%;
}
/* Imagery */
#social {
margin-top: 10%;
text-align: center;
font-size: 150%;
color: black;
}
#imagery {
margin-top: 5%;
margin-bottom: 5%;
}
#imagery .box {
float: right;
text-align: center;
width: 30%;
padding: 10px;
}
#imagery .box i {
font-size: 700%;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
.column img {
margin-top: 12px;
width: 100%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Services */
ul#services li {
list-style: none;
padding: 20px;
border: #cccccc solid 1px;
margin-bottom: 5px;
background: #35424a;
color: white;
}
footer {
padding: 20px;
margin-top: 20px;
color: black;
background-color: gold;
text-align: center;
}
/* Media Queries */
#media(max-width: 768px) {
header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
text-align: center;
width: 100%;
}
header {
padding-bottom: 20px;
}
#imagery {
font-size: 50%;
float: none;
}
#showcase h1 {
margin-top: 40px;
}
#newsletter button,
.quote button {
display: block;
width: 100%;
}
#newsletter form input[type="email"],
.quote input,
.quote textarea {
width: 100%;
margin-bottom: 5px;
}
/* nav */
ul.topnav li {
display: none;
}
ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
/* 'un' float the list items so they return to displaying vertically */
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/*css reset
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-image: url("bg.jpg");
background-size: cover; /*this seems better*/
/*background-size: contain;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end reset */
<head>
<title>DB Plumbing | Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://use.fontawesome.com/3a2264e344.js"></script>
<script src="html8shiv.js"></script>
<link rel="shortcut icon" type="image/png" href="wrench.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="desciption" content="Darran Brady Plumbing">
<meta name="keywords" content="Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
<meta name="author" content="DB, Darran, Brady, Darran Brady">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<div class="icon">
☰
</div>
<ul class="topnav" id="myTopnav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Coverage</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Local Award Winning Trader</h1>
<h2>Call Darren | <i class="fa fa-phone" aria-hidden="true"></i> 07756848657</h2>
<p>DB Plumbing provides a full range of general plumbing and repair services, from installing your new bathroom suite to fixing that leaking tap or joint that has been annoying you for ages. </p>
<p>Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Weekly Blog</h1>
<form>
<input type="email" placeholder="Subscribe today...">
<button type="submit" class="subscribe">Subscribe</button>
</form>
</div>
</section>
<section id="imagery">
<div class="container">
<div class="box">
<i class="fa fa-star" aria-hidden="true"></i>
<h1>Accredited</h1>
<p>Gas Safe Accreditted </p>
</div>
<div class="box">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
<h1>Reputable</h1>
<p>"25 years service experience "</p>
</div>
<div class="box">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<h1>Local</h1>
<p>Sussex and Surrey Countywide</p>
</div>
</div>
</section>
<footer>
<div>
<p>Darren Brady Plumbing Copyright © 2017</p>
</div>
</footer>
</body>
I've taken only the part we are interested into on code so it's a little more readable and here's my sugegstion. Using the display: flex property will help put the elements on the same line:
body {
font: 100%/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
}
.container {
width: 60%;
margin: auto;
overflow: hidden;
/*Below is the simple fix*/
display: flex;
align-items: baseline;
}
#branding {
display: inline-block;
background: red; /*Only for readability purpose*/
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
a {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
text-decoration: none;
font-size: 130%;
background: teal; /*Only for readability purpose*/
}
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav">
<li class="icon">
☰
</li>
</ul>
</nav>
</div>
See A complete guide to flexbox on CSS Tricks for more insights.
Hope I got it right :)
I have 3 footer areas in a fluid grid website I'm designing. There is a top copyright footer above the two left and right floated footers (I'm calling them widgets even though they aren't). The layout looks fine in desktop, but I'd like the widget footers to both align left and stack as blocks below each other in mobile view. They almost do it - but the footer that I have floated right won't align left in mobile.
I've inserted the css as an inline style into the html code below:
<style>
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
#page {
margin: 40px auto;
padding: 0 1em;
max-width: 61.75em; /* 988px / 16px = 61.75em */
}
h1 {
font-family: 'EB Garamond', serif;
font-size: 1.55em;
letter-spacing: .18em;
font-style:normal;
text-transform:uppercase;
}
h2 {
font-family: 'EB Garamond', serif;
font-size: 1.55em;
letter-spacing: .11em;
font-style:normal;
text-transform:capitalize;
}
h4 {
font-family: 'EB Garamond', serif;
font-size: 1.2em;
letter-spacing: .08em;
font-style: normal;
color: #73624d;
margin-top: -5px;
}
#mainNav {
position: relative;
width: 100%;
margin: 40px auto;
background-color: #fff;
font-family:"Century Gothic", "HelveticaNeueLT Pro 45 Lt", sans-serif;
font-size:16px;
text-transform: uppercase;
float:right;
z-index: 1000;
}
#mainNav ul {
text-align:center;
}
#mainNav li {
list-style: none;
float: left;
width: 140px;
height: 30px;
line-height: 30px;
text-align: left;
}
#mainNav li a {
color: #73624d;
text-decoration: none;
display: block;
}
#mainNav li a:hover {
background-color: #d9e2e7;
text-align: left;
}
#mainNav li ul {
position: absolute;
display: none;
}
#mainNav li:hover ul {
display: block;
}
#mainNav li ul li {
float: none;
display: inline;
}
#mainNav li ul li a {
width: 190px;
position: relative;
padding: 0 0 0 4px;
border-left: 1px solid #2c2216;
border-right: 1px solid #2c2216;
border-bottom: 1px solid #2c2216;
background: #73624d;
color: #fff;
}
#mainNav li ul li a:hover {
background: #d9e2e7;
color: #000;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 96.6666%;
padding-left: 1.6666%;
padding-right: 1.6666%;
clear: none;
float: none;
}
#div1 {
}
.logo {
text-align: center;
}
#mainContent {
}
#slider {
}
#footerCopy {
text-align:center;
font-family: 'EB Garamond', serif;
font-size: 15px;
letter-spacing: .04em;
margin: 10px auto;
}
#widget {
text-align: center;
}
#widget p{
font-size: 13px;
}
#footer1 {
margin: 5px 25px;
display:block;
float:left;
}
#footer2 {
margin: 5px 25px;
display: block;
float: right;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 98.6111%;
padding-left: 0.6944%;
padding-right: 0.6944%;
clear: none;
float: none;
margin-left: auto;
}
#div1 {
}
.logo {
}
#mainContent {
}
.dmxNivoSlider {
clear:both;
}
#widget {
text-align: left;
}
#footer1 {
margin: 5px 25px;
display:block;
float:left;
}
#footer2 {
margin: 5px 25px;
display: block;
float: left;
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
</style>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">
<header class="fluid logo"><img src="_images/CGDA_Logo.png" alt="Collins Group Design Logo"/></header>
</div>
<div id="page">
<nav class="mainNav" id="mainNav">
<ul>
<li>Home</li>
<li>About
<ul>
<li>Our Approach</li>
<li>Our Team</li>
<li>Accolades</li>
<li>Awards | Publications</li>
</ul>
</li>
<li>Design
<ul>
<li>Process</li>
<li>Value | Expectations</li>
<li>FAQ</li>
<li>Fee Structure</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>Kitchen | Bath</li>
<li>Living | Dining</li>
<li>Bedrooms | Hobby Rooms</li>
<li>Entry | Halls</li>
<li>Bespoke Furniture</li>
</ul>
</li>
<li>Bespoke</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
<article id="mainContent" class="fluid">
<div id="slider1" class="dmxNivoSlider slider-wrapper theme-basic" style="">
<div class="nivoSlider"><img id="img_UC_Slide2" src="_images/UC-Slide2.jpg" alt="" data-thumb="_images/thumbs/UC-Slide2.jpg" />
<img id="img_UC_Slide3" src="_images/UC-Slide3.jpg" alt="" data-thumb="_images/thumbs/UC-Slide3.jpg" />
<img id="img_UC_Slide4" src="_images/UC-Slide4.jpg" alt="" data-thumb="_images/thumbs/UC-Slide4.jpg" />
<img id="img_UC_Slide5" src="_images/UC-Slide5.jpg" alt="" data-thumb="_images/thumbs/UC-Slide5.jpg" />
</div>
</div>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(
function()
{
jQuery("#slider1").dmxNivoSlider(
{"pauseTime": 4000, "dataSource": ""}
);
}
);
// ]]>
</script>
</article>
<footer class="fluid">
<div id="footerCopy">
© 2014 Collins Group Design, Inc. All rights reserved.
</div>
<hr>
<div id="widget">
<div id="footer1">
<h4> Contact Us:</h4>
<p>☎ 206.919.5474</p>
<p>✉ Collins Group Design</p>
</div>
<div id="footer2">
<h4>Stay In Touch:</h4>
<img src="_images/icons/Facebook.png" alt="Visit Collins Group Design on Facebook"/>
<img src="_images/icons/LinkedIn.png" alt="Visit Collins Group Design on LinkedIn"/>
<img src="_images/icons/Pinterest.png" alt="Visit Collins Group Design on Pinterest"/>
<img src="_images/icons/Twitter.png" alt="Visit Collins Group Design on Twitter"/>
</div>
</div>
</footer>
Set #footer1 and #footer2 as float: none for mobiles. Only float them for the wider views.
#footer1, #footer2 {
margin: 5px 25px;
display: block;
float: none; /* <- or don't even declare this as it's float none by default */
}
#media only screen and (min-width: 481px) {
#footer1, #footer2 {
float:left;
}
/* ...etc... */
}
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
h4 {
font-family:'EB Garamond', serif;
font-size: 1.2em;
letter-spacing: .08em;
font-style: normal;
color: #73624d;
margin-top: -5px;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 96.6666%;
padding-left: 1.6666%;
padding-right: 1.6666%;
clear: none;
float: none;
}
#div1 {
}
.logo {
text-align: center;
}
#mainContent {
}
#slider {
}
#footerCopy {
text-align:center;
font-family:'EB Garamond', serif;
font-size: 15px;
letter-spacing: .04em;
margin: 10px auto;
}
#widget {
text-align: center;
}
#widget p {
font-size: 13px;
}
#footer1 {
margin: 5px 25px;
display:block;
float:none;
}
#footer2 {
margin: 5px 25px;
display: block;
float: none;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 98.6111%;
padding-left: 0.6944%;
padding-right: 0.6944%;
clear: none;
float: none;
margin-left: auto;
}
#div1 {
}
.logo {
}
#mainContent {
}
.dmxNivoSlider {
clear:both;
}
#widget {
text-align: left;
}
#footer1 {
margin: 5px 25px;
display:block;
float:left;
}
#footer2 {
margin: 5px 25px;
display: block;
float: left;
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
<footer class="fluid">
<div id="footerCopy">© 2014 Collins Group Design, Inc. All rights reserved.</div>
<hr>
<div id="widget">
<div id="footer1">
<h4> Contact Us:</h4>
<p>☎ 206.919.5474
</p>
<p>✉ Collins Group Design
</p>
</div>
<div id="footer2">
<h4>Stay In Touch:</h4>
<img src="_images/icons/Facebook.png" alt="Visit Collins Group Design on Facebook" />
<img src="_images/icons/LinkedIn.png" alt="Visit Collins Group Design on LinkedIn" />
<img src="_images/icons/Pinterest.png" alt="Visit Collins Group Design on Pinterest" />
<img src="_images/icons/Twitter.png" alt="Visit Collins Group Design on Twitter" />
</div>
</div>
you should float both footers left on mobile using your media queries
Update
To make them stack below each other also add display: block to them on mobile