I am trying to make this video embed responsive.
I succesfully made it for a tablet size and now I am trying for phone, but how to also make it responsive for when the user resizes the browser window.. for example:
This is how it should look:
And this is how it looks when resized:
The title "Overworld Roleplay" changes its position automatically, but the video doesn't, also when I resize the window the text "Last Update:" changes its position and the video changes its size, not sure why :/
It works good on bigger resolutions tho'
I use bootstrap but I am not sure how to fix this :/
This is my code:
<!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">-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Homepage | Overworld RP Devs</title>
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/maintemplate.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<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 class="navbar-brand" href="/index.html">Overworld Roleplay</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="front container">
<h1 class="text-primary" id="title" >Overworld Roleplay</h1>
<h4>Development Website</h4>
</div><!-- /.container -->
<!-- <div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="//www.youtube.com/embed/C6-TWRn0k4I"
frameborder="0" allowfullscreen></iframe>
</div> -->
<div class="video container">
<div class="col-md-8">
<div class="vid">
<iframe src="//www.youtube.com/embed/ac7KhViaVqc" frameborder="0" allowfullscreen></iframe>
<h2 class="text-info" id="last" >Last Update:</h2>
</div><!--./vid -->
</div><!--.col -->
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="/js/collapse.js"></script>
<script src="/js/transition.js"></script>
<script src="/js/tooltip.js"></script>
<script src="/js/tab.js"></script>
<script src="/js/scrollspy.js"></script>
<script src="/js/popover.js"></script>
<script src="/js/npm.js"></script>
<script src="/js/modal.js"></script>
<script src="/js/dropdown.js"></script>
<script src="/js/carrousel.js"></script>
<script src="/js/button.js"></script>
<script src="/js/alert.js"></script>
<script src="/js/affix.js"></script>
</body>
</html>
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
html, body {
background-color: black;
background: url(/images/bg.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
/*background-position: center;*/
height: 100%;
margin: 0;
}
.front {
position: absolute;
margin-left: 54%;
margin-top: 7%;
width: 46%;
}
#title {
font-size: 60px;
word-wrap: normal;
}
.vid {
width: 100%;
margin-top: 16%;
margin-left: 3%;
}
iframe {
max-width: 100%;
height: auto;
width: 78%;
height: 240px;
}
.navbar {
background-color: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.6);
border-color: rgba(0, 0, 0, 0.4);
}
.nav.navbar-nav.navbar-right li a {
color: white;
}
.navbar-default .navbar-brand {
color: white;
}
.navbar-nav>.active>a, .navbar-nav>.active>a:hover, .navbar-nav>.active>a:focus {
color:black;
}
#last {
position: absolute;
left: 5%;
top: 15%;
}
.video {
position: absolute;
}
#media only screen and (min-width:321px) and (max-width:768px) {
iframe {display: none;}
#last {display: none; }
.front {margin-left: 28%; text-wrap: nowrap; text-align: center;}
}
#media only screen and (min-width:768px) and (max-width:1024px) {
iframe {width: 500px; height: 300px; margin-top: 6%;}
}
As you can see I have two #media at the bottom which work for my tablet which is 1024x768 and for my phone which is smaller.
I've done those modifications:
.vid {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.vid iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
But now I am not sure how to resize it properly:
http://imgur.com/a/FmTjP
Add this to your CSS, it should make the video responsive when scaling down the window.
.vid {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.vid iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Related
I have a website template I am building, and for the first time wanted to try out some cool section dividers. I am using ShapeDivider App, and its working great until I go into a specific width or resolution in the Chrome developer tools since I am trying to make it all mobile friendly. In the iPad size section, I am getting a weird tiny space below the svg, and I have no clue how to fix, and I been browsing around with 0 help on the matter. The display is set as block, which is about the only advice I been reading around.
Here is my code:
html {
overflow-x: hidden;
}
body {
overflow-x: hidden;
font-family: 'Poppins', sans-serif;
margin: 0;
}
/* NAVIGATION */
#octo-logo {
width: 190px;
}
.nav-item {
font-family: 'Poppins', sans-serif;
margin-right: 30px;
font-size: 18px;
}
/* END NAVIGATION */
/* HERO */
.hero {
background-image: url("img/background.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height: 800px;
position: relative;
background-position: 50% 30%;
}
.hero-message {
padding-top: 160px;
}
.hero-message h1 {
color: #194859;
font-weight: 700;
font-size: 60px;
padding-bottom: 20px;
}
.hero-message p {
font-size: 20px;
margin-top: 20px;
}
.hero-message span {
color: rgb(49, 110, 106);
}
.hero button {
padding: 10px 20px;
background-color: #FFAD5C;
color: white;
font-weight: 700;
margin-top: 20px;
font-size: 16px;
margin-bottom: 20px;
font-family: 'Poppins', sans-serif;
}
#coral2 {
width: 100px;
position: absolute;
right: 0;
}
#coral1 {
width: 130px;
position: absolute;
bottom: 60px;
}
.custom-shape-divider-bottom-1600301955 {
position: absolute;
display: block;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1600301955 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 100px;
}
.custom-shape-divider-bottom-1600301955 .shape-fill {
fill: #FFFFFF;
}
/* END HERO */
/* MEDIA QUERIES */
/* Extra large devices (large desktops, 1200px and up) */
#media (max-width: 1200px) {
.hero-message h1 {
font-size: 45px;
}
#coral1, #coral2 {
display: none;
}
.hero-message p {
font-size: 18px;
margin-top: 10px;
}
}
/* Large devices (desktops, 992px and up) */
#media (max-width: 992px) {}
/* Medium devices (tablets, 768px and up) */
#media (max-width: 768px) {
.hero {
background-image: url("img/phonebg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 60% 80%;
}
.hero-message {
text-align: center;
padding-top: 60px;
}
.hero-message p {
display: none;
}
.custom-shape-divider-bottom-1600301955 svg {
display: none;
}
}
/* Small devices (landscape phones, 576px and up) */
#media (max-width: 576px) {
}
<!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">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>OctoDent</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<!-- Font-awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- NAVIGATION -->
<nav class="navbar navbar-expand-md navbar-dark" style="background-color: #3E96B1;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<!-- NAV CONTENT -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<img id="octo-logo" src="img/logo.png" alt="">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us<span class="sr-only">(current)</span></a>
</li>
</div>
</li>
</ul>
<!-- END NAV CONTENT -->
</div>
</nav>
<!-- END NAVIGATION -->
<!-- HERO -->
<section class="hero">
<img id="coral1" src="img/coral1.png" alt="">
<img id="coral2" src="img/coral2.png" alt="">
<div class="container">
<div class="hero-message">
<h1>A Brighter, Better <br>Dental Experience.</h1>
<p>
<span>Whether you need routine dentistry, would like to have <br>cosmetic work completed or require restoriation, we offer a <br> variety of services to suit your needs.</span>
</p>
<button class="btn" data-toggle="modal" data-target="#appointment-modal">BOOK AN APPOINTMENT</button>
</div>
</div>
<div class="custom-shape-divider-bottom-1600301955">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</section>
<!-- END HERO -->
<!-- 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>
I'm trying to make my content into 2 columns where the first will be used for a full height sidebar while the other will contain my navbar,content,footer.
Using Bootstrap 4.0
This is what i'm trying to do :
I'm using the sticky footer example from bootstrap 4 examples but when i add the row and columns , the footer is coming after the navbar instead of taking the whole html page length.
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
Sidebar
</div>
<div class="col-sm-10">
<div class="navbar">
...
</div>
<div class="content">
test1
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Test</span>
</div>
</footer>
</div>
</div>
</div>
Since you're using bootstrap with flex, you can use the power of flex to make a sticky footer - no need for giving it an absolute position.
EXAMPLE
So your html stays the same just need to add couple of layout classes. The main techique is to make .main a flex container and reposition its children in column
.main {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
}
while .content block must stretch the remaining height, thus pressing the footer to the bottom, this can be achieved with simple rule:
.content {
flex: 1;
}
more on this technique here
here is the code for it :
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px;
/* Same as the width of the sidenav */
font-size: 28px;
/* Increased text to enable scrolling */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="col-md-2 col-xs-2 col-sm-2 col-lg-2">
<div class="sidenav">
About
Services
Clients
Contact
</div>
</div>
<div class="col-md-10 col-xs-10 col-sm-10 col-lg-10">
<div class="container">
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>
Menu 1
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
<br>
<p>
<strong>Note:</strong> content goes here</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
</div>
<script src="" async defer></script>
</body>
</html>
check the fiddle:https://jsfiddle.net/zmye2pth/1/
I have got a problem with a quite simple "under construction" website for a client. I am using Bootstrap to make is responsive. But now under a width of 1024px the content does not center how it should.
Here is the code i am using:
HTML
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="logo">
<a href="#">
<img id="logo_img" src="img/logo.png">
</a>
</div>
<div id="underc">
<p>Under Construction</p>
</div>
<div id="underline">
</div>
<div id="social_media">
<a href="">
<img id="fb" src="img/facebook.png">
</a>
<a href="">
<img id="tw" src="img/twitter.png">
</a>
<a href="">
<img id="ig" src="img/instagram.png">
</a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS
body {
margin: 0;
background-image: url("../img/background2.jpg");
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#underline {
height: 5px;
background-color: #f57300;
margin-bottom: 5px;
margin-top: -20px;
width: 800px;
margin: 0 auto;
}
#logo {
padding-top: 220px;
height: 100px;
width: auto;
text-align: center;
}
#logo_img {
height: 250px;
}
#underc {
color: #f57300;
text-align: center;
padding-top: 275px;
font-family: 'Pacifico', cursive;
font-size: 80px;
}
#social_media {
padding-top: 10px;
text-align: center;
}
#fb {
height: 30px;
}
#tw {
height: 30px;
}
#ig {
height: 30px;
}
#media (max-width: 700px) {
#underline {
height: 5px;
background-color: #f57300;
margin-bottom: 5px;
margin-top: -20px;
width: 600px;
margin: 0 auto;
}
#logo {
padding-top: 220px;
height: 100px;
text-align: center;
}
#logo_img {
height: 150px;
text-align: center;
}
#underc {
color: #f57300;
text-align: center;
padding-top: 275px;
font-family: 'Pacifico', cursive;
font-size: 30px;
}
#social_media {
padding-top: 10px;
text-align: center;
}
#fb {
height: 30px;
}
#tw {
height: 30px;
}
#ig {
height: 30px;
}
}
However when the screen gets "smaller" at some stage it starts to stick on the right side of the page and it does not center.
SCREENSHOT:
the body has the min-width property
min-width: 1024px;
Erase that property or use media queries to display different sizes on different screens.
I am using bootstrap to create a website from scratch, it's the first time I use bootstrap so I might be doing something wrong.
I am trying to implement a individual scroll panel for each of the 3 content columns, and it doesn't appear to be working as the scroll appears but grayed out and not working properly
I pasted the code below using stackoverflow html app but some elements are not displaying properly so here is a link to the fully working site as of now
body {
padding-top: 159px;
overflow: hidden;
}
html {
overflow: hidden;
}
#navbar_right {}
.container {}
#categorias {
background-color: #171717;
overflow: scroll;
height: 100%;
}
#content {
background-color: #ffffff;
}
.btn {
border-radius: 0;
}
.cat {
margin: 10% 0% 10% 15%;
position: relative;
z-index: 1;
}
#right-bar {
}
/* Menu Top Navbar */
.button {
position: relative;
background-color: inherit;
border: none;
font-size: 16px;
font-family: Roboto;
color: #ffffff;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
outline: 0;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.button:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.button:after {
content: "";
background: #ffffff;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ComISTo Grupo 3</title>
<meta charset="utf-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyhttp://stackoverflow.com/questions/ask#jSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<header class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">ComISTo</a>
</div>
<div id="navbar_right" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<!-- NavBar Buttons -->
<li><button class="button" type="button" onclick="window.location='#'; class=" active ";"><img src="images/empregado.png"/><br/>Chamar Empregado</button></li>
<li><button class="button" type="button" onclick="window.location='#'; class=" active ";"><img src="images/pagar.png"/></br>Pagar</button></li>
<li><button class="button" type="button" onclick="window.location='#'; class=" active ";"><img src="images/ajuda.png"/><br/>Ajuda</button></li>
</ul>
</div>
</header>
</nav>
<div class="container-fluid">
<!-- Content -->
<div class="row">
<!-- Sidebar -->
<div class="col-md-2" id="categorias">
<img src="images/broccoli.png" /></br> Vegetariano
<img src="images/steak.png" /></br> Carne
<img src="images/fish.png" /></br> Peixe
<img src="images/glass.png" /></br> Vinhos
<img src="images/ice-cream.png" /></br> Sobremesa
</div>
<div class="col-md-6" id="content">
</div>
<div class="col-md-4" id="rightbar"></div>
</div>
</div>
</body>
</html>
I think that the problem is that the height of the #categorias column is set to 100%, you should give a specific height. Try something like:
#categorias {
height: 400px
}
I am trying to make some text responsive. For some reason, media queries are not working and the font is pushed below the image, whereas it should be above.
Here is my code:
// Bootstrap callback test
if ($('#bootstrapCssTest').is(':visible') === true) {
$('<link href="/bootstrap/js/bootstrap.min.js" rel="stylesheet" type="text/css" />').appendTo('head');
}
// Make .navbarButtonDiv go to its child 'a' tag's href on click
$(".navbarButtonDiv").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
// Collapse navbar on nav link click
$(document).on('click', '.navbar-collapse.in', function(e) {
if ($(e.target).is('a')) {
$(this).collapse('hide');
}
});
// Collapse navbar on document click
$(document).on('click', function() {
$('.collapse').collapse('hide');
});
/* Font imports */
#import url(https://fonts.googleapis.com/css?family=Bitter:400,400italic,700);
#font-face {
font-family: "FuturaNewLight";
src: url("fonts/FuturaNewLight.otf")
}
/* Navbar padding */
body {
padding-top: 100px;
overflow-x: hidden !important;
}
/* Navbar */
.navbar {
font-family: "Bitter", serif;
}
.navbar.navbar-custom .navbar-brand.navbar-brand-centered {
position: absolute;
left: 50%;
top: 0;
display: block;
width: 100px;
text-align: center;
padding: 0;
}
.navbar.navbar-custom > .wrapper .navbar-brand.navbar-brand-centered {
margin-left: -55px;
margin-top: 10px;
}
.navbar .nav.navbar-nav {
font-size: 150%;
}
.navbar-logo {
height: 145%;
}
/* Media queries */
#media (min-width: 768px) {
.wrapper {
padding-right: 15px;
}
.navbar.navbar-custom .navbar-nav > li > a {
line-height: 60px;
transition: background 200ms linear;
}
.navbar.navbar-custom .navbar-nav > li > a:hover {
background: #96D5FF;
}
}
#media (max-width: 767px) {
.navbar.navbar-custom {
padding: 20px 0;
}
.navbar.navbar-custom .navbar-collapse {
margin: 20px 0 -20px;
border: none;
box-shadow: none;
height: 260px;
}
.navbar.navbar-custom .navbar-nav > li > a {
text-align: center;
}
.navbar-logo {
margin-left: 20px;
height: 110%;
}
.futuraNewLightHeader {
font-size: 20px;
}
}
/* Header styling */
#jumbotronHeader {
position: relative;
font-family: "Bitter", serif;
width: 100%;
bottom: 9px;
}
#homePageImage {
position: relative;
-webkit-filter: blur(5px);
filter: blur(5px);
bottom: 30px;
z-index: -1;
width: 70%;
}
/* Font styling */
.futuraNewLightHeader {
position: absolute;
top: 550px;
font-size: 150px;
width: 100%;
color: White;
text-shadow: 2px 2px Black;
font-family: "FuturaNewLight";
}
.futuraNewLightSubHeader {
position: absolute;
top: 750px;
font-size: 60px;
width: 100%;
color: White;
text-shadow: 2px 2px Black;
font-family: "FuturaNewLight";
}
#dynamicHeaderText {
color: #2099FF;
}
/* General styling */
.centerText {
text-align: center;
}
<!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>Education for Everyone</title>
<link rel="icon" type="image/png" href="images/edufeLogo.png">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
<div class="wrapper">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-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>
</div>
<a class="navbar-brand navbar-brand-centered" href="#/">
<img class="navbar-logo" src="images/edufeLogo.png">
</a>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Home
</li>
<li>About
</li>
<li>Learn
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Log In
</li>
<li>Sign Up
</li>
</ul>
</div>
</div>
</nav>
<!-- Jumbotron -->
<div class="jumbotron" id="jumbotronHeader">
<h1 class="display-3 centerText">Education for Everyone</h1>
<p class="lead centerText">Learn. Create. Share.</p>
<hr class="m-y-3">
</div>
<!-- Image header -->
<div class="imageHeader">
<span class="futuraNewLightHeader centerText"><span id="dynamicHeaderText">Learn</span> something new.</span>
<span class="futuraNewLightSubHeader centerText">From the internet to real life.</span>
</div>
<img src="images/homePageImage.png" id="homePageImage" class="center-block img-responsive">
</div>
<!-- Script tags -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Thanks! Any help is appreciated!
Move all text formatting options into the media queries and try then.
First you need set #media queries to #media screen and (max-width: ....).
Some cases browsers need screen parameter.
Second, you need change font size of elements when responsive. I suggest using em unit to make responsive.