This is my A Tag highlighted through tabbing
Question:
why is there a weird space on the right side?
How can i fix it but the layout stays the same?
Code:
#servers img {
border-radius: 50%;
}
#servers a {
margin: 10px;
color: transparent;
padding: 0;
}
.row {
display: block;
}
<div id="servers" class="row">
<a href="/servers/censored">
<img class="server-censored" width="60" height="60" src="https://cdn.discordapp.com/icons/322699372443729931/302e4cc925c9f18d6f3e36a8499e1c1d.png" alt="censored">
</a>
<a href="/servers/censored">
<img class="server-censored" width="60" height="60" src="https://i.imgur.com/fFReq20.png" alt="censored">
</a>
</div>
Context:
I set the row display to block because Edge otherwise sets it to flex and then all the links are not side by side but beneath each other
with display: block
without display: block even with flex-direction: row
i set the a color to transparent because otherwise there is a blue line left to the image (visited link i think)
Github: HTML
CSS
Is this what you're looking for?
I'd display: flex on the row and then display: block on the anchors.
Also, outline: 0 should get rid of the blue outline.
[EDIT]
I used your HTML and CSS and found `.row>* { width: 100% } to be the culprit.
Adding the following solves your issue, I believe:
#servers a {
width: auto;
}
:root {
--scrollbar-color: #909090;
--scrollbar-hover: #606060;
--background: var(--bs-gray-dark);
--text: #fff;
--list-item: var(--bs-gray);
--text-secondary: #6c757d !important;
}
#media (prefers-color-scheme: light) {
:root {
--background: var(--bs-white);
--text: #000;
--list-item: var(--bs-light);
}
}
body {
background: var(--background);
color: var(--text);
overflow-x: hidden;
}
var {
color: var(--text);
}
.column {
float: left;
padding-left: 5px;
}
#usermenu::after {
content: "";
clear: both;
display: table;
}
.dropdown-item,
.dropdown-menu {
background-color: var(--text-secondary);
color: var(--text);
}
#media (min-width: 991.98px) {
main {
padding-left: 240px;
}
}
.list-group-item {
background-color: var(--list-item);
}
/* Sidebar */
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
padding: 58px 0 0;
/* Height of navbar */
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
width: 240px;
z-index: 600;
}
#media (max-width: 991.98px) {
.sidebar {
width: 100%;
}
}
.sidebar .active {
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: 0.5rem;
overflow-x: hidden;
overflow-y: auto;
}
#servers img {
border-radius: 50%;
}
#servers a {
margin: 10px;
color: transparent;
/* display: block; */
padding: 0;
}
.row {
display: block;
}
.grayscale {
filter: grayscale(100%) blur(0.5px) opacity(50%);
}
#media only screen and (min-width: 600px) {
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border-width: 4px;
border-color: transparent;
border-style: solid;
background-clip: content-box;
background-color: var(--scrollbar-color);
}
::-webkit-scrollbar-thumb:hover {
border-radius: 8px;
border-width: 4px;
border-color: transparent;
border-style: solid;
background-clip: content-box;
background-color: var(--scrollbar-hover);
}
}
#servers a {
width: auto;
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Servers | Discord Music Bot</title>
<link rel="shortcut icon" type="image/gif" href="/Music.gif">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css"
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css" />
</head>
<body>
<section class="main">
<header>
<!-- Navbar -->
<nav id="main-navbar" class="navbar navbar-expand-lg navbar-light fixed-top">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#sidebarMenu"
aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"
onclick="function re(){ let r = $('#sidebarMenu'); if(r.hasClass('collapse'))r.removeClass('collapse');else r.addClass('collapse')}re()">
<i class="fas fa-bars"></i>
</button>
<!-- Brand -->
<a class="navbar-brand" href="/">
<img src="/Music.gif" height="40" alt="" loading="lazy" />
<var>WEB.SERVERS.SERVERS</var>
</a>
<div>
<h1 class="server-name"></h1>
</div>
<div id="usermenu" class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<div class="column">
<img id="usericon" src="" width="25"></img>
</div>
<div class="column">
<h4 id="username"></h4>
</div>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="/logout"><var>WEB.SIDE.LOGOUT</var></a></li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Sidebar -->
<nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse">
<div class="position-sticky">
<div class="list-group list-group-flush mx-3 mt-4">
<a href="/dashboard" class="list-group-item list-group-item-action py-2 ripple" aria-current="true">
<i class="fas fa-tachometer-alt fa-fw me-3"></i><span><var>WEB.SIDE.DASHBOARD</var></span>
</a>
<a href="/servers" class="list-group-item list-group-item-action py-2 ripple active">
<i class="fas fa-server fa-fw me-3"></i><span><var>WEB.SIDE.SERVERS</var></span>
</a>
</div>
</div>
</nav>
<!-- Sidebar -->
</header>
<main style="margin-top: 58px;">
<div class="container pt-4">
<section>
<h1><var>WEB.SERVERS.SELECT</var></h1>
<div id="servers" class="row">
<a href="#">
<img class="server-censored" width="60" height="60" src="https://cdn.discordapp.com/icons/322699372443729931/302e4cc925c9f18d6f3e36a8499e1c1d.png" alt="censored">
</a>
<a href="#">
<img class="server-censored" width="60" height="60" src="https://i.imgur.com/fFReq20.png" alt="censored">
</a>
</div>
</section>
</div>
</main>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
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;
}
}
body{
font-size: 16px;
color: #fff;
background-color: lightskyblue;
font-family: 'Nunito', sans-serif;
}
#header-nav{
background-color: white;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/logotild1.png') no-repeat;
width: 170px;
height: 100px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding-top: 25px;
margin-top: 25px;
}
.navbar-image, .navbar-brand{
float: left;
}
.navbar-brand h1 { /* Restaurant name */
font-family: 'Nunito', sans-serif;
color: lightskyblue;
font-size: 1.5em;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus {
text-decoration: none;
}
#nav-list {
margin-top: 10px;
}
#nav-list a {
color: black;
text-align: center;
}
#nav-list a:hover {
background: #E7E7E7;
}
#nav-list a span {
font-size: 1.8em;
}
#navBarlist{
font-size: 1.2em;
}
#smallpic{
margin-top: 30px;
}
.navbar-header button.navbar-toggler, .navbar-header .navbar-toggler-icon {
border: 1px solid lightgrey;
}
.navbar-header button.navbar-toggler{
clear: both;
}
.panel-footer{
position: absolute;
margin-top: 30px;
padding-top: 35px;
padding-bottom: 30px;
background-color: #222;
border-top: 0;
width: 100%;
}
.panel-footer div.row{
margin-bottom: 35px;
}
#om{
line-height: 2;
}
/* HOME PAGE */
.container .jumbotron {
box-shadow: 0 0 50px white;
border: 2px solid white;
}
#tøj-tile, #face-tile, #andet-tile{
height: 250px;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
position: relative;
border: 2px solid whitesmoke;
overflow: hidden;
}
#tøj-tile:hover, #andet-tile:hover, #face-tile:hover{
box-shadow: 0 1px 5px 1px black;
}
#tøj-tile{
background: url('../images/tøjtile.png') no-repeat;
background-position: center;
}
#andet-tile{
background: url('../images/andettile.png') no-repeat;
background-position: center;
}
#face-tile{
background: url('../images/facetile.png') no-repeat;
background-position: center;
}
#tøj-tile span, #andet-tile span, #face-tile span{
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
text-transform: uppercase;
background-color: #000;
color: #fff;
opacity: .8;
}
/********** Large devices only **********/
#media (min-width: 1200px) {
.container .jumbotron {
background: url('../images/storbilledweb.jpg') no-repeat;
height: 675px;
}
#tøj-tile, #andet-tile, #face-tile{
width: 360px;
margin: 0 auto 15px;
}
}
/********** Medium devices only **********/
#media (min-width: 992px) and (max-width: 1199px) {
/* Header */
/* End Header */
.container .jumbotron {
background: url('../images/mediumbillede.jpg') no-repeat;
height: 558px;
}
}
/********** Small devices only **********/
#media (min-width: 768px) and (max-width: 991px) {
.container .jumbotron {
background: url('../images/lillebillede.jpg') no-repeat;
height: 432px;
}
}
/********** Extra small devices only **********/
#media (max-width: 767px) {
.navbar-brand{
padding-top: 10px;
height: 80px;
}
.navbar-brand h1{
padding-top: 10px;
font-size: 5vw;
}
#tøj-tile, #andet-tile, #face-tile{
width: 360px;
margin: 0 auto 15px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<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>Tilde & brdr</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<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=Nunito:wght#300&display=swap" rel="stylesheet">
<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=Nunito:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-expand-lg navbar-light-bg-light">
<div class="container">
<div class="navbar-header">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navBarlist"
aria-controls="navBarlist"
aria-expanded="false"
aria-label="Toggle navigation">
<span
class="navbar-toggler-icon">
</span>
</button>
<a
href="index.html"
class ="navbar-image float-left d-none d-sm-block"
>
<div
id = "logo-img"
alt="Logo image"
>
</div>
</a>
<div
class="navbar-brand">
<a
href="index.html">
<h1>Tilde & Brdr.</h1>
</a>
</div>
</div>
</div>
<div
class="collapse navbar-collapse"
id="navBarlist"
>
<ul
id = "nav-list"
class="navbar-nav ml-auto">
<li
class="nav-item">
<a
class="nav-link"
href="#">
Home
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Tøj
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Udsalg
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Kontakt
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Facebook
</a>
</li>
</ul>
</div>
</nav>
</header>
<div id="main-content" class="container">
<div class="jumbotron" id="smallpic">
<img src="images/lillebillede.jpg" alt="Picture of clothing"
class="img-fluid d-block d-sm-none">
</div>
<div id="home-tiles" class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="tøj-categories.html">
<div id="tøj-tile">
<span>tøj</span>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="andet-category.html">
<div id="andet-tile">
<span>andet</span>
</div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="face-category.html">
<div id="face-tile">
<span>facebook</span>
</div>
</a>
</div>
</div><!-- End of #home-tiles -->
<footer class="panel-footer">
<div id="footi"class="container">
<div class="row">
<section id="kontakt" class="col-sm-4">
<span>Kontakt:</span><br>
Email: blablabla#bla.dk<br>
Facebook<br>
Tlf: 09010222<br>
</section>
<section id="om" class="col-sm-4">
Alt er hjemmesyet/hjemmelavet af mig.<br>
Dette er min hobby, derfor kan der være længere leveringstid på nogen ordre, men kontakt mig, så vi kan finde ud af noget nærmere. Jeg håber I synes noget af det jeg laver vækker en interesse.
</section>
<section id="bla" class="col-sm-4">
blablabla blablabla ballbsldablal alablslbalslbalslasal alablsblasalalsa
</section>
</footer>
</div>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-3.6.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I've encountered a problem where I get some space between the browser-edge and the footer. I can tell that the size of the footer isnt big enough. The width I've set to 100% but obviously that isn't the problem. Can any1 explain to me what I'm missing?
It started out by having the same space on both left and right, but putting position:absolute somehow solved the right side. No idea what to do with the left side.
You need to override default body margin and set it to 0
body {
font-size: 16px;
color: #fff;
background-color: lightskyblue;
font-family: 'Nunito', sans-serif;
margin: 0;
}
I am fairly new to coding and have a specific issue that I cannot figure out. I have a container that I want positioned differently based on the screen size. For large and mid-sized screens, I want the container left justified with a small amount of padding from the left edge, and on small screens, I want the container centered. I am using bootstraps, html, and css. See my style and code below. The container is overtop of a background image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Website Name</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700&display=swap" />
<!-- MDB -->
<link rel="stylesheet" href="css/mdb.min.css" />
</head>
<style>
#media (min-width: 100%) {
#intro {
min-width: 100%;
margin-right: none;
margin-top: -58.59px;
background-color: none;
}
}
.alfa {
position: absolute;
max-width: inherit;
margin-top: 55vh;
align-items: center;
justify-content: center;
background-color: white;
color: black;
border: lightgrey;
border-style: solid;
border-width: thin;
border-radius: 0em;
font-size: 1em;
padding: 1rem 1rem 1rem 1rem;
box-shadow: 0 0 20px black
}
.no-pad {
margin-right: 0rem;
margin-left: 0rem;
}
.navbar-brand {
margin-left: 1rem;
}
.nav-item {
margin-right: 1rem;
}
.row {
font-size: 1.5em;
}
.main-button {
display: inline-flex;
align-items: center;
justify-content: center;
}
#button1 {
font-size: 1.5em;
}
</style>
<body>
<!-- Header Bar -->
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="">My Accounting Exec</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i title="" class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Services</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Pricing</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">About</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- Background-Image -->
<container>
<div class="bg-image" style="background-image: url('../MDB5-STANDARD-UI-KIT-Free-3.5.1/img/Accountant.jpg'); height: 89vh;">
<div class="Alert-Box text-center">
<div class="alfa text-center;">
<h5><b>Text Text Text</b></h5>
<div><button id="button1" type="button" class="btn btn-primary">WE ARE HERE FOR YOU!</button></div>
</div>
</div>
</div>
</container>
<!-- Service Links -->
<div class="row no-pad text-center">
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
background-color: lightgrey;
height: 4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(210, 210, 210); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 1</b></button>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(180, 180, 180);height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 2</b></button>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(160, 160, 160); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 3</b></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center"
style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;"></style>
<button href=""
style="border: none; background-color: rgb(140, 140, 140); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 4</b></a>
</div>
</div>
<!-- End your project here-->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>
Without reading through all of your code, you need proper media queries that establish generalized rules and mobile only rules: ie
.container {
/* CODE TO LEFT ALIGN CONTENT + padding */
}
#media only screen and (max-width: 768px) {
.container {
/* CODE TO CENTER CONTENT*/
}
}
That way you can have generalized rules and target specific screen size treshholds.
Hope that makes sense for you.
I am trying to apply some styling rule to three #id selectors in a media query however it does not seem to be working. However if I do the same outside the query, it is working fine (but unfortunately I just need that rule for that particular screen size. What i am trying to achieve is to adjust the margins of the div according to the image size when the screen size is below 767px (there is a gap on left and right side).
Thank you!
body {
background-color: #fffffe;
}
.container{
margin: 0;
}
/** HEADER **/
#header-nav{
background-color: #5d46ea;
height: 78px;
border: 0;
}
#logo-img { /** Logo **/
background: url(../images/imgonline-com-ua-resize-wU3umxGfKn8Y0H6h.jpg) no-repeat;
width: 150px;
height: 62px;
margin-left: 20px;
margin-right: 20px;
}
.navbar-brand h1 { /** Blog Name **/
color: #fd9200;
font-family: 'oxygen', sans-serif;
font-size: 1.4em;
font-weight: bold;
text-transform: uppercase;
padding: 10px;
}
#nav-list a {
color: #fd9200;
font-weight: bold;
background: #5d46ea;
}
#nav-list a:hover{
background: #684fff;
}
.custom-toggler.navbar-toggler {
border: 1px solid rgb(253, 146, 0);
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(253, 146, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/** HOME PAGE **/
.container {
margin-top: 10px;
}
.jumbotron {
background-color: #ffffff;
border: 2px solid #5d46ea;
box-shadow: 0 0 10px #5d46ea;
padding: 0;
margin: 0;
}
.row {
margin-top: 15px;
}
#main-tile, #dessert-tile, #smoothie-tile {
height: 250px;
width: 100%;
margin-bottom: 15px;
position: relative;
border: 2px solid #5d46ea;
box-shadow: 0 0 10px #5d46ea;
overflow: hidden;
}
#main-tile:hover, #dessert-tile:hover, #smoothie-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
}
#main-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#dessert-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#smoothie-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#main-tile span, #dessert-tile span, #smoothie-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.2em;
text-transform: uppercase;
background-color: #6a6a6a;
color: #fff;
opacity: .8;
}
/* END HOME PAGE */
/*************** MEDIA QUERIES ***************/
/** LARGE DEVICE **/
#media (min-width:1200px) {
.jumbotron {
background: url(https://via.placeholder.com/1200X675) no-repeat;
height: 675px;
}
}
/** MEDIUM DEVICE **/
#media (min-width:992px) and (max-width: 1199px) {
.jumbotron {
background: url(https://via.placeholder.com/992x558) no-repeat;
height: 558px;
}
}
/** SMALL DEVICE **/
#media (min-width: 768px) and (max-width: 991px) {
.jumbotron {
background: url(https://via.placeholder.com/768x432) no-repeat;
height: 432px;
}
}
/** EXTRA SMALL DEVICES **/
#media (min-width:767px) and (max-width: 576px){
.jumbotron {
background: url(https://via.placeholder.com/768x432) no-repeat;
height: 432px;
}
#main-tile, #dessert-tile, #smoothie-tile{
width: 360px;
margin: 0 auto 15px;
}
}
/** SUPER EXTRA SMALL DEVICES **/
#media (max-width: 479px) {
#main-tile, #dessert-tile, #smoothie-tile {
width: 280px;
margin: 0 auto 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-witdth, initial-scale=1">
<title>Food Blog</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- HEADER -->
<header>
<nav id="header-nav" class="navbar navbar-light navbar-expand-lg">
<div class="navbar-header">
<a href="index.html" class="float-left d-none d-md-block">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<h1>Brand Name</h1>
</div>
</div>
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul id="nav-list" class="navbar-nav ml-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#">Main</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dessert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Smoothie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT -->
<div id="main-content" class="container mx-auto">
<!-- JUMBOTRON -->
<div class="jumbotron text-center"> <!-- FEATURED RECIPE -->
<img src="https://via.placeholder.com/768X432" alt="New Recipe Image" class="img-fluid d-block d-md-none">
</div>
<!-- TILES BELOW THE JUMBOTRON -->
<div id="home-tiles" class="row text-center">
<div class="col-md-4 col-sm-6 col-xs-12">
<div id="main-tile"><span>Mains</span></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div id="dessert-tile"><span>Deserts</span></div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<div id="smoothie-tile"><span>Smoothies</span></div>
</div>
</div>
</div>
<!-- END OF MAIN CONTENT -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
This line in your code is the problem:
#media (min-width:767px) and (max-width: 576px){ ...
In your code this applies to all widths wider than 767 and all widths smaller than 576px. I suppose it should be like this instead:
#media (max-width:767px) and (min-width: 576px){ ...
...to cover widths between 576 and 767px
ADDITION after comments:
I added this (general) rule:
.jumbotron img {
max-width: 100%;
}
Otherwise the image inside the jumbotron would appear at its original size an overflow the jumbotron at smaller screen sizes, therefore also making the whole page wider / forcing a scrollbar.
body {
background-color: #fffffe;
}
.container {
margin: 0;
}
/** HEADER **/
#header-nav {
background-color: #5d46ea;
height: 78px;
border: 0;
}
#logo-img {
/** Logo **/
background: url(../images/imgonline-com-ua-resize-wU3umxGfKn8Y0H6h.jpg) no-repeat;
width: 150px;
height: 62px;
margin-left: 20px;
margin-right: 20px;
}
.navbar-brand h1 {
/** Blog Name **/
color: #fd9200;
font-family: 'oxygen', sans-serif;
font-size: 1.4em;
font-weight: bold;
text-transform: uppercase;
padding: 10px;
}
#nav-list a {
color: #fd9200;
font-weight: bold;
background: #5d46ea;
}
#nav-list a:hover {
background: #684fff;
}
.custom-toggler.navbar-toggler {
border: 1px solid rgb(253, 146, 0);
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(253, 146, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/** HOME PAGE **/
.container {
margin-top: 10px;
}
.jumbotron {
background-color: #ffffff;
border: 2px solid #5d46ea;
box-shadow: 0 0 10px #5d46ea;
padding: 0;
margin: 0;
}
.jumbotron img {
max-width: 100%;
}
.row {
margin-top: 15px;
}
#main-tile,
#dessert-tile,
#smoothie-tile {
height: 250px;
width: 100%;
margin-bottom: 15px;
position: relative;
border: 2px solid #5d46ea;
box-shadow: 0 0 10px #5d46ea;
overflow: hidden;
}
#main-tile:hover,
#dessert-tile:hover,
#smoothie-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
}
#main-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#dessert-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#smoothie-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#main-tile span,
#dessert-tile span,
#smoothie-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.2em;
text-transform: uppercase;
background-color: #6a6a6a;
color: #fff;
opacity: .8;
}
/* END HOME PAGE */
/*************** MEDIA QUERIES ***************/
/** LARGE DEVICE **/
#media (min-width:1200px) {
.jumbotron {
background: url(https://via.placeholder.com/1200X675) no-repeat;
height: 675px;
}
}
/** MEDIUM DEVICE **/
#media (min-width:992px) and (max-width: 1199px) {
.jumbotron {
background: url(https://via.placeholder.com/992x558) no-repeat;
height: 558px;
}
}
/** SMALL DEVICE **/
#media (min-width: 768px) and (max-width: 991px) {
.jumbotron {
background: url(https://via.placeholder.com/768x432) no-repeat;
height: 432px;
}
}
/** EXTRA SMALL DEVICES **/
#media (max-width:767px) and (min-width: 576px) {
.jumbotron {
background: url(https://via.placeholder.com/768x432) no-repeat;
height: 432px;
}
#main-tile,
#dessert-tile,
#smoothie-tile {
width: 360px;
margin: 0 auto 15px;
}
}
/** SUPER EXTRA SMALL DEVICES **/
#media (max-width: 479px) {
#main-tile,
#dessert-tile,
#smoothie-tile {
width: 280px;
margin: 0 auto 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-witdth, initial-scale=1">
<title>Food Blog</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- HEADER -->
<header>
<nav id="header-nav" class="navbar navbar-light navbar-expand-lg">
<div class="navbar-header">
<a href="index.html" class="float-left d-none d-md-block">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>Brand Name</h1>
</a>
</div>
</div>
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul id="nav-list" class="navbar-nav ml-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#">Main</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dessert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Smoothie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT -->
<div id="main-content" class="container mx-auto">
<!-- JUMBOTRON -->
<div class="jumbotron text-center">
<!-- FEATURED RECIPE -->
<img src="https://via.placeholder.com/768X432" alt="New Recipe Image" class="img-fluid d-block d-md-none">
</div>
<!-- TILES BELOW THE JUMBOTRON -->
<div id="home-tiles" class="row text-center">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="menu-categories.html">
<div id="main-tile"><span>Mains</span></div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="menu-categories.html">
<div id="dessert-tile"><span>Deserts</span></div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="menu-categories.html">
<div id="smoothie-tile"><span>Smoothies</span></div>
</a>
</div>
</div>
</div>
<!-- END OF MAIN CONTENT -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I've been having a hard time getting the hamburger menu to work onnce the screen size decreases to anything below 1200px. How can I get my list items to show up below my top nav bar?
This is what I have so far:
.mainBackground {
background-image: url('https://res.cloudinary.com/knaguibimages/image/upload/o_65/v1474765365/Background_p3qqpv.jpg');
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#media screen and (min-width: 1200px) {
.body-wrapper {
padding-left: 80px;
}
}
#media screen and (min-width: 1200px) {
.navbar {
width: 80px;
max-width: 80px;
position: fixed;
top: 0;
left: 0;
height: 100%;
border: 0;
border-radius: 0;
text-align: center;
}
}
.navbar {
z-index: 10000;
background: rgba(30, 30, 31, 0.85);
}
#media screen and (max-width: 1200px) {
.navbar-header {
float: left;
padding: 0 40px;
}
}
.navbar-brand {
padding: 50px 0 50px 25px;
float: left;
height: auto;
}
#media screen and (min-width: 1200px) {
.navbar-brand {
position: relative;
box-shadow: none;
margin: 12px 0;
}
}
ul li a span {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
.btn.responsive-menu {
display: none;
}
#media screen and (max-width: 1200px) {
.btn.responsive-menu {
margin: 45px 50px 0 0;
display: inline-block;
float: right;
}
}
.btn {
color: #0067b5;
background: none;
border: 2px solid;
-webkit-transition: all 200ms ease-in;
}
.current {
color: white;
}
section {
padding-top: 50px;
padding-left: 50px;
padding-right: 70px;
margin-bottom: 106px;
}
section .box {
padding: 50px;
background-color: rgba(0, 0, 0, 0.75);
}
.section-title {
margin-bottom: 20px;
font-size: 22px;
line-height: 28px;
color: white;
}
#aboutMe-responsive {
display: none;
}
#myPortfolio-responsive {
display: none;
}
#contactMe-responsive {
display: none;
}
#aboutMe {
padding: 0 50px 20px 0;
}
#myPortfolio {
padding: 0 50px 20px 0;
}
#contactMe {
padding: 0 50px 20px 0;
}
#media screen and (max-width: 1200px) {
#aboutMe {
display: none;
}
#myPortfolio {
display: none;
}
#contactMe {
display: none;
}
#aboutMe-responsive {
display: inline;
}
#myPortfolio-responsive {
display: inline;
}
#contactMe-responsive {
display: inline;
}
}
.frame {
position: relative;
border: 4px solid;
border-color: rgba(0, 0, 0, 0.5);
overflow: hidden;
margin: 0 0 15px 0;
}
p {
font-size: 15px;
line-height: 30px;
letter-spacing: 0.3px;
color: white;
}
<!--Navigation- Bar-->
<nav class="navbar navbar-default" role="navigation">
<!--Navbar header-->
<div class="navbar-header">
<!-- Logo -->
<div class="navbar-brand text-center">
<!-- <a href="#"> -->
<i id="home" class="fa fa-home fa-2x"></i>
<!-- </a> -->
</div>
</div>
<!--Hamburger menu-->
<a class="btn responsive-menu" data-toggle="collapse" data-target=".navbar-collapse">
<i id="hamburger-menu" class="fa fa-bars fa-2x"></i>
</a>
<!--Navbar Icon Section Navigation-->
<!-- Add "in" when you want to collapse nav bar -->
<div id="nav-section-selection" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!--About Me-->
<li>
<a href="#about">
<i id="aboutMe" class="fa fa-user fa-2x current"></i>
<span id="aboutMe-responsive">ABOUT ME</span>
</a>
</li>
<!--Portfolio-->
<li>
<a href="#portfolio">
<i id="myPortfolio" class="fa fa-briefcase fa-2x"></i>
<span id="myPortfolio-responsive">MY WORK</span>
</a>
</li>
<!--Contact-->
<li>
<a href="#contact">
<i id="contactMe" class="fa fa-envelope-o fa-2x"></i>
<span id="contactMe-responsive">CONTACT ME</span>
</a>
</li>
</ul>
</div>
</nav>
<!--Page Content Starts Here-->
<div id="pageContent">
<!-- About Me Section -->
<section id="about" class="about-section">
<div class="box">
<h2 class="section-title">A Little About Myself</h2>
<div class="row">
<div class="col-md-5 col-md-push-7">
<figure class="frame">
<img class="img-responsive about-me-img" src="https://res.cloudinary.com/knaguibimages/image/upload/v1474765942/ProfilePic_bvn1gs.jpg" alt="Karim Naguib Profile Picture">
</figure>
</div>
<div class="col-md-7 col-md-pull-5">
<p>Hello! My name's Karim Naguib, and this page was developed to showcase my coding talent.</p>
<p>I graduated from the University of Waterloo in 2015, with a degree in Management Engineering.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio-section">
<div class="box">
<h2 class="section-title">My Work</h2>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="box">
<h2 class="section-title">Get In Touch With Me</h2>
</div>
</section>
</div>
</div>
<!-- Footer -->
</body>
</html>
you should try this inside your navbar-header class:
<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>