everyone!! I am building a very simple page in codepen and I am pretty new to these stuff. I want to align all the options on my navigation bar in the same row. I don't even know why they looked like this in the first place. I want to do the same for the social media icons at the end of the page, too. Here's my pen https://codepen.io/maria_punchio/pen/mWggYO/.
.topnav {
background-color: #586882;
overflow: hidden;}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: px 16px;
text-decoration: none;
font-size: 17px;}
<div class="container-fluid">
<div class="topnav">
ABOUT
PORTFOLIO
CONTACT ME
</div>
Thanks
Is this what you're looking for?
.topnav {
background-color: #586882;
overflow: hidden;}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 16px 16px;
text-decoration: none;
font-size: 17px;}
<div class="container-fluid">
<div class="topnav">
ABOUT
PORTFOLIO
CONTACT ME
</div>
</div>
.topnav {
background-color: #586882;
overflow: hidden;}
.topnav a {
float: left;
display:block; margin-left: 5px;;
color: #f2f2f2;
text-align: center;
padding:16px;
text-decoration: none;
font-size: 17px;}
<div class="container-fluid">
<div class="topnav">
ABOUT
PORTFOLIO
CONTACT ME
</div>
here is code...
<style>.topnav {
background-color: #586882;
overflow: hidden;}
.topnav a {
float: left;
display:block; margin-left: 5px;;
color: #f2f2f2;
text-align: center;
padding:16px;
text-decoration: none;
font-size: 17px;}</style>
THIS IS OUTPUT PICTURE CLICK ON IT
A quick fix is to add
width: 33%;
margin: 0;
to .topnav a in your css.
But I would advise you to take a look at how flexbox works as this will be more responsive.
I personally really like this guide.
Change this:
a {
overflow: hidden;
display: inline-block;
margin-bottom: px;
width: calc(50% - 4px);
margin-right: 8px;
}
To this:
a {
overflow: hidden;
display: inline-block;
margin-bottom: px;
width: calc(33% - 4px);
margin-right: 8px;
}
And change this:
#media screen and (min-width: 80em) {
a {
width: calc(40% - 6px);
}
a:nth-of-type(2n) {
margin-right: 8px;
}
a:nth-of-type(4n) {
margin-right: 0;
}
}
to this:
#media screen and (min-width: 80em) {
a {
width: calc(33% - 6px);
}
a:nth-of-type(2n) {
margin-right: 8px;
}
a:nth-of-type(4n) {
margin-right: 0;
}
}
HTML
<body style="background-color:#d1ffe3">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Heebo" rel="stylesheet">
<div class="container-fluid">
<ul class="topnav">
<li style="width:100%">ABOUT</li>
<li style="width:100%">PORTFOLIO</li>
<li style="width:90%">CONTACT ME</li>
</ul>
<center>
<div id="div_id">
<h1>ABOUT</h1></center>
</div>
<div class="row">
<div class="col-md-6">
<center>
<h2>Hello, I am Maria Pantsiou</h2>
<h1>Former musician, 3D graphics design hobbyist, physicist and potential web developer.<h1>
</center></div>
</div>
</div>
<div id="div_id2"><center><h1>PORTFOLIO</h1></center>
</div>
<center>
<div>
<a href="http://i.imgsafe.org/56bfd0da30.png">
<figure>
<img src="http://i.imgsafe.org/56bfd0da30.png" alt="">
</figure>
</a>
<a href="http://i.imgsafe.org/56be3db222.png">
<figure>
<img src="http://i.imgsafe.org/56be3db222.png" alt="">
</figure>
</a>
<a href="http://i.imgsafe.org/5649eb799c.png">
<figure>
<img src="http://i.imgsafe.org/5649eb799c.png" alt="">
</figure>
</a>
<a href="http://i.imgsafe.org/56ae6b85ac.png">
<figure>
<img src="http://i.imgsafe.org/56ae6b85ac.png" alt="">
</figure>
</a>
</center>
<section id="contact">
<div id="div_id3">
<center>
<h1>CONTACT ME</h1></center>
</div>
<section id="contact">
<center>
<div class="container">
<form name="htmlform" method="post" action="toyousender.php">
<input type="text" name="first_name" placeholder="NAME" required>
<input type="email" name="email" placeholder="MAIL" required>
<textarea name="comments" placeholder="MESSAGE" required></textarea>
<button name="send" type="submit" class="submit">SEND</button>
</form>
</div>
</center>
</section>
</div>
CSS
body { background-image: url('http://i.imgsafe.org/7d2cbd7925.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } .topnav {
background-color: #586882;
overflow: hidden; width:100%; display:inline-flex;
}
/* Style the links inside the navigation bar */ .topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: px 16px;
text-decoration: none;
font-size: 17px; }
/* Change the color of links on hover */ .topnav a:hover {
background-color: #ddd;
color: black; }
/* Add a color to the active/current link */ .topnav a.active {
background-color: #4CAF50;
color: white; }
h1 { font-size: 30px; font-family: 'Josefin Sans', sans-serif;
}
h2 { font-size: 25px; font-family: 'Heebo', sans-serif; }
.photo-border { border-radius: 50%; }
.smaller_image { width: 170px; }
body { width: 90%; margin: 30px auto; font-family: sans-serif; }
div { font-size: 0; }
a { overflow: hidden; display: inline-block; margin-bottom: px; width: calc(50% - 4px); margin-right: 8px; }
a:nth-of-type(2n) { margin-right: 0; }
#media screen and (min-width: 80em) { a {
width: calc(40% - 6px); } a:nth-of-type(2n) {
margin-right: 8px; } a:nth-of-type(4n) {
margin-right: 0; } }
a:hover img { transform: scale(1.15); }
figure { margin: 5; }
img { border: none; max-width: 100%; height: ; display: block; background: #ccc; transition: transform .2s ease-in-out; }
#contact { width: 100%; height: 100%; margin 0 auto; background: ; }
.container { width: 960px; height: auto; margin: 0 auto; padding: 50px 0; }
#contact .container form input,
#contact .container form textarea { width: 97.4%; height: 30px; padding: 5px 10px; font-size: 12px; color: #999; letter-spacing: 1px; background: #cbd9ef; border: 2px solid #586882; margin-bottom: 5px; -webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
#contact .container form input:focus,
#contact .container form textarea:focus { border: 2px solid #3b4759; color: #999; }
#contact .container form textarea { height: 150px; }
#contact .container form .submit { width: 97.5%; padding: 5px 10px; font-size: 12px; letter-spacing: 1px; background: #586882; height: 40px; text-transform: uppercase; letter-spacing: 1px; color: #FFF; border: 2px solid #3b4759; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
#contact .container form .submit:hover { color: #FFF; border: 2px solid #586882; background: #343f4f; cursor: pointer; }
#contact .container form .required { color: #586882; }
.fb_photo { border-radius: 70%; }
.smaller-image { width: 30px; }
Related
So I have my personal website and I have paragraphs within it. When viewed on a large screen it looks fine however on a phone it is in a single column and I would like to fix that. I have a screen shot with what I mean and a code pen with the code. I have tried using #media screen and (mad-width:) however it does not help.
#media only screen and (max-width: 500px) {
.masthead {
padding: 3em 0;
}
#media screen and (max-width: 600px) {
.column-left {
display: none;
}
}
#media screen and (max-width: 1800px) {
.button {
display: none;
}
}
.masthead-heading {
font-size: 3em;
}
.content-footer {
padding: 2em 2.5em;
}
}
.about,
.about-content,
.skills,
.skills-content,
.title::after,
.text {
color: white;
}
.navbar {
background-color: #ac5fdb;
color-scheme: 100%;
}
.content-footer {
padding: 2px 0;
text-align: center;
background-color: #ac5fdb;
color-scheme: 100%;
text-decoration: none;
max-height: 2000px;
}
.footer-text {
padding-bottom: 70px;
}
.content-footer>p {
color: grey;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
html {
scroll-behavior: smooth;
background-color: #1e2029;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* all similar content styling codes */
section {
padding: 100px 0;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
.about,
.services,
.skills,
.teams,
.contact,
footer {
font-family: "Poppins", sans-serif;
}
.about .about-content,
.services .serv-content,
.skills .skills-content,
.contact .contact-content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
section .title {
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 60px;
padding-bottom: 20px;
font-family: "Ubuntu", sans-serif;
}
section .title::before {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: #1e2029;
transform: translateX(-50%);
}
section .title::after {
position: absolute;
bottom: -8px;
left: 50%;
font-size: 20px;
color: #ac5fdb;
padding: 0 5px;
background: #1e2029;
transform: translateX(-50%);
}
/* navbar styling */
.nav-link {
color: #fff;
}
.navbar {
position: fixed;
width: 100%;
z-index: 999;
padding: 30px 0;
font-family: "Ubuntu", sans-serif;
transition: all 0.3s ease;
}
.navbar.sticky {
padding: 15px 0;
background: #ac5fdb;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .logo a span {
color: #ac5fdb;
transition: all 0.3s ease;
}
.navbar.sticky .logo a span {
color: #fff;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
display: block;
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #ac5fdb;
}
.navbar.sticky .menu li a:hover {
color: #ffff;
}
/* menu btn styling */
.menu-btn {
color: #fff;
font-size: 23px;
cursor: pointer;
display: none;
}
.scroll-up-btn {
position: fixed;
height: 45px;
width: 42px;
background: #ac5fdb;
right: 30px;
bottom: 10px;
text-align: center;
line-height: 45px;
color: #fff;
z-index: 9999;
font-size: 30px;
border-radius: 6px;
border-bottom-width: 2px;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.scroll-up-btn.show {
bottom: 30px;
opacity: 1;
pointer-events: auto;
}
.scroll-up-btn:hover {
filter: brightness(90%);
}
/* home section styling */
.home {
display: flex;
background: url("/Files/banner.jpg");
height: 90vh;
color: #fff;
min-height: 90vh;
background-size: cover;
background-attachment: fixed;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
width: 100%;
display: flex;
}
.home .max-width .row {
margin-right: 0;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: #ac5fdb;
font-weight: 500;
}
.home .home-content a {
display: inline-block;
background: #ac5fdb;
color: #fff;
font-size: 25px;
padding: 12px 36px;
margin-top: 20px;
font-weight: 400;
border-radius: 6px;
border: 2px solid #ac5fdb;
transition: all 0.3s ease;
}
.home .home-content a:hover {
color: #ac5fdb;
background: none;
}
/* about section styling */
.about .title::after {
content: "who I am";
}
.about .about-content .left {
width: 45%;
}
.about .about-content .column-left img {
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 6px;
}
.about .about-content .right {
width: 55%;
}
.about .about-content .right .text {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
}
.about .about-content .right .text span {
color: #ac5fdb;
}
.about .about-content .right p {
text-align: justify;
}
.about .about-content .right a {
display: inline-block;
background: #ac5fdb;
color: #fff;
font-size: 20px;
font-weight: 500;
padding: 10px 30px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid #ac5fdb;
transition: all 0.3s ease;
}
.about .about-content .right a:hover {
color: #ac5fdb;
background: none;
}
/* skills section styling */
.skills .title::after {
content: "what i know";
}
.skills .skills-content .column {
width: calc(50% - 30px);
}
.skills .skills-content .left .text {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.skills .skills-content .left p {
text-align: justify;
}
.skills .skills-content .left a {
display: inline-block;
background: #ac5fdb;
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 8px 16px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid #ac5fdb;
transition: all 0.3s ease;
}
.skills .skills-content .left a:hover {
color: #ac5fdb;
background: none;
}
.skills .skills-content .right .bars {
margin-bottom: 15px;
}
.skills .skills-content .right .info {
display: flex;
margin-bottom: 5px;
align-items: center;
justify-content: space-between;
}
.skills .skills-content .right span {
font-weight: 500;
font-size: 18px;
}
.skills .skills-content .right .line {
height: 5px;
width: 100%;
background: lightgrey;
position: relative;
}
.skills .skills-content .right .line::before {
content: "";
position: absolute;
height: 100%;
left: 0;
top: 0;
background: #ac5fdb;
}
.skills-content .right .html::before {
width: 100%;
}
.skills-content .right .css::before {
width: 90%;
}
.skills-content .right .js::before {
width: 75%;
}
.skills-content .right .php::before {
width: 70%;
}
.skills-content .right .mysql::before {
width: 50%;
}
/* services section styling */
.contact {
background-color: #1e2029;
}
.title,
.head,
.text {
color: #fff;
}
.services,
.teams {
color: #fff;
background-color: #1e2029;
}
.services .title::before,
.teams .title::before {
background-color: #1e2029;
color: #ffff;
}
.services .title::after,
.teams .title::after {
background: #111;
content: "what I've made";
}
.services .serv-content .card {
width: calc(33% - 20px);
background: #222;
text-align: center;
border-radius: 6px;
padding: 50px 25px;
cursor: pointer;
transition: all 0.3s ease;
}
.services .serv-content .card:hover {
background: #ac5fdb;
}
.services .serv-content .card .box {
transition: all 0.3s ease;
}
.services .serv-content .card:hover .box {
transform: scale(1.05);
}
.services .serv-content .card i {
font-size: 50px;
color: #ac5fdb;
transition: color 0.3s ease;
}
.services .serv-content .card:hover i {
color: #fff;
}
.services .serv-content .card .text {
font-size: 25px;
font-weight: 500;
margin: 10px 0 7px 0;
}
/* contact section styling */
.contact .title::after {
content: "get in touch";
}
.contact .contact-content .column {
width: calc(50% - 30px);
}
.contact .contact-content .text {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.contact .contact-content .left p {
text-align: justify;
}
.contact .contact-content .left .icons {
margin: 10px 0;
}
.contact .contact-content .row {
display: flex;
height: 15px;
align-items: center;
}
.contact .contact-content .row .info {
margin-left: 30px;
background-color: #1e2029;
}
.contact .contact-content .row i {
font-size: 25px;
color: #ac5fdb;
}
.contact .contact-content .info .head {
font-weight: 500;
}
.contact .contact-content .info .sub-title {
color: #fff;
background-color: #1e2029;
}
.contact .right form .fields {
display: flex;
background-color: #1e2029;
}
.contact .right form .field,
.contact .right form .fields .field {
height: 45px;
width: 100%;
margin-bottom: 15px;
background-color: #1e2029;
}
.contact .right form .textarea {
height: 80px;
width: 100%;
background-color: #1e2029;
}
.contact .right form .name {
margin-right: 10px;
background-color: #1e2029;
}
.contact .right form .field input,
.contact .right form .textarea textarea {
height: 70%;
width: 100%;
border: 1px solid lightgrey;
border-radius: 6px;
outline: none;
padding: 0 15px;
font-size: 17px;
font-family: "Poppins", sans-serif;
transition: all 0.3s ease;
background-color: #1e2029;
}
.contact .right form .field input:focus,
.contact .right form .textarea textarea:focus {
border-color: #b3b3b3;
background-color: #1e2029;
}
.contact .right form .textarea textarea {
padding-top: 10px;
resize: none;
background-color: #1e2029;
}
.contact .right form .button-area {
display: flex;
align-items: center;
background-color: #1e2029;
}
.right form .button-area button {
color: #fff;
display: block;
width: 160px !important;
height: 45px;
outline: none;
font-size: 18px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
flex-wrap: nowrap;
background: #ac5fdb;
border: 2px solid #ac5fdb;
transition: all 0.3s ease;
}
.right form .button-area button:hover {
color: #ac5fdb;
background: none;
}
.fa-twitter,
.fa-github,
.fa-linkedin {
color: white;
}
.navbar-toggler-icon {
color: #ac5fdb;
}
.about,
.skills {
background-color: #1e2029;
}
#media (max-width: 991px) {
.services .max-width {
padding: 0;
}
.services .serv-content,
.services .serv-content .card {
width: 100%;
}
}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://kit.fontawesome.com/3263ba6030.js" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/3263ba6030.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Edward Wynman</title>
<link rel="icon" type="image/x-icon" href="Files/PFP.jpg">
</head>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Edward Wynman</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="courses.html">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
<li class="nav-item">
<a class="nav-link" href="/Files/Resume.pdf">Resume</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<body>
<section class="home">
<div class="jumbotron text-center">
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Edward Wynman</div>
<div class="text-3">And I'm a <span class="typing">
<script>
$(document).ready(function () {
// typing text animation script
var typed = new Typed(".typing", {
strings: ["Student", "Developer", "Engineer"],
typeSpeed: 100,
backSpeed: 60,
loop: true
});
var typed = new Typed(".typing-2", {
strings: ["Student", "Developer", "Engineer"],
typeSpeed: 100,
backSpeed: 60,
loop: true
});
});
</script>
</span></div>
Email Me!
</div>
</div>
</section>
</section>
<section class="about" id="about">
<div class="max-width">
<h2 class="title">About me</h2>
<div class="about-content">
<div class="column-left" id="pic">
<img src="/Files/PFP.jpg" alt="">
</div>
<div class="column right">
<div class="text">I'm Eddie and I'm a <span class="typing-2"></span></div>
<p>At the age of <strong>thirteen</strong> I started programming and have taught myself a thing or two since then. Topics that interest me are <strong>web development,
UX Design , and Software Engineering </strong>Now, I'm a Computer Science student at
<strong> Montclair State University </strong>. I am currently seeking 2023 Summer internship opportunities in Software Engineering and Web Development. I am also pursuing a minor in <strong>Data Science</strong> This website showcases some
of <strong>my
abilities and skills.</strong>
</p>
Download Resume
Read More
</div>
</div>
</div>
</section>
<section class="skills" id="skills">
<div class="max-width">
<h2 class="title">My skills</h2>
<div class="skills-content">
<div class="column left">
<div class="text">My Skills</div>
<p>Over the years I have taken a lot from the classes I have taken and they have led me to a specfic set of skills. I am proficcient in Java, Python, C, JavaScript, HTML, CSS, PHP, Adobe Creative Suite Apps, and I am proficcient in MS Office products
as well.
</p>
Read more
</div>
<div class="column right">
<div class="bars">
<div class="info">
<span>Java</span>
<span>100%</span>
</div>
<div class="line html"></div>
</div>
<div class="bars">
<div class="info">
<span>Python</span>
<span>90%</span>
</div>
<div class="line css"></div>
</div>
<div class="bars">
<div class="info">
<span>JavaScript</span>
<span>80%</span>
</div>
<div class="line js"></div>
</div>
<div class="bars">
<div class="info">
<span>HTML | CSS </span>
<span>70%</span>
</div>
<div class="line php"></div>
</div>
<div class="bars">
<div class="info">
<span>PHP</span>
<span>50%</span>
</div>
<div class="line mysql"></div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="content-footer">
<section class="footer-text">
<strong>Say hi to me on these social networks:</strong>
</section>
<ul class="social">
<i class="fab fa-twitter fa-2x mr-3"></i>
<i class="fab fa-github fa-2x mr-3"></i>
<a href="https://www.linkedin.com/in/edward-wynman/" target="_blank"><i
class="fab fa-linkedin fa-2x mr-3"></i></a>
</ul>
</footer>
</body>
You need to remove the width: 50%; on .about .about-content .right using a media query. The reason it's rendering like that is that it's using 50% of the available space on mobile, which is not much.
Could look something like this:
#media only screen and (max-width: 800px) {
.about .about-content .right {
width: 100%;
}
}
Here you go...
Add the following:
#media only screen and (max-width: 768px) {
.about .about-content .right {
width: 100% !important;
}
}
Hey in your codepen you made a mistake. The max-width needs to go from wider screens to smaller ones and not the oposite way, because, as the lower value in the page will always overwrite the further up ones, your media queries will never be met.
Put the max-width media queries at the end of the css or at least after the element you want to have a different style on smaller screens.
Then start with the highest number (max-width="1800px") and end with the lowest one (max-width="500px").
so:
//default (bigger than 993px)
.class {
font-size: 10px;
}
//992px and smaller
#media screen and (max-width:992px){
.class {
font-size: 20px;
}
}
//767px and smaller
#media screen and (max-width:767px){
.class {
font-size: 24px;
}
}
//600px and smaller
#media screen and (max-width:600px){
.class {
font-size: 32px;
}
}
Just like Cervus and Kameron have pointed out
.about .about-content .right {width: 100%}
is your main fix, then the next issue is the padding left and right on your max-width class because of
box-sizing: border-box
it will render 100% and then remove 80px of space on either side. If viewed on a small device it will be removing to much of the available space for example on 320px wide screen half the available space would be removed.
.max-width {padding: 0 80px}
Might be better being
.max-width {padding: 0 20px}
And then at a larger media query it can update to 80px when it fits.
I provided my CSS and HTML down below. I am trying to finish off my dropdown, but there's an issue with it that makes the transition not so smooth. It's hard to explain with words on what it's doing.
I have tried changing the display, max-height, padding, and margin but there have been no results. Perhaps I need to add some JavaScript to it rather than CSS? Any suggestions or problems that can be pointed out will be great.
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #FFF;
margin-bottom: 210px;
border-radius: 5px;
}
#nav-container {
display: table;
margin: 10px auto;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
margin-top: -26px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
/* nav-dropdown */
#dropdown {
display: block;
position: absolute;
text-align: center;
width: 300px;
height: 50px;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
display: table-cell;
margin: 0;
cursor: pointer;
background-color: transparent;
text-align: center;
}
#extensions {
display: table;
border-collapse: separate;
border-spacing: 40px;
height: 50px;
width: 350px;
}
.label {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
text-align: center;
position: absolute;
width: 300px;
}
#dropdown-content {
position: absolute;
margin: 0 auto;
opacity: 0;
width: 300px;
height: 50px;
background-color: #C9C9C9;
border-radius: 8px;
box-shadow: 1px 1px 50px 0px white;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.nav-dropdown-container {width: 350px;height: 800px;}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown-content:hover {
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
margin-top: 50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
#dropdown-content:hover p {
display: block;
text-decoration: none;
transition: 0.5s;
}
#dropdown-content p {display: none;}
#dropdown-link {color: white;}
#dropdown-link:link {
color: white;
text-decoration: none;
}
#dropdown-link:hover {
color: lightgrey;
}
<nav id="navigation">
<div id="nav-container">
<ul id="nav-items">
<li>
<div id="extensions">
<div class="nav-dropdown-container">
<div id="dropdown">
<p class="label">TEST</p>
<div id="dropdown-content">
<p><a id="dropdown-link" href="hello.html">HELLO</a></p>
<p><a id="dropdown-link" href="world.html">WORLD</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
As stated in the comments, the reason is because when the :hover state is triggered on #dropdown-content, the mouse cursor quickly enters and leaves the element causing the state to be quickly toggled on and off repeatedly, resulting in a janky transition.
The fastest fix is this: you should change your selectors so that you bind the :hover state to the nearest common ancestor of both the label AND the dropdown content, i.e. #dropdown.
So you should change this:
#dropdown-content:hover { ... }
#dropdown-content:hover p { ... }
...to this:
#dropdown:hover #dropdown-content { ... }
#dropdown:hover #dropdown-content p { ... }
This is of course a stop-gap solution since I find your markup unnecessarily bloated in order to achieve a simple dropdown effect.
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #FFF;
margin-bottom: 210px;
border-radius: 5px;
}
#nav-container {
display: table;
margin: 10px auto;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
margin-top: -26px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
/* nav-dropdown */
#dropdown {
display: block;
position: absolute;
text-align: center;
width: 300px;
height: 50px;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
display: table-cell;
margin: 0;
cursor: pointer;
background-color: transparent;
text-align: center;
}
#extensions {
display: table;
border-collapse: separate;
border-spacing: 40px;
height: 50px;
width: 350px;
}
.label {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
text-align: center;
position: absolute;
width: 300px;
}
#dropdown-content {
position: absolute;
margin: 0 auto;
opacity: 0;
width: 300px;
height: 50px;
background-color: #C9C9C9;
border-radius: 8px;
box-shadow: 1px 1px 50px 0px white;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.nav-dropdown-container {
width: 350px;
height: 800px;
}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown:hover #dropdown-content {
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
margin-top: 50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
#dropdown:hover #dropdown-content p {
display: block;
text-decoration: none;
transition: 0.5s;
}
#dropdown-content p {
display: none;
}
#dropdown-link {
color: white;
}
#dropdown-link:link {
color: white;
text-decoration: none;
}
#dropdown-link:hover {
color: lightgrey;
}
<nav id="navigation">
<div id="nav-container">
<ul id="nav-items">
<li>
<div id="extensions">
<div class="nav-dropdown-container">
<div id="dropdown">
<p class="label">TEST</p>
<div id="dropdown-content">
<p><a id="dropdown-link" href="hello.html">HELLO</a></p>
<p><a id="dropdown-link" href="world.html">WORLD</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
I am trying to keep the the form elements in one line and as to keep it exactly like this way for all type of resolutions i.e to keep it responsive in the same state but whenever I try to minimize the screen resolution so the form contents get messed up and the Search button goes to the second line as I do not want it to be like that..I simply want it to be in the same state i.e the Search button to stay along next to the input even when the window is minimized so how easily that would be achievable??? As I do know that it can be achieved with the use of CSS Media Queries..!
Here is the GIF :
LIVE PAGE LINK : http://huntedhunter.com/extratorrent/
Here is Code :
HTML :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="padding: 7%;margin-top: 100px;">
<h1>E<span>XTRATORRENT</span> A<span>UTOMATIC</span> D<span>OWNLOADER</span></h1>
<form>
<input class="icon" name="search" placeholder="Search Torrent Name" type="text"> <input class="btn btn-secondary" name="search" type="submit" value="Search">
</form>
</div>
<footer class="footer">
<p>Copyrighted By <strong>Hunted Hunter Solutions</strong>.A Script By <strong>Umair Shah Yousafzai</strong></p>
</footer>
</body>
</html>
CSS :
input[type=text].icon {
width: 89%;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url(searchicon.png);
background-position: 10px 13px;
background-repeat: no-repeat;
padding-left: 42px;
}
h1 {
font-family: Arial;
opacity: 0.6;
text-align: center;
}
span {
font-size: 70%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #eee2e2;
margin-left: -0.5%;
}
body {
overflow-x: hidden;
}
p {
text-align: center;
font-family: Arial;
opacity: 0.7;
}
a {
text-decoration: none;
}
.btn-secondary:hover {
color: #292b2c;
background-color: #e6e6e6;
border-color: #adadad;
cursor: pointer;
}
.btn:focus, .btn:hover {
text-decoration: none;
}
[type=reset], [type=submit], button, html [type=button] {
-webkit-appearance: button;
}
.btn-secondary {
color: #292b2c;
background-color: #fff;
border-color: #adadad;
}
.btn {
border: 1px solid turquoise;
padding: 1.2% 1.5rem;
font-size: 1rem;
border-radius: .25rem;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
You could use a flex-box for this.
Add the .flex class to your <form> tag, along with the rules:
.flex {
display:flex;
flex-wrap:nowrap;
justify-content:center;
}
replace width: 89%; with flex-grow:4; on the input[type=text].icon selector,
Finally add flex-grow:1; and margin-left:5px; to the .btn selector
input[type=text].icon {
flex-grow: 4;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url(searchicon.png);
background-position: 10px 13px;
background-repeat: no-repeat;
padding-left: 42px;
}
h1 {
font-family: Arial;
opacity: 0.6;
text-align: center;
}
span {
font-size: 70%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #eee2e2;
margin-left: -0.5%;
}
body {
overflow-x: hidden;
}
p {
text-align: center;
font-family: Arial;
opacity: 0.7;
}
a {
text-decoration: none;
}
.btn-secondary:hover {
color: #292b2c;
background-color: #e6e6e6;
border-color: #adadad;
cursor: pointer;
}
.btn:focus,
.btn:hover {
text-decoration: none;
}
[type=reset],
[type=submit],
button,
html [type=button] {
-webkit-appearance: button;
}
.btn-secondary {
color: #292b2c;
background-color: #fff;
border-color: #adadad;
}
.btn {
flex-grow: 1;
margin-left: 5px;
border: 1px solid turquoise;
padding: 1.2% 1.5rem;
font-size: 1rem;
border-radius: .25rem;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.flex {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="padding: 7%;margin-top: 100px;">
<h1>E<span>XTRATORRENT</span> A<span>UTOMATIC</span> D<span>OWNLOADER</span></h1>
<form class="flex">
<input class="icon" name="search" placeholder="Search Torrent Name" type="text" /> <input class="btn btn-secondary" name="search" type="submit" value="Search" />
</form>
</div>
<footer class="footer">
<p>Provided without garanties by a <strong>Welldoer</strong>. A Script By <strong>Lars</strong></p>
</footer>
</body>
</html>
I have added my html code and also my CSS, I am very confused as to how I would go about making this webpage responsive, so when a user is on a different device the webpage auto scales to their device. (Sorry if this is a repeat question, I was not able to find the answer).
footer {
margin: 50px 0;
}
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}
h1 {
margin: .67em 0;
font-size: 2em;
font-family: 'Dosis', sans-serif;
}
body {
font-family: 'Dosis', sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
padding-right: 5px;
}
body {
max-width: 1000px;
margin: 10px auto;
}
body {
font-family: 'Dosis', sans-serif;
}
body {
background: white;
}
.container {
max-width: 100%;
text-align: center;
}
.centre {
position: relative;
display: inline-block;
float: left;
max-width: 100%;
padding: 50px;
}
ul {
max-width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
max-width: 100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.accordion {
width: 895px;
height: 485px;
max-width: 100%;
overflow: hidden;
box-shadow: 0 10px 6px -6px #111;
margin: 20px auto
}
.accordion ul {
width: 200%;
max-width: 100%;
}
.accordion li {
position: relative;
display: block;
width: 160px;
max-width: 100%;
float: left;
box-shadow: 0 0 30px 8px #222;
transition: all 0.4s ease .300ms;
}
.accordion ul:hover li {
width: 40px
}
.accordion ul li:hover {
width: 640px
}
.caption {
background: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
width: 640px
}
.caption a {
display: block;
color: #fff;
text-decoration: none;
font: normal 16px'Lato', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
padding: 10px;
}
.center {
align-content: center;
}
.thumbnail {
display: block;
padding: 4px;
padding-left: 5px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
margin-right: auto;
margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #337ab7;
}
.thumbnail .caption {
padding: 9px;
color: #333;
}
<body>
<nav class="contain">
<div>
<div>
<ul>
<li><a class="active" href="index.html">Home</a>
</li>
<li>Mens Shoes
</li>
<li>Womens Shoes
</li>
<li>Boys Shoes
</li>
<li>Girls Shoes
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div>
<div>
<div class="accordion">
<ul>
<li>
<div class="caption">Slide 1
</div>
<a href="#">
<img src='Slider_Image1.jpg' />
</a>
</li>
<li>
<div class="caption">Slide 2
</div>
<a href="#">
<img src='Slider_Image2.jpg' />
</a>
</li>
<li>
<div class="caption">Slide 3
</div>
<a href="#">
<img src='Slider_Image3.jpg' />
</a>
</li>
</ul>
</div>
</div>
<div>
<div class="centre , fade ,">
<div>
<a href="Nike_Shoes1.html">
<img src="Image1.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div>
<a href="Nike_Trainers.html">
<img src="Image2.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div>
<img src="Image3.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div>
<a href="boys_clothing.html">
<img src="Boys_Clothing.jpg" alt="Boys Clothing">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<!-- Footer -->
<footer>
</footer>
</div>
You make a page responsive by adding media queries to the css file, for example:
#media(max-width: 800px){
/* Add mobile styles here */
}
You can see more about media queries here, as there are many configs available: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
You can make a responsive webpage by using media queries , Flexible grid-based layout for relative sizing and Flexible images.
this book may help you Responsive Web Design by Ethan Marcotte
I am trying to show different tab content when clicking on a link using pure CSS by following this W3Schools tutorial. However, it is not working for me.
Again, it has to be pure CSS, no JavaScript!
Here's my code:
/* landscape-screen.css */
/*** General Settings ***/
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
/*Main Wrapper Styling*/
#main-wrapper {
min-width: 960px;
height: 100%;
}
/* Banner styling*/
.header {
width: 100%;
height: 10%;
background-color: #7a6868;
}
/* "Welcome" photo in the banner position */
#welcome {
margin-left: 30%;
}
/* General wrapper settings */
.inner-wrapper-settings {
width: 100%;
height: 100%;
}
/* Left navigation menu styling */
.aside {
width: 180px;
height: 100%;
background-color: #cd4409;
/*display: inline-block; */
/* So that Nav Bar will be next to its section */
text-align: center;
float: left;
}
/* Right main Section styling */
.section {
/*display: inline-block; */
/* So that the section will be next to Nav Bar */
width: calc(100% - 180px);
height: 100%;
background-color: #eec712;
float: right
}
/*Footer styling*/
.footer {
background-color: black;
width: 100%;
height: 80px;
clear: both;
color: white;
}
/*** Tooltip***/
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
.tooltip:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
/* sidebar-links.css */
ul {
padding: 0;
margin-top: 30px;
}
li {
margin-bottom: 30px;
padding: 0px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: #f0d248;
}
a:visited {
color: white;
}
/*form-responsive.css:*/
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
html {
/*background:url(http://thekitemap.com/images/feedback-img.jpg) no-repeat;*/
background-size: cover;
height: 100%;
}
#feedback-page {
text-align: center;
}
#form-main {
width: 100%;
float: left;
padding-top: 0px;
}
#form-div {
background-color: rgba(72, 72, 72, 0.4);
padding-left: 35px;
padding-right: 35px;
padding-top: 35px;
padding-bottom: 50px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-top: 30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color: #3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0, 0, 0, 0);
}
.feedback-input:focus {
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused {
color: #30aed6;
border: #30aed6 solid 3px;
}
/* Icons ---------------------------------- */
#name {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment {
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize: vertical;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
background-color: white;
}
#button-blue {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float: left;
width: 100%;
border: #fbfbfb solid 4px;
cursor: pointer;
background-color: #3498db;
color: white;
font-size: 24px;
padding-top: 22px;
padding-bottom: 22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top: -4px;
font-weight: 700;
}
#button-blue:hover {
background-color: rgba(0, 0, 0, 0);
color: #0493bd;
}
.submit:hover {
color: #3498db;
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease {
width: 100%;
background-color: white;
}
#media only screen and (max-width: 580px) {
#form-div {
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
.section div {
display: none;
}
.section:target div {
display: inline-block;
}
<!--Layout Main Wrapper-->
<div id="main-wrapper">
<div class="header">
<!-- The banner-->
<img id="logo" src="Resources/Images/logo.png" width="184" height="47" alt="logo" />
<img id="welcome" src="Resources/Images/Welcome.png" width="180" height="40" alt="Welcome" />
</div>
<!--
-->
<div id="content-wrapper" class="inner-wrapper-settings">
<div class="aside">
<!--The Navigation Menu (left side)-->
<ul>
<li><a title="Link for blog" class="tooltip" href="#blog">Blog</a></li>
<li><a title="Link for Contacts" class="tooltip" href="#contacts">Contacts</a></li>
</ul>
</div>
<!--
-->
<div class="section">
<!--The Section of the layout (right side)-->
<div id="blog">
<span>Blog</span>
</div>
<div id="contacts">
<div id="form-main">
<div id="form-div">
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-blue" />
<div class="ease"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--
-->
<div class="footer">
<!--The foot of the layout (down side)-->
bla bla
</div>
</div>
jsFiddle
Currently, when I click on "Blog" or on "Contacts", it doesn't show anything.
Can you please show me how to fix it?
change the css like below
.section > div {display: none;}
.section > div:target { display: block;}
and remove # from id name
DEMO
try removing the character "#" from your div ids :
<div id="blog">
<div id="contacts">