How do I fix spacing issues in bootstrap mobile view. My website runs perfectly on desktop but when I look at it in mobile view, there are spaces between the navbar menu links and the navbar itself. I used some margins in the desktop view so I think that's why it's doing it but how do I make it work for both?
Here is my html:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Champs Haircuts</title>
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="scripts.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="myNavBar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">
<img class="img-responsive" src="images/logo.png" alt="">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="mainNavbar">
<li>Services & Pricing</li>
<li id="contactLink">Contact</li>
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="callToActionModal" role="dialog">
<div class="modal-dialog">
<!--Modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close">×</button>
<h2 class="text-center modal-title">Champs Haircuts</h2>
</div>
<div class="modal-body">
<h2 class="text-center">Call 847-677-2768</h2>
<p class="text-center">5113 Brown St, Skokie, IL 60077</p>
</div>
</div>
</div>
</div>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>Welcome to<br> <span>Champs Haircuts.</span></h1>
<br>
<p>Look and Feel Like a Champion.</p>
<br>
<br>
<button id="callToActionBtn" class="btn btn-lg">Make An Appointment</button>
<div style="padding: 20px 20px"></div>
</div>
<div class="col-xs-12 col-sm-4">
<img class="img-responsive" src="images/open-hours.png" alt="open hours" height="420" width="370">
</div>
</div>
</div>
</header>
<div id="about">
<div class="container">
<div class="row">
<div id="aboutDiv" class="col-xs-12 col-sm-4 col-sm-offset-4">
<h1 class="text-center">
Our Story
</h1>
</div>
<div style="padding: 60px 60px"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<p>Are you tired of feeling like just another number at your franchise haircut shop? Are you tired of
getting the same disappointing haircut? Have you learned to make peace with it because there
possibly can't be
anything better or maybe that you have reached your max looking good potential? Well if any of those
describe you and you want to change those experiences... Then look no further and enter Champs
Haircuts!
<br><br>
We have 15 years of experience providing excellent hairstyles, quality control, and top of the line
customer service. We are a small shop located in Skokie and we treat you, how you treat you. We
refuse to treat you like just another number. Champs Haircuts... Where you come to look and feel
like a champion.
</p>
</div>
<div class="col-xs-12 col-sm-6">
<div class="text-center">
<a href="https://plus.google.com/100864823698189828429/about?pid=6176986613869798882&oid=100864823698189828429" target="_new">
<img class="img-responsive" src="images/champs-haircuts-lobby.jpg" alt="">
</a>
</div>
</div>
</div>
<hr>
</div>
</div>
<div id="testimonials">
<div class="container">
<div class="row">
<div id="testimonialsHeaderDiv" class="col-xs-12 col-sm-8 col-sm-offset-2">
<h1 class="text-center">
What People Say About Us On
<a class="underline_text" id="testimonialsYelp" href="http://www.yelp.com/biz/champs-haircuts-skokie">Yelp!</a>
</h1>
</div>
</div>
<!--
Copyright (c) 2013 Bootsnipp.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
documentation files (the "Software"), to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-->
<div class="row">
<div class="col-xs-12 col-md-12" data-wow-delay="0.2s">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive "
src="images/qazi.png"
alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive"
src="images/me.png"
alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive"
src="images/rand.png"
alt="">
</li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner text-center">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>This place is great. Lidija offers exceptional customer service. She is
extremely pleasant, gave me the best haircut I have ever received, and gives
very flattering complements.
Here are the services offered for the price of one haircut:
1. Haircut
2. Shampoo
3. Face/Scalp Massage
Oh my goodness the face massage is heaven. It feels so amazing. I sometimes
want to go back just for the massage... And did I mention I received the
best haircut ever?
Sincerely,
Qazi.
</p>
<small>Qazi</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>All my life, I always went to the neighborhood salon where I received no
haircut that I truly liked. There was always something wrong. Also, they
treated me like a number. I was just another client they needed to get done
with.
I was recommended to try out Champs Haircuts by a good friend of mine who
regularly went here for his haircuts. I was both nervous and excited at the
same time.
Now that I have had my first haircut here, I can confidently say that this
is the best haircut place I have ever been to. The whole experience was just
amazing. I never felt that good after getting a haircut. I guess It's
because I had never received a proper haircut before this.
I recommend everyone to try out Champs Haircuts. Just give it a try. Just
one try. You will not regret it.</p>
<small>Tenzin</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>I initially found out about champ's haircuts by typing "best men's haircut
near me" into a Google search. Based on the positive reviews I decided to
give it a shot. I am extremely glad I did. It's been nearly 4 years since I
started coming here and I have had a quality, professional haircut and
service every time.
Lidija takes her time and makes sure you are satisfied with your haircut
before you leave. You also get a great scalp massage and hot steam towel as
well. I recommend Lidija and champs haircuts to everyone looking for a long
term hair stylist.</p>
<small>Aida</small>
</div>
</div>
</blockquote>
</div>
</div>
<div style="padding: 90px 90px">
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i
class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i
class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<br>
<div id="callToActionDiv">
<div class="container">
<div class="text-center">
<button id="callToActionBtnSecondary" class="btn btn-lg">Make An Appointment Now!</button>
</div>
</div>
</div>
<footer>
<div class="container">
<br>
<hr>
<div class="row row-content">
<div class="col-xs-12 col-sm-8">
<ul class="nav navbar-nav">
<li>Services & Pricing</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4">
<ul class="nav navbar-nav navbar-right">
<i class="fa fa-google-plus fa-2x"></i>
<a href="http://www.yelp.com/biz/champs-haircuts-skokie" class="btn btn-circle" target="_new"><i
class="fa fa-yelp fa-2x"></i></a>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
Here is my css:
html, body {
overflow-x: hidden;
}
body {
padding-top: 100px;
}
#myNavBar {
background-color: #006495;
height: 100px;
}
#myNavBar a {
color: white;
height: 100px;
}
.navbar-brand {
font-size: 2em;
line-height: 70px;
}
#mainNavbar > li {
font-size: 1.1em;
margin-left: 20px;
background-color: #004C70;
height: 50px;
margin-top: 20px;
border-radius: 4px;
}
#mainNavbar > li:hover {
background-color: #0093D1;
}
#mainNavbar > #contactLink {
background-color: #F4D00C;
color: black;
}
#myNavBar span {
background: white;
}
#mainNavbar > #contactLink:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
.navbar-nav > #contactLink > a {
color: #004C70;
font-weight: bold;
}
.jumbotron h1 > span{
color: #006495;
}
#callToActionBtn:hover {
background: #006495;
color: white;
font-weight: bold;
}
#callToActionBtn {
font-weight: bold;
background: white;
color: #3d3d3d;
border: 2px solid #3d3d3d;
}
#aboutDiv {
}
#about h1 {
background: #004C70;
color: white;
padding: 20px 20px;
}
#about p {
font-size: 1.4em;
font-style: normal !important;
color: #666666;
}
/* Carousel */
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px;
/* Control buttons */
/* Previous button */
/* Next button */
/* Changes the position of the indicators */
/* Changes the color of the indicators */
}
#quote-carousel .carousel-control {
background: none;
color: #CACACA;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
#quote-carousel .carousel-control.left {
left: -60px;
}
#quote-carousel .carousel-control.right {
right: -60px;
}
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
width: 50px;
height: 50px;
margin: 5px;
cursor: pointer;
border: 4px solid #CCC;
border-radius: 50px;
opacity: 0.4;
overflow: hidden;
transition: all 0.4s;
}
#quote-carousel .carousel-indicators .active {
background: #333333;
width: 128px;
height: 128px;
border-radius: 100px;
border-color: #f33;
opacity: 1;
overflow: hidden;
}
.carousel-inner {
min-height: 300px;
}
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
#testimonialsHeaderDiv {
height: 100px;
transform: skew(-20deg);
}
#testimonials h1 {
background: #004C70;
color: white;
padding: 20px 20px;
}
#testimonials h1 a {
color: #F2635F;
}
#testimonials h1 a:hover {
cursor: pointer;
text-decoration: none;
}
.underline_text {
border-bottom: solid 2px #F2635F;
display: inline;
padding-bottom: 3px;
}
#calltoactiondiv {
background: #eeeeee;
padding: 20px 20px;
color: #333333;
}
#callToActionBtnSecondary:hover {
background: #006495;
color: white;
font-weight: bold;
}
#callToActionBtnSecondary {
font-weight: bold;
background: white;
color: #3d3d3d;
border: 2px solid #3d3d3d;
padding: 20px 35px;
}
footer .navbar-nav li{
margin-right: 20px;
}
#servicesHeader {
background: #006495;
color: #ffffff;
padding: 10px 10px;
}
/* Contact Page Styles */
#contactHeader {
background: #006495;
color: #ffffff;
padding: 10px 10px;
}
.form-horizontal input {
font-size: 1.7em;
height: 50px;
}
.form-horizontal input {
outline: none;
border-bottom: 1px solid rgb(198, 198, 198);
border-top: none;
border-right: none;
border-left: none;
box-shadow: none;
}
.form-horizontal input:focus {
border-bottom: solid 4px #F2635F;
}
.form-horizontal textarea {
font-size: 1.5em;
border-bottom: 1px solid rgb(198, 198, 198);
border-top: none;
border-right: none;
border-left: none;
box-shadow: none;
}
.form-horizontal textarea:focus {
border-bottom: solid 4px #F2635F;
}
/*
.form-horizontal p {
color: rgb(93, 107, 125);
font-size: 1.4em;
}
*/
#contactDescription {
color: rgb(93, 107, 125);
font-size: 1.4em;
}
.form-horizontal button {
background: #006495;
color: #eeeeee;
}
.form-horizontal button:hover {
background: #F2635F;
color: #F4D00C;
}
.form-control::-webkit-input-placeholder { color: rgb(93, 107, 125); }
.form-control:-moz-placeholder { color: rgb(93, 107, 125);}
.form-control::-moz-placeholder { color: rgb(93, 107, 125); }
.form-control:-ms-input-placeholder { color: rgb(93, 107, 125); }
/* Services and Pricing */
.services h2 {
color: #636466;
}
.price {
color: #636466;
font-size: 1.5em;
margin-top: 20px;
}
.serviceDescription {
font-size: 1.1em;
}
I tried looking it up on stackoverflow and other resources, but nothing matched my exact scenario. I also tried to use media queries for screen size less than 480px. It still doesn't work. Thanks in advance for the help.
Here is a link to the site developertenzin.github.io/champs_haircuts
Please add this in your custome css file
#media screen and (max-width: 768px) {
#myNavBar {background-color: #006495;height: auto;padding: 12px 0px;}
.navbar-header{ height: 74px;}
#myNavBar a{height:auto;}
.navbar-nav {margin: 0px auto !important;}
#mainNavbar > li {margin-left: 0px;border-radius: 4px;margin-top:7px;}
#callToActionBtnSecondary{padding: 10px;}
#calltoactiondiv{padding:10px;}
#testimonials h1{padding: 0px;margin: 0px auto;}
.jumbotron{padding-top:0px !important;}
}
in your css remove margin from #mainNavbar > li
and add your margin
#media screen and (min-width: 768px) {
#mainNavbar > li {
margin-left: 20px;
border-radius: 4px;
}
}
Related
I want the image in my site to completely change when the browser is resized.
I've been using media-queries, but I can't seem to get it right. Any thoughts/tips?
The thing is I have tried the display trick with media query but its not working
I did this, but it's not working even when I am lowering the viewport. The image in the laptop viewport remains the same in the phone viewport.
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display: block;
}
.blocks {
display: none;
}
}
<div class="col-lg-6 border:1px">
<img class="blocks" src="https://via.placeholder.com/200" alt="laptop-mockup">
<img class="mob" src="https://via.placeholder.com/200/ff0000" alt="android-mockup">
</div>
The whole html and css code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News homepage</title>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght#600;700;800&family=PT+Sans:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="navigator">
<nav class="navbar navbar-expand-sm navbar-dark navbar-light">
<a class="navbar-brand" href=""> <img src="C:\Users\91826\Desktop\news-homepage-main\css\images\logo.svg" alt="My Happy SVG" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation navbar-light">
<span class="navbar-toggler-icon navi"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer">Home </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#pricing"> New </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#cta"> Popular </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link" href="#footer"> Trending </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer"> Categories </a>
</li>
</ul>
</div>
</nav>
</div>
<div class="row ">
<div class="col-lg-6 border:1px">
<img class="blocks" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-desktop.jpg" alt="laptop-mockup">
<img class="mob" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-mobile.jpg" alt="android-mockup">
</div>
<div class="tag">
<h1 class="tagline">The Bright<br />Future of<br />Web 3.0?</h1>
</div>
<div class="read">
<h1 class="readline">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people.
But is it really fulfilling its promise?</h1>
</div>
<button class="button-50 readmore" type="button" name="button">READ MORE</button>
<div class="col-lg-6 border:1px">
<div class="new">
<h1>New</h1>
<h2>Hydrogen VS Electric Cars</h2>
<h3>Will hydrogen-fueled cars ever catch up to EVs?</h3>
<hr>
<h2>The Downsides of AI Artistry</h2>
<h3>What are the possible adverse effects of on-demand AI image generation?</h3>
<hr>
<h2>Is VC Funding Drying Up?</h2>
<h3>Private funding by VC firms is down 50% YOY. We take a look at what that means.</h3>
</div>
</div>
</div>
</div>
<div class="info">
<div class="row">
<div class="col-lg-4 box">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-retro-pcs.jpg" alt="" />
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1 "> 01</h1>
<h2 class="infohead2"> Reviving Retro PCs</h2>
<h3 class="infohead3"> What happens when old PCs<br>are given modern upgrades?</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-gaming-growth.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf1 inf">
<h1 class="infohead1"> 02</h1>
<h2 class="infohead2"> Top 10 laptops of 2022</h2>
<h3 class="infohead3">Our best picks for various <br> needs and budgets.</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-top-laptops.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1"> 03</h1>
<h2 class="infohead2"> The Growth of Gaming</h2>
<h3 class="infohead3">How the pandemic has sparked <br> fresh opportunities.</h3>
</div>
</div>
</div>
</div>
</div>
<hr class="hori">
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Saswat Seth.
</div>
</body>
</html>
CSS
.navigator {
margin-bottom: 2%;
}
body {
padding: 0% 10% 2% 10%;
}
.nav-link {
color: black;
}
:hover.nav-link {
color: #6B728E;
}
.navigator {
padding: 2% 5% 0% 0%;
}
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display:block;
}
.blocks {
display:none;
}
}
.new {
height: 85%;
width: 23%;
background: hsl(240, 100%, 5%);
position: absolute;
right: 140px;
padding: 2%;
}
.navelement {
padding-right: 6%;
font-size: 100%;
}
h1 {
color: hsl(35, 77%, 62%);
font-family: 'noto sans';
font-weight: 600;
}
h2 {
color: #fff;
font-size: 23px;
margin-top: 10%;
font-family: 'noto sans';
font-weight: 700;
}
h3 {
color: #6B728E;
font-size: 15px;
padding: 4% 0%;
line-height: 25px;
}
hr {
color: #fff;
border-top: solid white;
}
.tag {
position: absolute;
bottom: 20px;
}
.tagline {
font-family: 'noto sans';
color: #000;
font-weight: 800;
font-size: 60px;
}
.read {
padding: 2% 38%;
position: absolute;
bottom: 54px;
right: -15px;
}
.readline {
font-size: 110%;
color: #6B728E;
line-height: 27px;
}
.button-50 {
height: 49px;
width: 200px;
appearance: button;
background-color: hsl(5, 85%, 63%);
background-image: none;
border: 1px solid #000;
border-radius: 4px;
box-shadow: #B73E3E 4px 4px 0 0, #000 4px 4px 0 1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "Montserrat";
font-size: 18px;
font-weight: 400;
line-height: 20px;
margin: 20% 5% 10% 0%;
overflow: visible;
padding: 14px 30px;
text-align: center;
text-transform: none;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
position: absolute;
bottom: -45px;
right: 45%;
}
.button-50:focus {
text-decoration: none;
}
.button-50:hover {
text-decoration: none;
}
.button-50:active {
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
outline: 0;
}
.button-50:not([disabled]):active {
box-shadow: #C9BBCF 2px 2px 0 0, #1d1716 2px 2px 0 1px;
transform: translate(2px, 2px);
}
.readmore {
margin: 10% 3% 5% 0;
font-family: 'Poppins';
font-weight: 400;
}
.info {
margin-top: 5%;
margin-left: 10%;
position: absolute;
right: 10%;
}
.infoimg {
width: 315%;
padding: 20%;
}
.infohead1 {
color: #7D9D9C;
}
.infohead2 {
color: #000;
}
.inf {
padding: 30%;
margin-left: 68px;
white-space: nowrap;
}
.hori {
margin-top: 10%;
color: #000;
border-top: solid black;
}
#media (max-width:350px) {
img{
object-fit: cover;
height: 400px;
}
}
#media screen and (max-width:400px) {
.mob {
display: block;
}
}
I wanted the feature-list div on the next lint of image-computer but only at width 768px it doesn't go on the next line. For better understanding I have attached screenshot of desired result an actual result photo for reference. Please give me a better solution for this.
body {
background-image: url("images/bg-header-desktop.png");
background-size: contain;
background-repeat: no-repeat;
font-size: 18px;
font-family: 'Bai Jamjuree', sans-serif;
padding: 9% 0 0 0;
line-height: 1.5;
margin: 0;
}
p {
color: hsl(201, 11%, 66%);
}
h1,
h3,
h5,
h2 {
color: hsl(210, 10%, 33%);
font-weight: 600;
}
button {
margin-top: 1.25rem;
}
.btn-ios {
border: 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 25px;
color: #FFFFFF;
font-size: 18px;
font-weight: 100;
padding: 10px 35px;
background-color: #26BAA4;
-webkit-box-shadow: -1px 7px 15px -3px #35D9BD;
-moz-box-shadow: -1px 7px 15px -3px #35D9BD;
box-shadow: -1px 7px 15px -3px #35D9BD;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}
.btn-ios:hover {
background: #35D9BD;
border: solid #35D9BD 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 25px;
text-decoration: none;
}
.btn-mac {
border: 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 25px;
color: #FFFFFF;
font-size: 18px;
font-weight: 100;
padding: 10px 35px;
background-color: #6173FF;
-webkit-box-shadow: -1px 7px 15px -3px #7585FC;
-moz-box-shadow: -1px 7px 15px -3px #7585FC;
box-shadow: -1px 7px 15px -3px #7585FC;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}
.btn-mac:hover {
background: #7585FC;
border: solid #7585FC 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 25px;
text-decoration: none;
}
.ios {
text-align: right;
}
.mac {
text-align: left;
}
.snippets {
margin-top: 5rem;
}
footer {
background-color: #f2f2f2;
margin-top: 5rem;
padding: 0 10%;
}
/* title */
#title {
text-align: center;
}
.para {
padding: 1% 24%;
}
.logo {
margin-bottom: 2.75rem;
}
/* features */
#features {
margin-top: 4rem;
}
.feature-list {
padding-left: 1rem;
padding-right: 17%;
}
.feature-list-div {
}
.center-feature {
text-align: center;
}
.clipboard {
margin-top: 8rem;
}
.image-computer {
position: relative;
right: 30px;
width: 93%;
}
.image-devices {
margin: 6rem auto 0 auto;
display: block;
width: 80%;
}
.feature-second {
text-align: center;
padding: 3% 10% 10% 10%;
}
.sponsers {
text-align: center;
padding: 0 10% 10% 10%;
}
/* cta */
#cta {
text-align: center;
}
/* footer */
.footer-logo {
width: 45%;
}
.footer-row {
padding-top: 3rem;
padding-bottom: 3rem;
}
.link {
text-decoration: none;
color: hsl(210, 10%, 33%);
}
.link:hover {
color: hsl(171, 66%, 44%);
}
.first-footer {
margin-bottom: 1.2rem;
display: block;
}
.social-icon {
text-align: right;
padding-top: 2rem;
}
.fb-icon:hover,
.twitter-icon:hover,
.insta-icon:hover {
color: hsl(171, 66%, 44%);
}
.fb-icon {
margin-right: 1rem;
}
.twitter-icon {
margin-right: 1rem;
}
.attribution {
font-size: 11px;
text-align: center;
margin-bottom: 0;
position: relative;
bottom: 5px;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
#media (max-width: 970px) {
.feature-list{
padding-right: 10%;
}
}
#media (max-width: 768px) {
.feature-list{
text-align: center;
}
.image-computer{
text-align: center;
display: block;
position: static;
margin: auto;
width: 100%;
}
}
#media (max-width: 376px) {
body {
padding: 25% 12% 0 12%;
}
.para {
padding: 1rem 0 0 0;
}
.ios {
text-align: center;
}
.mac {
text-align: center;
}
}
<body>
<section id="title">
<img class="logo" src="images/logo.svg" alt="logo">
<h1 class="heading">A history of everything you copy</h1>
<p class="para">Clipboard allows you to track and organize everything you copy. Instantly access your clipboard on all your devices.</p>
<div class="container-fluid">
<div class="row">
<div class="col ios">
<button class="btn-ios" type="button" name="button">Download for iOS</button>
</div>
<div class="col mac">
<button class="btn-mac" type="button" name="button">Download for Mac</button>
</div>
</div>
</div>
<h1 class="snippets">Keep track of your snippets</h1>
<p class="para">Clipboard instantly stores any item you copy in the cloud,
meaning you can access your snippets immediately on all your devices. Our Mac and iOS apps will help you organize everything.</p>
</section>
<section id="features">
<div class="container-fluid">
<div class="row imac g-0">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<img class="image-computer" src="images/image-computer.png" alt="image-computer">
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 feature-list">
<div class="feature-list-div">
<h3>Quick Search</h3>
<p>Easily search your snippets by content, category, web address, application, and more.</p>
<h3>iCloud Sync</h3>
<p>Instantly saves and syncs snippets across all your devices.</p>
<h3>Complete History</h3>
<p>Retrieve any snippets from the first moment you started using the app.</p>
</div>
</div>
</div>
</div>
<h1 class="center-feature clipboard">Access Clipboard anywhere</h1>
<p class="center-feature para">Whether you’re on the go, or at your computer, you can access all your Clipboard snippets in a few simple clicks.</p>
<img class="image-devices" src="images/image-devices.png" alt="image-devices">
<h3 class="center-feature">Supercharge your workflow</h3>
<p class="center-feature para">We’ve got the tools to boost your productivity.</p>
<div class="container-fluid feature-second">
<div class="row">
<div class="col">
<img class="icon-feature" src="images/icon-blacklist.svg" alt="icon-blacklist">
<h5>Create blacklists</h5>
<p>Ensure sensitive information never makes its way to your clipboard by excluding certain sources.</p>
</div>
<div class="col">
<img class="icon-feature" src="images/icon-text.svg" alt="icon-text">
<h5>Plain text snippets</h5>
<p>Remove unwanted formatting from copied text for a consistent look.</p>
</div>
<div class="col">
<img class="icon-feature" src="images/icon-preview.svg" alt="icon-preview">
<h5>Sneak preview</h5>
<p>Quick preview of all snippets on your Clipboard for easy access.</p>
</div>
</div>
</div>
</section>
<div class="container-fluid sponsers">
<div class="row">
<div class="col-sm">
<img class="google" src="images/logo-google.png" alt="logo-google">
</div>
<div class="col-sm">
<img class="ibm" src="images/logo-ibm.png" alt="logo-ibm">
</div>
<div class="col-sm">
<img class="microsoft" src="images/logo-microsoft.png" alt="logo-microsoft">
</div>
<div class="col-sm">
<img class="hp" src="images/logo-hp.png" alt="logo-hp">
</div>
<div class="col-sm">
<img class="vector-graphics" src="images/logo-vector-graphics.png" alt="logo-vector-graphics">
</div>
</div>
</div>
<section id="cta">
<h2>Clipboard for iOS and Mac OS</h2>
<p class="para">Available for free on the App Store. Download for Mac or iOS, sync with iCloud and you’re ready to start adding to your clipboard.</p>
<div class="container-fluid">
<div class="row">
<div class="col ios">
<button class="btn-ios" type="button" name="button">Download for iOS</button>
</div>
<div class="col mac">
<button class="btn-mac" type="button" name="button">Download for Mac</button>
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row footer-row">
<div class="col">
<img class="footer-logo" src="images/logo.svg" alt="logo">
</div>
<div class="col">
<a class="first-footer link" href="#">FAQs</a>
<a class="link" href="#">Contact Us</a>
</div>
<div class="col">
<a class="first-footer link" href="#">Privacy Policy</a>
<a class="link" href="#">Press Kit</a>
</div>
<div class="col">
<a class="link" href="#">Install Guide</a>
</div>
<div class="col social-icon">
<i class="fab fa-facebook-square fb-icon fa-2x"></i>
<i class="fab fa-twitter twitter-icon fa-2x"></i>
<i class="fab fa-instagram insta-icon fa-2x"></i>
</div>
</div>
</div>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Mohak Goel.
</p>
</footer>
</body>
this is actual result screenshot
this is desired result screenshot
If you want your columns on smaller displays to be the full width of the display, use col-12 without a size. Then pick your width to switch to two columns half the width of the display and add the appropriate class as in col-md-6. That will give you one full width column from a smartphone up to a tablet (767px wide). On anything larger (more than 767px wide), you would have two columns, each half the display width.
<div class="container-fluid">
<div class="row imac g-0">
<div class="col-12 col-md-6">
<img class="image-computer" src="images/image-computer.png" alt="image-computer">
</div>
<div class="col-12 col-md-6 feature-list">
<div class="feature-list-div">
<h3>Quick Search</h3>
<p>Easily search your snippets by content, category, web address, application, and more.</p>
<h3>iCloud Sync</h3>
<p>Instantly saves and syncs snippets across all your devices.</p>
<h3>Complete History</h3>
<p>Retrieve any snippets from the first moment you started using the app.</p>
</div>
</div>
</div>
</div>
If you want your columns on smaller displays to be side-by-side and one column on wider (768px or more) displays, then you could use col-6 col-md-12
<div class="container-fluid">
<div class="row imac g-0">
<div class="col-6 col-md-12">
<img class="image-computer" src="images/image-computer.png" alt="image-computer">
</div>
<div class="col-6 col-md-12 feature-list">
<div class="feature-list-div">
<h3>Quick Search</h3>
<p>Easily search your snippets by content, category, web address, application, and more.</p>
<h3>iCloud Sync</h3>
<p>Instantly saves and syncs snippets across all your devices.</p>
<h3>Complete History</h3>
<p>Retrieve any snippets from the first moment you started using the app.</p>
</div>
</div>
</div>
</div>
I would like to align the two buttons on the middle line and also align the white balls on the line, I've tried using position with CSS but I didn't succeed, I'm not good at design, and I also don't know how to be responsive on all devices
Could someone please help me? I don't know what to do to adjust this
I don't think it is the best approach, but could be considered as an option
Try modifying the left value of the following:
.tabs_inner .tab-content .tab-pane .list:before {
left: 50.5% // was 46%
}
This would fix your issue until the screen size gets lower than 500px. You might have to change the left value again for the lower screen sizes.
Hope this helped!
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
.mytabs_area {
background-image: -moz-linear-gradient(0deg, #766dff 0%, #88f3ff 100%);
background-image: -webkit-linear-gradient(0deg, #766dff 0%, #88f3ff 100%);
background-image: -ms-linear-gradient(0deg, #766dff 0%, #88f3ff 100%);
}
.p_120 {
padding-top: 120px;
padding-bottom: 120px;
}
#media (max-width: 575px) {
.p_120 {
padding-top: 70px;
padding-bottom: 70px;
}
}
.tabs_inner .nav.nav-tabs {
display: block;
text-align: center;
border: none;
margin-bottom: 120px;
}
.tabs_inner .nav.nav-tabs li {
display: inline-block;
margin-right: 8px;
}
.tabs_inner .nav.nav-tabs li a {
margin: 0px;
line-height: 50px;
border-radius: 5px;
padding: 0px 40px;
font-size: 13px;
font-weight: 500;
color: #fff;
font-family: "Roboto", sans-serif;
border: 1px solid #9ab5f5;
background: rgba(255, 255, 255, 0.1);
}
.tabs_inner .nav.nav-tabs li a.active {
background: #fff;
color: #222222;
}
.tabs_inner .tab-content .tab-pane .list {
max-width: 460px;
margin: auto;
position: relative;
padding-top: 40px;
padding-bottom: 60px;
}
.tabs_inner .tab-content .tab-pane .list:before {
content: "";
height: 100%;
width: 5px;
background: rgba(255, 255, 255, 0.2);
position: absolute;
left: 46%;
transform: translateX(-50%);
top: -5px;
}
.tabs_inner .tab-content .tab-pane .list li {
margin-bottom: 60px;
position: relative;
}
.tabs_inner .tab-content .tab-pane .list li span {
height: 15px;
width: 15px;
border-radius: 50%;
display: block;
background: rgba(255, 255, 255, 0.2);
position: relative;
left: 8.6rem;
top: 2.1rem;
transform: translateX(-50%);
}
.tabs_inner .tab-content .tab-pane .list li span:before {
content: '';
height: 7px;
width: 7px;
background: #fff;
border-radius: 50%;
position: absolute;
left: 52%;
top: 4px;
transform: translateX(-50%);
}
.tabs_inner .tab-content .tab-pane .list li:last-child {
margin-bottom: 0px;
}
.tabs_inner .tab-content .tab-pane .list li .media .d-flex {
padding-right: 100px;
}
.tabs_inner .tab-content .tab-pane .list li .media .d-flex p {
color: rgba(255, 255, 255, 0.75);
margin-bottom: 0px;
padding-top: 20px;
position: relative;
right: 2rem;
}
.tabs_inner .tab-content .tab-pane .list li .media .media-body h4 {
color: #fff;
font-size: 21px;
text-transform: uppercase;
margin-bottom: 20px;
}
.tabs_inner .tab-content .tab-pane .list li .media .media-body p {
color: rgba(255, 255, 255, 0.75);
margin-bottom: 0px;
}
.tabs_inner .tab-content .tab-pane .list li .media .media-body h4 {
color: #fff;
font-size: 21px;
text-transform: uppercase;
margin-bottom: 20px;
}
.tabs_inner .tab-content .tab-pane .list li .media .d-flex p {
color: rgba(255, 255, 255, 0.75);
margin-bottom: 0px;
padding-top: 20px;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<section class="mytabs_area p_120">
<div class="container">
<div class="tabs_inner">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
aria-controls="home" aria-selected="true">My Experiences</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
aria-controls="profile" aria-selected="false">My Education</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<ul class="list">
<li>
<span></span>
<div class="media">
<div class="d-flex">
<p>March 2017 to present</p>
</div>
<div class="media-body">
<h4>Colorlib</h4>
<p>Senior Web Developer <br />Santa monica, Los angeles</p>
</div>
</div>
</li>
<li>
<span></span>
<div class="media">
<div class="d-flex">
<p>March 2017 to present</p>
</div>
<div class="media-body">
<h4>Colorlib</h4>
<p>Senior Web Developer <br />Santa monica, Los angeles</p>
</div>
</div>
</li>
<li>
<span></span>
<div class="media">
<div class="d-flex">
<p>March 2017 to present</p>
</div>
<div class="media-body">
<h4>Colorlib</h4>
<p>Senior Web Developer <br />Santa monica, Los angeles</p>
</div>
</div>
</li>
</ul>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<ul class="list">
<li>
<span></span>
<div class="media">
<div class="d-flex">
<p>March 2017 to present</p>
</div>
<div class="media-body">
<h4>Colorlib</h4>
<p>Senior Web Developer <br />Santa monica, Los angeles</p>
</div>
</div>
</li>
<li>
<span></span>
<div class="media">
<div class="d-flex">
<p>March 2017 to present</p>
</div>
<div class="media-body">
<h4>Colorlib</h4>
<p>Senior Web Developer <br />Santa monica, Los angeles</p>
</div>
</div>
</li>
<li>
<span></span>
<div class="media">
<div class="d-flex">
<p>March 2017 to present</p>
</div>
<div class="media-body">
<h4>Colorlib</h4>
<p>Senior Web Developer <br />Santa monica, Los angeles</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
</body>
</html>
Code updated: Just swap with yours.
Explanation:
I have changed the position of the text and the white button to relative and replace it on aligned form.
This is my first bootstrap design and I think I am doing pretty well but my friend just pointed out that I have a horizontal scroll in browser. Where is this happening and why is it happening? *Horizontal Scroll -> Scroll bar left to right in the browser. If you want to check out the site directly here is the link: https://affattraction.com
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AffAttraction | Performance Based Marketing Network</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.mini.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Header -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">AffAttraction</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Advertisers</li>
<li>Publishers</li>
<li>Blog</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<form class="navbar-form navbar-right">
<input type="email" name="email" class="form-control" placeholder="Email" required="">
<input type="password" name="password" class="form-control" placeholder="Password" required="">
<button type="submit" class="btn btn-green">Login <span class="glyphicon glyphicon-log-in"></span></button>
</form>
</div>
</div>
</nav>
</header>
<!-- Header -- >
<!-- Showcase -->
<div id="showcase">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1><span class="highlight">Performance</span> Based Marketing</h1>
<p>Do you have traffic? Do you want to monetize it? AffAttraction can help you earn more from your websites, apps, games, blogs, and more!</p>
<center><button class="btn btn-showcase">Advertisers</button>
<button class="btn btn-showcase">Publishers</button></center>
</div>
</div>
</div>
</div>
<!-- Showcase -->
<!-- Overview -->
<div id="overview">
<div class="contianer">
<div class="row">
<div class="col-sm-6">
<h1>What is AffAttraction?</h1>
<p>AffAttraction is a CPA (Cost-Per-Action) Affiliate Network consisting of the top converting and highest paying ad campaigns around the globe. We offer a easy-to-use custom tracking platform with advanced tracking, advanced tools, and top support.</p>
</div>
<div class="col-sm-6">
<h1>Why Choose AffAttraction?</h1>
<p>We strive to provide the latest tools and features for our advertisers and publishers to bring you the best experience in CPA Marketing. We also offer the top converting and highest paying ad campaigns around the globe.</p>
</div>
</div>
</div>
</div>
<!-- Overview -->
<!-- Features -->
<div id="features">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>•Customizable Payouts</h1>
<p>Every affiliate has customizable payouts depending on your revenue stream. If your traffic is good and you exceed the minimum amount for that month/week, contact us and we can re-schedule your payment dates.</p>
</div>
<div class="col-sm-6">
<h1>•Detailed Reports and Statistics</h1>
<p>Our custom tracking platform although very easy-to-use is very complex and tracks every detail of a click. Generate reports in real-time in the reports seciton of your publisher panel.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h1>•Highest Conversion Rates</h1>
<p>We don't waste our time adding offers that do not convert. Every offer on our network has been hand tested to make sure it converts correctly. Higher conversion rates means more revenue oppourtunities!
</div>
<div class="col-sm-6">
<h1>•Daily Support</h1>
<p>Our Dedicated Affiliate Managers are here 7 days a week to help you through any encounters you may have while working with AffAttraction!</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h1>•Exclusive Tools</h1>
<p>Postback and API are a some of the tools you will be able to use while working with AffAttraction. Don't forget, we will be adding more in the future!</p>
</div>
<div class="col-sm-6">
<h1>•User Privacy</h1>
<p>Don't worry, we will never share your information with 3rd Parties. Your personal information is secure when entering anything our our domain. User protection is high priority with AffAttraction!</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<button class="btn btn-get-started">Get Started</button>
</div>
</div>
</div>
</div>
<!-- Features -->
<!-- Footer -->
<div class="footer-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h1>About Us</h1>
<p>AffAttraction is a Performance Based Marketing Network helping publishers earn more from thier traffic by offering advanced tracking, exclusive tools, top support and the highest paying ad campaigns around the globe.</p><br>
<p><b>Join our Network <br>and Start Earning from your Traffic!</b></p>
</div>
<div class="col-sm-4">
<h1>Network</h1>
<p>->Blog</p>
<p>->Login</p>
<p>->Terms of Service</p>
<p>->Privacy Policy</p>
<p>->Contact Us</p>
</div>
<div class="col-sm-4">
<h1>AffAttraction</h1>
<p>RR1 Box 3010 Rock Branch Road<br>
Poca, WV 25159 - United States</p><br>
Contact Us:
affiliate#affattraction.com
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
</div>
<div class="row">
<div class="col-sm-12">
<p>© 2017 AffAttraction. All Rights Reserved.</p>
</div>
</div>
</div>
</footer>
<!-- footer -->
<script src="js/jquery.js"></script>
<script src="js/jquery.mini.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.mini.js"></script>
</body>
</html>
CSS
body {
font-family: Helvetica, sans-serif;
background-color: #F4F4F4;
}
/* Global */
.btn-green {
background-color: #00FF00;
border: none;
}
.btn-green:hover {
background-color: #32CD32;
border: none;
}
.highlight {
color: #32CD32;
}
.btn-showcase {
height: 50px;
width: 140px;
margin: 10px;
background-color: #00FF00;
border: none;
font-size: 16px;
color: black;
transition: all 0.3s ease-in-out;
}
.btn-showcase:hover {
height: 50px;
width: 140px;
margin: 10px;
background-color: #32CD32;
border: none;
font-size: 16px;
color: black;
}
.btn-get-started {
height: 50px;
width: 100%;
margin: 10px;
background-color: white;
border: black 3px solid;
border-radius: 0;
font-size: 16px;
color: black;
transition: all 0.5s linear;
}
.btn-get-started:hover {
height: 50px;
width: 100%;
margin: 10px;
background-color: black;
border: white 3px solid;
border-radius: 0;
font-size: 16px;
color: white;
}
/* Header */
.navbar-default {
background-color: #418DD9;
border: none;
border-radius: 0px;
min-height: 60px;
}
.navbar a {
color: white !important;
border-top: #418DD9 3px solid;
}
.navbar-nav a:hover {
color: white !important;
border-top: #00FF00 3px solid;
}
.navbar-brand {
font-size: 25px !important;
}
.navbar-form {
padding-top: 5px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white !important;
}
/* Showcase */
#showcase {
margin-top: -20px;
min-height: 400px;
color: #FFFFFF !important;
background: url('../img/showcase.jpg') fixed;
border: none;
position: relative;
}
#showcase h1 {
font-size: 60px;
text-align: center;
padding-top: 40px;
}
#showcase p {
font-size: 20px;
text-align: center;
padding-top: 15px;
}
/* Overview */
#overview {
padding: 10px;
background-color: #DCDCDC;
}
#overview h1 {
font-size: 35px;
text-align: center;
color: black;
}
#overview p {
font-size: 16px;
text-align: center;
color: black;
}
/* Footer Bottom */
footer {
background-color: #4169E1;
color: #FFFFFF;
min-height: 60px;
}
footer p {
font-size: 15px;
padding-top: 20px;
}
.footer-header {
background-color: #418DD9;
color: #FFFFFF;
}
.footer-header h1 {
font-size: 20px;
}
.footer-header a {
color: #FFFFFF;
text-decoration: none;
transition: all 0.3s linear;
}
.footer-header a:hover {
color: #00FF00;
}
/* Features */
#features {
padding-top: 10px;
padding-bottom: 10px;
}
#features h1 {
font-size: 25px;
font-weight: bold;
}
Also, I am using bootstrap (latest version) so it could be something in their files but I wouldn't think so. I didn't notice this so I don't know where it started.
You misspelled "container" after the <div id="overview">
there is problem in #overview element, if you delete the row under container, you will see its going to be fixed.
I'm trying to remove the white space at the bottom and right side of the website. On the right side it seems that it's caused by the black navbar but I don't have a clue how to fix it.
/* Navbar */
.navbar-default {
background-color: transparent;
border-color: transparent;
}
.navbar-fixed-top .navbar-brand,
.navbar-fixed-top .navbar-nav>li>a {
color: #fff;
}
.navbar-default .navbar-toggle {
border-color: #000;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background-color: #fff;
}
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle {
background-color: transparent;
}
.navbar-fixed-top.scrolled {
background: black;
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.non-underline {
text-decoration: none;
}
.navbar-fixed-top .navbar-brand,
.navbar-fixed-top .navbar-nav>li>a {
color: #fff!important;
}
.navbar-fixed-top .navbar-brand,
.navbar-fixed-top .navbar-nav>li>a:hover {
text-decoration: underline;
background-color: transparent;
color: #fff!important;
}
.navbar-nav>li>a:focus,
.navbar-nav>li>a:active,
.navbar-nav>li>a.active {
background-color: transparent;
color: #fff!important;
}
#logo-img {
width: 70%;
}
/* End Navbar */
/* Jumbotron */
#first {
padding: 0;
}
.jumbotron-image {
max-width: 100%;
height: auto;
}
h2>a {
color: #565656;
}
a:hover {
text-decoration: none;
}
#h1first {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFF;
font-family: 'Philosopher', sans-serif;
}
/* End Jumbotron */
/* About */
#abouth2 {
visibility: hidden;
}
#about-section {
padding-top: 8%;
padding-bottom: 10%;
}
.fadeInBlock {
opacity: 0;
}
#p-about {
font-size: 180%;
font-family: 'Raleway', sans-serif;
}
#img-about {
padding: 0;
}
/*End About*/
/*Portfolio*/
#portfolio-section {
background-color: ;
background: #B5927E;
background: -webkit-linear-gradient(left top, #B5927E, #6C5461);
background: -o-linear-gradient(bottom right, #B5927E, #6C5461);
background: -moz-linear-gradient(bottom right, #B5927E, #6C5461);
background: linear-gradient(to bottom right, #B5927E, #6C5461);
padding-top: 2%;
padding-bottom: 10%;
}
.headline {
font-family: 'Merriweather', serif;
color: #484A4A;
}
.headline.fadeInBlock>a {
color: #484A4A;
}
.headline.fadeInBlock>a:hover {
color: #484A4A;
}
#portfolio-id {
margin-bottom: 2%;
}
/*End Portfolio*/
/*Contact*/
#contact-section {
background-color: #4D3C4F;
padding-top: 2%;
padding-bottom: 5%;
}
.social-icons {
color: #b7b7b7;
}
.fa {
font-size: 40px;
padding: 20px;
transition: 0.5s;
}
.fa-facebook-official {
vertical-align: middle;
margin: auto;
}
.fa-twitter {
vertical-align: middle;
margin: auto;
}
.fa-free-code-camp {
vertical-align: middle;
margin: auto;
}
.fa-envelope {
vertical-align: middle;
margin: auto;
}
#facebook:hover {
color: #3b5998;
}
#twitter:hover {
color: #00aced;
}
#fcc:hover {
color: #006401;
}
#email:hover {
color: #92b8f4;
}
ul {
list-style: none;
}
/*End Contact*/
/*Footer*/
footer {
background-color: #382F4A;
}
#copy {
color: #FFFFFF;
}
/*End Footer*/
<!--Navbar-->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand"><img src="http://i64.tinypic.com/27wy82r.png" id="logo-img"></a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!--End Navbar-->
<!--Jumbotron-->
<div class="row">
<div class="col-md-12">
<div class="jumbotron" id="first" href="#home">
<img class="jumbotron-image" src="http://netdna.webdesignerdepot.com/uploads/2014/07/featured36.jpg">
<h1 class="text-center fadeInPage" id="h1first">
Welcome to Cosmos<br> web design
</h1>
</div>
</div>
</div>
<!--End Jumbotron-->
<!--About-->
<div class="container" id="about-section">
<div class="row">
<div class="col-md-6">
<h2 class="text-center" id="abouth2"><a name="about">About</a></h2>
<p class="fadeInBlock" id="p-about">Cosmos Web Design was created by George Kech. I provide web solutions that require HTML, CSS, JavaScript and JQuery. I focus on serving the needs of each customer individually with complete satisfaction as my goal.</p>
</div>
<div class="col-md-6">
<img src="https://www.topechelon.com/wp-content/uploads/2016/07/devices-web-design.png" alt="web design" class="img-responsive">
</div>
</div>
</div>
<!--End About-->
<!--Portfolio-->
<div class="container-inner" id="portfolio-section">
<h2 class="text-center headline fadeInBlock" id="portfolio-id"><a name="portfolio">Portfolio</a> is coming soon...</h2>
<div class="container">
<div class="row text-center">
<div class="col-md-4">
<img src="https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg">
</div>
<div class="col-md-4">
<img src="https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg">
</div>
<div class="col-md-4">
<img src="https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg">
</div>
</div>
</div>
</div>
<!--End Portfolio-->
<!--Contact-->
<div class="container-fluid">
<div class="row" id="contact-section">
<div class="col-md-12">
<div class="text-center">
<i class="social-icons fa fa-facebook-official" id="facebook"></i>
<i class="social-icons fa fa-twitter" id="twitter"></i>
<i class="social-icons fa fa-free-code-camp" id="fcc"></i>
<i class="social-icons fa fa-envelope" id="email"></i>
<h3 id="contactMe">
<a name="contact"></a>
</h3>
</div>
</div>
</div>
</div>
<!--End Contact-->
<!--Footer-->
<footer>
<p class="text-center" id="copy">George Kech © 2017</p>
</footer>
And here's the link to the codepen: Codepen
I think it's your top level nesting. You need to wrap the jumbotron into a container div as well. You can make it fluid if you need full width:
<div class="container-fluid">
<div class="row">
...
</div>
Generally speaking, if you look at basic templates provided by boostrap's documentation, they place all body content into a container div.
This is due to the fact that each row has a -15px margin.
It's caused by your Bootstrap:
Every .row has a negative margin left and right, while every .col-* has a padding left and right by the same amount.
We have to get rid of that. But we need it back inside .container classes.
Look here: https://codepen.io/anon/pen/QpOyyo
I added this CSS:
/* Don't add padding to all elements that have classes like "col-md-*" */
[class^="col-md-"],
[class*=" col-md-"] {
padding-right: 0;
padding-left: 0;
}
/* Add back the Bootstrap padding, if inside .container */
.container [class^="col-md-"],
.container [class*=" col-md-"] {
padding-right: 15px;
padding-left: 15px;
}
/* Don't add negative margin for all rows */
.row {
margin-left: 0;
margin-right: 0;
}
/* Add back the Bootstrap margin, if inside .container */
.container .row {
margin-left: -15px;
margin-right: -15px;
}
Update: Add this as well to address the footer issue.
.container-fluid {
padding-right:0px;
padding-left:0px;
}
footer p{
margin:0;
}
its caused by the padding-right on the div .col-md-12. Set it to 0 and its fine.
The white space at the bottom is caused by the #copy in the footer, add margin-bottom: 0 to it.