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.
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'm new to html and css and in my class my teach wants us to make a resume with bootstrap. Obviously the whole point of bootstrap is to be interactive in switching between devices. Im trying to work on aligning stuff and i want my navbar to disappear when I shrink the page. How could I do that?
HTML
<!-- Bootstrap Import -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Titile and Style -->
<title>CadenGS's Resume</title>
<link href="https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght#700&display=swap" rel="stylesheet">
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<!-- Navbar on Side -->
<nav class="navbar navbar-expand-lg col-lg-2 flex-direction-column justify-content-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar List Items -->
<img id="pfp" src="Images/user_photo.jpg">
<br>
<ul class="navbar-nav f-flex flex-column">
<li class="nav-item active">
<a class="nav-link" href="#top">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#exp">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Examples</a>
</li>
</ul>
</nav>
<section>
<!-- Used To Scroll To Top of Page for Picture and About on Navbar -->
<p id="top">.</p>
<!-- Content Start -->
<div id="main" class="container margin-top-10%">
<h1 id="primaryName" class="display-2">Caden <span id="secondaryName">Serrato</span></h1>
<!-- Interactive Contacts -->
<p class="info" class="display-4"><em>
<a class="infoLink" onclick="call();">(786) 442-6148</a> · <a class="infoLink"
href="emailFiles/email.html" target="_blank">#cserrato21352#columbushs.com</a></em></p>
<br>
<p class="info2 display-4"><strong><em>I am a Senior High School Student looking to go into the Field of
Engineeing. My
goal is to dual major in Mechanical</em></strong></p>
<p class="info2 display-4" style="text-indent: 80px; margin-top: -10px;"><strong><em>and Engineering, and
hopefully one day work at
Boston Dynamics.</em></strong></p>
<!-- Socials -->
<div id="socials" class="d-flex flex-direction-row" style="margin-top: 7%;">
<!-- Github -->
<div class="socialHolder">
<a href="https://github.com/CadenCGS" target="_about">
<div class="socialLinks">
<img id="gitSocialImg" src="Images/gitSocial.jpg">
</div>
</a>
</div>
<!-- Instagram -->
<div class="socialHolder">
<a href="https://www.instagram.com/cadenserrato/" target="_about">
<div class="socialLinks">
<img id="igSocialImg" src="Images/igSocial.png">
</div>
</a>
</div>
<!-- Facebook -->
<div class="socialHolder">
<a href="https://www.facebook.com/ColumbusHS/" target="_about">
<div class="socialLinks">
<img id="fbSocialImg" src="Images/fbSocial.png">
</div>
</a>
</div>
<!-- LinkedIn -->
<div class="socialHolder">
<a href="https://www.linkedin.com" target="_about">
<div class="socialLinks">
<img id="liSocialImg" src="Images/liSocial.png">
</div>
</a>
</div>
</div>
</div>
<!-- Used To Scroll To Experience on Navbar -->
<p id="exp">.</p>
<hr class="pageBreak">
<!-- Experience Section -->
<div id="experience" class="container">
<h1 style="margin-top: 8%; text-indent: 35px; color: rgba(63, 158, 253, .9);"
class="subSectionName display-3">
Experience</h1>
<h1 style="text-indent: 60px; font-size: 3rem; margin-top: 2%;" class="subSectionName display-4">Robotics
</h1>
<br>
<p class="info2 display-4" style="text-indent: 120px;"><strong><em>I started my first year as a simple
builder
as
I
learned the basics of Vex. My second year I was a bit more</em></strong></p>
<p class="info2 display-4" style="text-indent: 60px; margin-top: -10px;"><strong><em> experienced and began
to
build
for advanced and
complicated
mechanisms. I built all year and ended up finishing </em></strong></p>
<p class="info2 display-4" style="text-indent: 80px; margin-top: -10px;"><strong><em>in 8th place at the
state
championship my team qualified for.</em></strong></p>
<div class="container">
<hr id="aboveDate">
<p class="info2 display-4" style="text-indent: 100px; margin-top: 2%;"><strong>Date: <span
style="color: rgba(63, 158, 253, 1);">August 2018 -
Present</span></strong></p>
</div>
</div>
</section>
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>
CSS
height: 4000px;
background-color: rgb(248, 248, 239);
}
html {
background-color: rgb(248, 248, 239);
scroll-behavior: smooth;
}
.navbar {
background-color: rgba(63, 158, 253, .9);
height: 100%;
position: fixed;
text-align: center;
flex-direction: column;
border-right: 9px solid rgb(168, 211, 255);
}
ul {
display: flex;
justify-content: center;
}
.nav-link {
transition: all .25s;
color: rgba(255, 255, 255, 0.726);
font-size: 1.5rem;
}
.nav-link:hover {
transition: all .25s;
color: white;
text-shadow: darkslategrey;
font-size: 1.7rem;
}
#pfp {
border: 9px solid rgba(255, 255, 255, .4);
border-radius: 50%;
height: 160px;
width: 160px;
position: static;
margin-bottom: 20px;
}
#primaryName {
font-family: 'Saira Extra Condensed';
color: rgb(146, 146, 146);
font-size: 6rem;
}
#secondaryName {
font-family: 'Saira Extra Condensed';
color: rgba(63, 158, 253, .9);
font-size: 6rem;
}
#main {
padding-top: 10%;
margin-left: 7%;
}
.info {
font-size: 1.7rem;
}
.info2 {
font-size: 1.3rem;
text-indent: 30px;
}
#top,
#exp {
color: rgba(63, 158, 253, 0);
}
.infoLink {
text-decoration: none;
font-family: 'Saira Extra Condensed';
color: rgb(110, 110, 110);
}
.infoLink:hover {
color: black;
}
#emailLink {
text-decoration: none;
color: black;
}
.socialHolder {
margin-left: 3%;
}
.socialLinks {
height: 65px;
width: 65px;
border-radius: 50%;
background-color: rgb(146, 146, 146);
display: flex;
justify-content: center;
transition: all .25s;
}
.socialLinks:hover {
transition: all .25s;
background-color: rgb(75, 75, 75);
}
#gitSocialImg {
border-radius: 50%;
height: 55%;
width: 55%;
margin-top: 25%;
}
#igSocialImg {
border-radius: 50%;
height: 80%;
width: 80%;
margin-top: 11%;
}
#fbSocialImg {
border-radius: 50%;
height: 55%;
width: 55%;
margin-top: 22%;
}
#liSocialImg {
border-radius: 50%;
height: 55%;
width: 55%;
margin-top: 22%;
}
.pageBreak {
border: 2px solid rgba(63, 158, 253, .9);
width: 85%;
margin-top: 4%;
margin-right: 13%;
}
.subSectionName {
font-family: 'Saira Extra Condensed';
color: rgb(146, 146, 146);
}
.subSectionInfo {
font-family: 'Saira Extra Condensed';
color: rgb(110, 110, 110);
font-size: 1.7rem;
margin-left: 60px;
}
#experience {
margin-left: 4.6%;
}
#aboveDate {
border: 2px solid rgba(63, 158, 253, .9);
width: 27.5%;
margin-left: 6%;
margin-bottom: -1%;
}```
You can write a media query and than do display: none; on the element you want to disappear.
Example:
#media (max-width: 800px) {
.navbar {
display: none;
}
}
Photo of the page
I have my website's content somehow stuck to the navigation menu. I have tried putting it in a different div but nothing has worked for me so far, neither replacing the placing of the container class. I dont understand why the body's main content wont align underneath the navigational menu and be in its own section so that it doesn't leak out. Any help would be greatly appreciated.
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
max-width: calc(100vw - 20px);
min-height: 100vh;
}
body {
width: 100%;
overflow-x: hidden;
}
#container {
min-height: 100%;
position: relative;
width: 100%;
}
main {
margin-left: 100px;
}
/*
html {
display: block;
}
/*
/* SCROLL BAR CSS STARTS */
body::-webkit-scrollbar {
width: 0.30rem;
}
body::-webkit-scrollbar-track {
background: #212429;
}
body::-webkit-scrollbar-thumb {
background: #fc3218;
}
/* SCROLL BAR CSS ENDS */
/* NAV BAR CSS STARTS */
.logo {
margin-right: 5px;
}
.my-nav {
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
}
.navbar-light .navbar-nav .nav-link {
color: white;
}
.navbar-nav>li {
padding-left: 35px;
padding-right: 55px;
float: none;
display: table-cell;
text-align: center;
font-size: 14px;
}
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
color: #fc3218;
}
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:active {
color: #fc3218;
}
.navbar {
margin-top: 0px;
margin-left: 10px;
width: 100%;
background: #22252a;
}
.dropdown-menu {
color: white;
background-color: #fc3218;
}
.dropdown-item {
color: white;
font-size: 12px;
}
/* NAV BAR CSS END */
/* SIDEBAR CSS STARTS */
.lateral-nav {
position: absolute;
top: 0;
left: 0;
width: 100px;
background: #fafafc;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
img {
width: 60px;
height: 45px;
margin-top: 3px;
}
.lateral-nav a {
writing-mode: vertical-lr;
text-orientation: mixed;
margin: 5px 0;
}
.socialbox {
position: fixed;
display: inline-block;
top: 50%;
left: 0;
width: 80px;
height: auto;
margin: -120px 0 0;
text-align: center;
}
.socialbox img {
display: inline-block;
width: 30px;
height: 30px;
padding: 5px;
margin: 4px;
box-sizing: border-box;
}
.socialbox::before {
content: "#Suivez-nous";
bottom: -180px;
left: -38px;
width: 150px;
font-size: 16px;
font-weight: 800;
letter-spacing: 0;
color: #000f33;
transform: rotate(-90deg);
}
.socialbox::after {
content: "";
bottom: -105px;
left: 50%;
width: 1px;
height: 110px;
margin: 0 0 0 -2px;
background-color: #dddee4;
}
.socialbox::after,
.socialbox::before {
position: absolute;
display: inline-block;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.socialbox .fa {
font-size: 20px;
color: #000f33;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}
/* SIDEBAR CSS ENDS */
/* CARD DECK START */
.card-deck {
width: 90%;
margin: auto;
}
/* CARD DECK END */
/* Footer start */
footer {
background: #16222A;
background: -webkit-linear-gradient(59deg, #3A6073, #16222A);
background: linear-gradient(59deg, #3A6073, #16222A);
color: white;
width: calc(100% - 85px);
margin-left: 100px;
margin-right: -15px;
}
footer a {
color: #fff;
font-size: 14px;
transition-duration: 0.2s;
}
footer a:hover {
color: #FA944B;
text-decoration: none;
}
.copy {
font-size: 12px;
padding: 10px;
border-top: 1px solid #FFFFFF;
}
.footer-middle {
padding-top: 2em;
color: white;
}
/* Footer social icons */
ul.social-network {
list-style: none;
display: inline;
margin-left: 0 !important;
padding: 0;
}
ul.social-network li {
display: inline;
margin: 0 5px;
}
.social-network a.icoFacebook:hover {
background-color: #3B5998;
}
.social-network a.icoLinkedin:hover {
background-color: #007bb7;
}
.social-network a.icoFacebook:hover i,
.social-network a.icoLinkedin:hover i {
color: #fff;
}
.social-network a.socialIcon:hover,
.socialHoverClass {
color: #44BCDD;
}
.social-circle li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
width: 30px;
height: 30px;
font-size: 15px;
}
.social-circle li i {
margin: 0;
line-height: 30px;
text-align: center;
}
.social-circle li a:hover i,
.triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.social-circle i {
color: #595959;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.social-network a {
background-color: #F9F9F9;
}
/* Footer end */
<!DOCTYPE html>
<html lang="en">
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/carousel/">
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="normalize.css">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<div id="container">
<!-- Navigation menu -->
<header>
<nav class="my-nav navbar navbar-light navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarsExample08"
aria-controls="navbarsExample08" aria-expanded="false" aria- label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria- haspopup="true"
aria-expanded="false">ACTIVITES</a>
<div class="dropdown-menu" aria-labelledby="dropdown08">
<a class="dropdown-item" href="#">Rafting</a>
<a class="dropdown-item" href="#">Canooing</a>
<a class="dropdown-item" href="#">Parachute</a>
<a class="dropdown-item" href="#">Soufflerie</a>
<a class="dropdown-item" href="#">Saut elastique</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OFFRES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EVENEMENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">A PROPOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ESPACE HANDICAP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Navigation menu -->
<!-- Sidebar menu -->
<div class="lateral-nav position-fixed">
<img class="logo" src="./img/so.png" alt="">
<div class="socialbox ">
<img class="fa fa-facebook" src="./img/facebook.png" alt="">
<img class="fa fa-twitter" src="./img/twitter.png" alt="">
<img class="fa fa-youtube" src="./img/youtube.png" alt="">
</div>
</div>
<!-- Sidebar menu -->
<!-- Website Content -->
<main>
<section>
<!-- NOS ACTIVITES START -->
<h2 class="text-center">NOS ACTIVITES</h2>
<div class="card-deck ">
<div class="card text-center" style="width: 18rem;">
<div class="card-body rafting">
<h5 class="card-title">RAFTING</h5>
RÉSERVEZ
</div>
</div>
<div class="card text-center" style="width: 18rem; height: 15rem;">
<div class="card-body canooing">
<h5 class="card-title">CANNOING</h5>
RÉSERVEZ
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body parachute">
<h5 class="card-title">PARACHUTE</h5>
RÉSERVEZ
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body soufflerie">
<h5 class="card-title">SOUFFLERIE</h5>
RÉSERVEZ
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body saut-elastique">
<h5 class="card-title">SAUT ELASTIQUE</h5>
RÉSERVEZ
</div>
</div>
</div>
<!-- NOS ACTIVITES END -->
</section>
</main>
</div>
<!-- Footer Start -->
<footer class="mainfooter" role="contentinfo">
<div class="footer-middle">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Heading 1</h4>
<ul class="list-unstyled">
<li></li>
<li>Payment Center</li>
<li>Contact Directory</li>
<li>Forms</li>
<li>News and Updates</li>
<li>FAQs</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Heading 2</h4>
<ul class="list-unstyled">
<li>Website Tutorial</li>
<li>Accessibility</li>
<li>Disclaimer</li>
<li>Privacy Policy</li>
<li>FAQs</li>
<li>Webmaster</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Heading 3</h4>
<ul class="list-unstyled">
<li>Parks and Recreation</li>
<li>Public Works</li>
<li>Police Department</li>
<li>Fire</li>
<li>Mayor and City Council</li>
<li>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h4>Follow Us</h4>
<ul class="social-network social-circle">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12 copy">
<p class="text-center">© Copyright 2018 - Company Name. All rights reserved.</p>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer Ends -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
</body>
</html>
This is because of the position: absolute on .my-nav element. Just remove that or change it to relative and you should be good
Why do you use position: absolute for the my-nav? What position: absolute or fixed does, it pulls out the element (my-nav) from the document context. If you check this and debug in your browser, you can see that the header has height equal to 0.
In order to fix the card-deck layout, just simply remove the position absolute.
If you want the menu, to be visible when you scroll down the page, consider putting position: sticky on the header.
like:
header {
position: sticky;
top: 0; // need to apply top and left for position sticky to work
left: 0;
z-index: 5; // z-index, so it is at the top
}
.my-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
}
You can add padding to the top of the div which contains the card deck :
.card-deck {
width: 90%;
margin: auto;
padding-top:50px;
}
for the heading to move down edit this part in HTML file:
<h2 style="padding-top:40px;" class="text-center">NOS ACTIVITES</h2>
I am editing a template and I am having trouble getting the navigation menu button to align next to my logo when viewed on mobile devices. It also slightly covers the header image on mobile as well.
Mobile view
Desktop view
Any help is greatly appreciated! Here is my code:
#import url(http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800);
#import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200,700);
/*************************
*******Typography******
**************************/
body {
font-family: 'Dosis', sans-serif;
font-size: 17px;
color: #fff
}
.btn {
border-radius: 0;
font-family: 'Yanone Kaffeesatz','sans-serif';
font-size: 20px;
padding: 9px 23px;
}
a {
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
}
a:focus,
a:hover {
text-decoration: none;
outline: none
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Yanone Kaffeesatz', 'sans-serif';
font-weight: 300;
text-transform: uppercase;
}
h2 {
font-size: 36px
}
.navbar-toggle {
margin-top: 12px
}
.navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-toggle,
.navbar-toggle:focus {
border:1px solid #fff;
outline: none;
}
/*************************
*******Header CSS******
**************************/
.header-top {
display: block;
overflow: hidden;
padding: 25px;
}
.main-nav {
position: absolute;
width: 100%;
z-index: 999;
}
.main-nav
.container {
width: 100%
}
.social-icons a {
font-size: 18px;
color: #fff;
padding-left:20px;
}
.social-icons .fa-facebook:hover {
color: #3B5997
}
.social-icons .fa-twitter:hover {
color:#29C5F6
}
.social-icons .fa-google-plus:hover {
color:#D13D2F
}
.social-icons .fa-youtube:hover{
color: #ec5538
}
.navbar-brand {
background-color: #ff0080;
height: 90px;
margin-bottom: 20px;
position: relative;
width: 435px;
}
.navbar-brand img {
position: absolute;
top: -35px;
}
.navbar-right {
background-color: #ff0080;
padding:0 95px 0 0;
opacity: .9
}
.navbar-right li a {
padding: 35px 21px;
font-size: 22px;
color: #fff;
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz', 'sans-serif';
font-weight: 300;
}
.navbar-right li a:hover,
.navbar-right li a:focus,
.navbar-right .active a {
background-color: #fff;
color: #16728f
}
.fixed-menu {
background-color: #ff0080;
position: fixed;
top: 0;
}
.fixed-menu .navbar-right {
padding: 0;
}
.fixed-menu .navbar-right li a {
font-size: 18px;
padding: 20px 25px;
text-shadow:inherit;
}
.fixed-menu .navbar-brand {
height: 60px;
margin-top: 0;
padding: 0;
margin-bottom: 0;
width: 435px;
}
.fixed-menu .navbar-brand img {
height:60px;
top: 0;
}
.fixed-menu .header-top {
display: none;
}
/*************************
*******Home CSS******
**************************/
#home {
position: relative;
overflow: hidden;
}
#main-slider img {
width: 100%
}
#main-slider
.carousel-caption {
background: none repeat scroll 0 0 #000000;
bottom: 14%;
float: left;
left: 0;
opacity: 0.8;
padding:10px 60px 35px;
right: inherit;
text-transform: uppercase;
color: #fff;
text-align: left;
}
#main-slider
.carousel-caption h2 {
font-size: 38px;
}
#main-slider
.carousel-caption h4 {
font-size: 24px;
}
#main-slider
.carousel-caption a {
font-size: 22px;
color: #2da1c5
}
#main-slider
.carousel-caption a:hover {
color: #2588a6
}
#main-slider
.carousel-caption a:hover i {
margin-left: 35px
}
#main-slider
.carousel-caption a i {
margin-left: 15px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#main-slider
.carousel-indicators li {
background-color:#ff0080;
border: 1px solid #ff0080;
}
#main-slider
.carousel-indicators li.active {
background-color:#fff;
border: 1px solid #fff;
}
/*************************
*******Explore CSS******
**************************/
#explore {
background-color: #C34C39;
background-image: url("../images/event-bg.jpg");
background-position: center bottom;
background-size: contain;
background-repeat:no-repeat;
position: relative;
overflow: hidden;
padding: 130px 0 100px;
}
.watch {
position: absolute;
left: 0;
top: 7%;
}
#explore h2 {
font-size: 42px;
text-transform: uppercase;
text-align: center;
}
#countdown {
display: block;
overflow: hidden;
text-align: center;
padding: 0
}
#countdown li {
list-style: none;
display:inline-block;
margin-right: 40px;
text-align: center;
text-transform: uppercase;
font-size: 18px;
position: relative;
}
#countdown li:last-child {
margin-right: 0
}
#countdown li span {
display: block;
font-size: 40px;
font-weight: 700;
height: 82px;
line-height: 79px;
width: 75px;
border-radius: 10px;
border-right: 1px solid #c34c39;
border-bottom: 1px solid #c34c39;
}
#countdown li .days {
background-color: #45b29d;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li .hours {
background-color: #efc94c;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li .minutes {
background-color: #e27a3f;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li .seconds {
background-color: #df5a49;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li:before {
background-color: #c34c39;
content: "";
height: 11px;
left: 0;
position: absolute;
top: 36px;
width: 1px;
}
#countdown li:after {
background-color: #c34c39;
content: "";
height: 11px;
right:0;
position: absolute;
top: 36px;
width: 1px;
}
.cart {
background-color: #b34534;
position: absolute;
right:-200px;
top: 37%;
width:252px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.cart:hover {
right:0;
}
.cart a {
color: #FFFFFF;
display: block;
font-size: 24px;
text-transform: uppercase;
}
.cart a i {
font-size: 30px;
padding: 20px 12px;
background-color: #A64030;
margin-right: 3px;
}
/*************************
*******Event CSS******
**************************/
#event {
background-color: #33888F;
background-image: url("../images/performar-bg.jpg");
background-position: 50% 0;
background-size: contain;
position: relative;
background-repeat: no-repeat;
}
.guitar {
position: absolute;
right:0;
top: 0
}
#event h2 {
color: #FFFFFF;
font-size: 36px;
font-weight: 300;
margin-bottom: 40px;
margin-top: 70px;
text-transform: uppercase;
}
.single-event {
margin-bottom: 70px;
}
.single-event h4 {
color: #FFFFFF;
font-size: 24px;
font-weight: 300;
line-height: 26px;
margin-top: 25px;
text-transform: uppercase;
}
.single-event h5 {
font-size: 18px;
font-weight: 100;
display: block;
}
#event-carousel {
position: relative;
}
.even-control-left,
.even-control-right {
position: absolute;
font-size: 24px;
color: #fff;
top: 0;
}
.even-control-left {
right: 3%
}
.even-control-right {
right: 0;
}
/*************************
*******About CSS**********
**************************/
#about {
background-color: #75B46E;
position: relative;
width: 100%;
display: flex;
}
.guitar2 {
top: 0;
width: 50%;
}
.guitar2 img {
padding-top: 3%;
}
.about-content {
width: 50%;
background-image: url("../images/about-bg.jpg");
background-position: left bottom;
background-repeat: no-repeat;
background-size: cover;
padding: 70px 70px 110px;
}
#about h2 {
margin-bottom: 23px;
}
.about-content p {
font-size: 17px;
font-family: 'Dosis',sans-serif;
}
#about .btn-primary {
background-color: #137c61;
color: #fff;
text-transform: capitalize;
border: none;
margin-top: 28px;
}
#about .btn-primary:hover {
background-color: #126d55
}
/*************************
******Twitter CSS****
**************************/
#twitter {
background-color: #ecedef;
background-image: url("../images/twitter-bg.jpg");
background-position: center bottom;
background-size: cover;
background-repeat:no-repeat;
position: relative;
padding: 95px 0 90px;
overflow: hidden;
}
.twit {
position: absolute;
left: 0;
top:-42%;
}
#twitter-feed .item {
text-align: center;
}
#twitter-feed .item img {
display: inline-block;
width: 78px;
height: 78px;
border-radius: 50%;
background-color: #c5c8ce;
padding: 5px;
margin-bottom: 30px;
}
#twitter-feed .item a,
#twitter-feed .item p {
font-size: 24px;
font-weight: 300;
font-family: 'Yanone Kaffeesatz','sans-serif';
}
#twitter-feed .item p {
color: #3D3D3D;
}
#twitter-feed .item a {
color:#00c3ff;
}
.twitter-control-left,
.twitter-control-right {
position: absolute;
color: #00c3ff;
top: 59%;
font-size: 24px
}
.twitter-control-left {
left: 0;
}
.twitter-control-right {
right:0;
}
/*************************
******Sponsor CSS****
**************************/
#sponsor {
background-color: #1881a2;
background-image: url("../images/sponsor-bg.jpg");
background-position:50% 0;
background-size: cover;
background-repeat:no-repeat;
position: relative;
}
.light {
position: absolute;
right: 0;
bottom: 0;
}
#sponsor .col-sm-10 {
z-index: 10;
}
#sponsor h2 {
margin-top: 90px;
margin-bottom: 40px;
}
#sponsor .item ul {
font-size: 0;
padding: 0;
}
#sponsor .item ul li {
display: inline-block;
list-style: none;
width: 33.33%;
margin-bottom: 75px;
}
#sponsor .item ul li:last-child {
margin-right: 0
}
.sponsor-control-left,
.sponsor-control-right {
color: #FFFFFF;
font-size: 24px;
position: absolute;
top: 20%;
}
.sponsor-control-left {
right: 12%
}
.sponsor-control-right {
right: 10%
}
/*************************
******Map CSS****
**************************/
#map {
position: relative;
}
#gmap {
height:450px;
}
/*************************
******Contact CSS****
**************************/
.contact-section {
background-color: #f7ab24;
background-image: url("../images/contact-bg.jpg");
background-position:60% 0;
background-size:contain;
background-repeat:no-repeat;
position: relative;
}
.ear-piece {
position: absolute;
left: 0;
top: 0;
}
#contact .container {
padding-top:47px;
}
#contact h3 {
text-transform:inherit;
color: #373737;
}
#contact-section h3 {
margin-bottom: 25px
}
#contact address {
font-size: 18px;
color: #373737;
}
.contact-text {
margin-bottom: 35px;
display: block;
}
#contact-section .form-control {
border-color: #ae750d;
box-shadow:none;
outline: 0 none;
border-radius: 0;
color: #797979;
font-size: 18px;
}
#contact-section .form-control:focus {
border-color: #ae750d;
}
#contact-section input {
height: 44px;
}
#contact-section textarea {
height: 90px;
resize:none;
}
#contact-section .btn-primary {
background-color: #373737;
color: #f7ab24;
border: none;
font-size: 24px;
padding: 6px 42px;
margin-bottom: 110px;
margin-top: 10px
}
#contact-section .btn-primary:hover {
background-color: #212020;
color: #fff
}
/*************************
******Footer CSS****
**************************/
#footer {
background-color: #212121;
background-image: url("../images/footer-bg.jpg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
color: #FFFFFF;
font-size: 20px;
padding: 35px 0;
}
#footer a {
color:#f7ab24
}
#footer a:hover {
color:#ff0080
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Melodie Rooker Music</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<script src="https://use.fontawesome.com/6740b2e08a.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->
<body>
<header id="header" role="banner">
<div class="main-nav">
<div class="container">
<div class="header-top">
<div class="pull-right social-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-apple"></i>
<i class="fa fa-spotify"></i>
</div>
</div>
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img class="img-responsive" src="images/logo.png" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll active">Home</li>
<li class="scroll">Explore</li>
<li class="scroll">Biography</li>
<li class="no-scroll">Sample</li>
<li class="scroll">Contact</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<!--/#header-->
<section id="home">
<div id="main-slider" class="carousel slide" data-ride="carousel">
<!-- <ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol> -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="images/slider/bg1.jpg" alt="slider">
<!-- <div class="carousel-caption">
<h2>register for our next event </h2>
<h4>full event package only #$199</h4>
GRAB YOUR TICKETS <i class="fa fa-angle-right"></i>
</div> -->
</div>
<!--<div class="item">
<img class="img-responsive" src="images/slider/bg2.jpg" alt="slider">
<div class="carousel-caption">
<h2>register for our next event </h2>
<h4>full event package only #$199</h4>
GRAB YOUR TICKETS <i class="fa fa-angle-right"></i>
</div>
</div>
<div class="item">
<img class="img-responsive" src="images/slider/bg3.jpg" alt="slider">
<div class="carousel-caption">
<h2>register for our next event </h2>
<h4>full event package only #$199</h4>
</i>
</div>
</div>
</div>
</div> -->
</section>
<!--/#home-->
<section id="explore">
<div class="container">
<div class="row">
<div class="watch">
<img class="img-responsive" src="images/watch.png" alt="">
</div>
<div class="col-md-4 col-md-offset-2 col-sm-5">
<h2>Upcoming Show<br>McLeod's Publick House</h2>
</div>
<div class="col-sm-7 col-md-6">
<ul id="countdown">
<li>
<span class="days time-font">00</span>
<p>days </p>
</li>
<li>
<span class="hours time-font">00</span>
<p class="">hours </p>
</li>
<li>
<span class="minutes time-font">00</span>
<p class="">minutes</p>
</li>
<li>
<span class="seconds time-font">00</span>
<p class="">seconds</p>
</li>
</ul>
</div>
</div>
<div class="cart">
<i class="fa fa-map-o"></i> <span>Get Directions</span>
</div>
</div>
</section><!--/#explore-->
<section id="event">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-9">
<div id="event-carousel" class="carousel slide" data-interval="false">
<h2 class="heading">Explore</h2>
<a class="even-control-left" href="#event-carousel" data-slide="prev"><i class="fa fa-angle-left"></i></a>
<a class="even-control-right" href="#event-carousel" data-slide="next"><i class="fa fa-angle-right"></i></a>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/melodie-ricky.jpg" alt="Melodie and Ricky Rooker">
<h4>Melodie and Ricky Rooker</h4>
<h5>vocals, lead guitar</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/loudboyz.jpg" alt="Melodie Rooker and the Loud Boyz">
<h4>Melodie Rooker</h4>
<h5>and the Loud Boyz</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/mcleods-family.jpg" alt="We had such a blast playing at McLeod's Publick House in Dothan, AL last night! We got invited to be part of the family, which means our poster got autographed and put up on the wall!">
<h4>McLeod's Publick House</h4>
<h5>We became a part of the "family"</h5>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/studio.jpg" alt="Melodie at FAME Studios in Muscle Shoals, Alabama">
<h4>FAME Studios</h4>
<h5>Muscle Shoals, AL</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/ricky.jpg" alt="Ricky Rooker at FAME Studios in Muscle Shoals, Alabama">
<h4>FAME Studios</h4>
<h5>Muscle Shoals, AL</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="guitar">
<img class="img-responsive" src="images/guitar.png" alt="guitar">
</div>
</div>
</div>
</section><!--/#event-->
<section id="about">
<div class="guitar2">
<img class="img-responsive" src="images/guitar2.jpg" alt="guitar">
</div>
<div class="about-content">
<h2>Biography</h2>
<p><stron>Melodie Rooker is a singer/songwriter based out of Nashville, TN. She has been singing since the day she was old enough to hold a microphone, and has fronted bands in Missouri, Mississippi, and Tennessee. Her current band, the Loud Boyz, consists of a rhythm/lead guitar (Ricky Rooker), bass (Colton Everhart), and drums (Justin Parker). Melodie Rooker & the Loud Boyz play Country, Blues, & Rock 'n Roll (all the good stuff)! Their shows are extremely high energy and interactive. All in all, this 4-piece band packs a powerful punch!<br><br>Melodie & the Loud Boyz are signed with Old Dog's Records based out of Nashville, TN. They have been interviewed on KTXR FM 101.3 (The Outlaw), and Browne Hill Radio (Africa).<br><br>Melodie Rooker & the Loud Boyz can play up to a 5 hour show, and can tweak their set list to play what the particular crowd wants to hear. They are open to traveling anywhere, and are available now for booking.</strong></p>
</div>
</section><!--/#about-->
<section id="twitter">
<div class="container">
<div class="row">
<div class="col-md-12">
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293251580&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>
</div>
</section><!--/#twitter-feed-->
<section id="contact">
<!-- <div id="map">
<div id="gmap-wrap">
<div id="gmap">
</div>
</div>
</div><!--/#map-->
<div class="contact-section">
<div class="ear-piece">
<img class="img-responsive" src="images/ear-piece.png" alt="">
</div>
<div class="container">
<div class="row">
<div class="col-sm-3 col-sm-offset-4">
<div class="contact-text">
<h3>Contact</h3>
<address>
E-mail: melodie#melodierookermusic.com<br>
Phone: (417) 771-9817<br>
</address>
</div>
<div class="contact-address">
<h3>Find me in</h3>
<address>
Nashville, TN
</address>
</div>
</div>
<div class="col-sm-5">
<div id="contact-section">
<h3>Send a message</h3>
<div class="status alert alert-success" style="display: none"></div>
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php">
<div class="form-group">
<input type="text" name="name" class="form-control" required="required" placeholder="Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" required="required" placeholder="Email">
</div>
<div class="form-group">
<textarea name="message" id="message" required="required" class="form-control" rows="4" placeholder="Enter your message"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right">Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/#contact-->
<footer id="footer">
<div class="container">
<div class="text-center">
<p> Copyright ©2017 Melodie Rooker All Rights Reserved</p>
</div>
</div>
</footer>
<!--/#footer-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/gmaps.js"></script>
<script type="text/javascript" src="js/smoothscroll.js"></script>
<script type="text/javascript" src="js/jquery.parallax.js"></script>
<script type="text/javascript" src="js/coundown-timer.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="js/jquery.nav.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
You are using Bootstrap, but you're not taking full advantage of Bootstrap's Grid System and positioning.
You can also check out Bootstrap Examples to find existing HTML structures that you can look at, copy and use.
In your case, the issue is that your .navbar-brand is using a fixed width instead of a responsive width set in percentages. This means that when you scale down the client window to Mobile size, your CSS still say that your .navbar-brand is suppose to be width: 435px;, which gives too little space for the button to appear on the same row.
If you don't want to use the Bootstrap Exampels that I linked to above, or the Bootstrap Grid System taht I also linked to above, you can solve this issue with a CSS Media Query.
For example:
#media(max-width: 767px) {
.navbar-brand {
width: 300px;
}
}
That would change the width of your .navbar-brand to 300px whenever the device has a smaller width than 768px (Usually considered mobile devices). However I suggest that you look at the two first links if you're already using Bootstrap.
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;
}
}