I'm having issues with my menu icon. For my desktop css I have is set to display none. Under 1000px I have it set as display block. So far the icon is showing for all devices. Any assistance is appreciated.
/* blah blah blah */
.icon-dropdown {
display: none;
}
#media screen and (max-width: 1000px) {
.icon-dropdown {
display: block;
position: absolute;
left: 80%;
top: 50px;
}
.icon-dropdown div{
display: block;
background-color: black;
width: 35px;
height: 4px;
margin-bottom: 3px;
position: relative;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vintage McDonald's</title>
<meta id="meta" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/jpg" href="mcdonaldsoldlogo.png">
</head>
<body>
<div class="wrapper">
<header>
<img src="vintagelogo.jpg" width="90px" height="90px">
<h1>Vintage McDonald's!</h1>
<div class="icon-dropdown">
<div></div>
<div></div>
<div></div>
</div>
</header>
<span class="menu-trigger">Menu</span>
<nav>
<ul>
<li>ABOUT MCDONALD'S</li>
<li>OUR CLASSICS</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="slideShow">
<img class="placeHolder" src="1.jpg">
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
<div class="slideOverlay"><p>Welcome to McDonald's!<br>Come and try our NEW Big Mac!!!</p>
</div>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="menu.js"></script>
</body>
</html>
try to use this media query:
#media (max-width: 800px) {
.icon-dropdown {
display: block;
position: absolute;
left: 80%;
top: 50px;
}
.icon-dropdown div{
display: block;
background-color: black;
width: 35px;
height: 4px;
margin-bottom: 3px;
position: relative;
}
}
After that, try to shrink your browser to see the effect.
Try setting width and height for the icon.
Related
Toggle icon menu not showing when I reduce screen below 768px.
I can only see 'Website title'. Any ideas? Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flexbox Dropdown Menu</title>
<style>
.Navbar {
background-color: #46ACC2;
display: flex;
padding: 16px;
font-family: sans-serif;
color: white;
}
.Navbar__Link {
padding-right: 8px;
}
.Navbar__Items {
display: flex;
}
.Navbar__Items--right {
margin-left: auto;
}
.Navbar__Link-toggle {
display: none;
}
#media only screen and (max-width: 768px) {
.Navbar__Items,
.Navbar {
flex-direction: column;
}
.Navbar__Items {
display: none;
}
.Navbar__Items--right {
margin-left: 0;
}
.Navbar__ToggleShow {
display: flex;
}
.Navbar__Link-toggle {
align-self: flex-end;
display: initial;
position: absolute;
cursor: pointer;
}
}
</style>
</head>
<body>
<div class="Navbar">
<div class="Navbar__Link Navbar__Link-brand">
Website title
</div>
<div class="Navbar__Link Navbar__Link-toggle">
<i class="fas fa-bars"></i>
</div>
<nav class="Navbar__Items">
<div class="Navbar__Link">
Longer Link
</div>
<div class="Navbar__Link">
Longer Link
</div>
<div class="Navbar__Link">
Link
</div>
</nav>
<nav class="Navbar__Items Navbar__Items--right">
<div class="Navbar__Link">
Link
</div>
<div class="Navbar__Link">
Link
</div>
</nav>
</div>
</body>
<script>
function classToggle() {
const navs = document.querySelectorAll('.Navbar__Items')
navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}
document.querySelector('.Navbar__Link-toggle')
.addEventListener('click', classToggle);
</script>
you should also define .Navbar__Link-toggle in media query that you want to show toggle icon like this
#media only screen and (max-width: 768px) {
.Navbar__Link-toggle {
display: block;
}
}
and
included this in <head> tag <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
I made a responsive website with bootstrap 3. It's a portfolio website with an image gallery. The website does work responsive but when I view it as from a mobile or other device it doesn't scale perfectly. When I reload the page it looks right at first but when it is finished loading it changes. Does anyone have an idea where I went wrong?
body {
padding: 0;
border: 0;
vertical-align: baseline
}
.main {
margin-top: 170px;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
}
.navbar {
min-height: 130px;
margin-bottom: 20px;
}
.navbar-toggle {
margin-top: 25px;
}
#media (min-width: 768px) {
.navbar-nav.navbar-right:last-child {
margin-right: 0;
}
}
.box {
padding: 5px;
margin: 0;
}
.img {
display: block;
position: relative;
margin: 0px;
z-index: 1;
}
.imgoverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.img:hover .imgoverlay {
opacity: 0.75;
}
.text {
position: absolute;
bottom: 0;
padding-bottom: 6px;
margin: auto auto auto 10px;
}
/*///////////POP UP////////*/
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
z-index: 2;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 150px auto;
position: relative;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
<!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></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<section class="main">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 box">
<a href="#" class="img">
<img src="" alt="" class="img-responsive">
<div class="imgoverlay">
<div class="text"></div>
</div>
</a>
</div>
<!--///////////// POP UP /////////////////////-->
<div id="popup1" class="overlay">
<div class="col-md-12 popup">
<div class="col-md-6 col-md-offset-1 iframe">
<iframe src="" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-md-4 content">
<h2></h2>
<p class="info"></p>
</div>
<a class="col-md-1 close" href="#">×</a>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
use media queries
#media (min-width: 576px) { ... }
inside the braces define styles
media queries are used to define the rule that is used to define different style for different media types/devices.
if the width of the device's screen is minimum 567px then it will be rendered to defined style.
I am currently using the latest version of bootstrap and I have created a landing page. However, the success button is not clickable on 13inch/15inch laptops and desktops which is weird.
The URL is here.
<!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="description" content="Loot.es - First CSGO SMS Service in the World. We send out notifications of matches live to our users for major Counter Strike Global Offensive tournaments. ">
<meta name="author" content="nivekyo">
<link rel="icon" href="img/favicon.ico">
<title>Loot.es - CSGO SMS Service</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" >
<link href="css/landing.css" rel="stylesheet" >
</head>
<body>
<div class="container">
<h1 class="title">The notification we've all been waiting for.</h1>
<p class="lead" style="font-size: 1.2em;">Get notified when a team wins at all major Counter-Strike tournaments.</p>
<div class="left"><img class="bubble" src="img/speech.png"/></div>
<p class="join"><a class="btn btn-success btn-lg" role="button" href="https://steamcommunity.com/groups/lootes"><i class="fa fa-steam-square"></i> Join now, it's free.</a></p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">
Privacy Policy | #nivekyo
</p>
</div>
</footer>
</body>
</html>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
#media (min-width: 1200px) {
.container {
width: 560px;
padding-top: 200px;
}
}
html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
padding-top: 50px;
}
.container {
text-align: center;
}
.title {
font-family: 'Open Sans Condensed', sans-serif;
}
.join {
padding-top: 30px;
}
a:hover {
text-decoration: none;
}
img.bubble {
padding-top: 20px;
width: auto;
height: 180px;
}
.left {
text-align: left;
}
With much thanks!
It is not because of 15" Screen, but it is because of the padding on the footer and .container. Solution:
footer, footer .container {padding-top: 0;}
Adding the above code to landing.css works.
I have bootstrap carousel working and the image is correctly resized when the window is made smaller. However, the surrounding container remains the same height it was when it was large.
This is because I have height: 380px in the .item css and max-height: 380px in the .carousel class.
Any attempt to set height: auto; or height: 100%; which I would expect, might allow the container/item to resize, results in the image disappearing entirely.
Any suggestions here is some simplified code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/carousel-SO.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Carousel -->
<div class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://tips4java.files.wordpress.com/2008/10/screen-image.jpg" />
</div>
<div class="item">
<img src="http://fineartamerica.com/images/contestlogos/logo1-best-uplifting-image.jpg" />
</div>
<div class="item">
<img src="http://www.nerd-age.com/wp-content/uploads/2011/11/Forge-Quest-featured-image.gif" />
</div>
</div><!-- .carousel-inner -->
</div><!-- .carousel -->
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 4000
});
});
</script>
</body>
</html>
and here's the CSS:
body {
color: #5A5A5A;
padding-top: 20px;
padding-bottom: 40px;
}
.carousel {
max-height: 380px;
max-width: 600px;
margin: 0 auto;
}
.carousel .item {
background-color: #777777;
width: 100%;
height: 380px;
}
.carousel-inner > .item > img {
float: none;
display: block;
margin-top: 40px;
height: auto;
top: 0;
position: absolute;
}
I basically want the grey area (.item) to resize with the picture.
Any help appreciated.
EDIT:
Here is a fiddle:
http://jsfiddle.net/7DGjk/
for some reason the carousel part doesn't work, but you can see the effect where the grey .item area doesn't resize.
Yeah Its possible. But no need to write too much of css codes for alignment. Here I use padding and background property for class item. Here the css
.item {
background: none repeat scroll 0 0 #808080;
padding: 5% 0;
max-width: 600px;
}
here the jsfiddle.
I have a problem with the cursor in IE10 any ideas? It doesn't appear at all in IE10.
http://jsfiddle.net/alexnode/y4y4A/8/
<div id="bgmbutton1">
<img id="button1" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img id="obutton1" src="http://translationgames.org/images/button1.png" alt="Translation games">
<div id="otrigger1" class="button" data-case="translation"></div>
</div>
css
#bgmbutton1{position: fixed;
left: 2%;
top: 5%;
}
#button1 {width: 25%;}
#obutton1 {width: 25%;position: absolute;top:0;left:0;}
#otrigger1 {background:rgba(0,0,0,0); height:100%; width:100%; position: absolute; left: 0; top: 0; cursor: pointer; z-index:5000;}
Your approach seems to be overcomplicating things just a bit. Might I suggest a slightly more straight-forward approach instead. I've tested this to ensure it works fine in IE.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hover-Fading Buttons</title>
<style>
.button {
width: 100px;
height: 100px;
display: block;
position: relative;
}
.button img {
border: 0;
width: 100%;
top: 0; left: 0;
position: absolute;
transition: opacity .5s;
}
.button:hover .default {
opacity: 0;
}
</style>
</head>
<body>
<a class="button" href="#">
<img class="overlay" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img class="default" src="http://translationgames.org/images/button1.png" alt="Translation games">
</a>
</body>
</html>
As you can see, this does rely on the transition and opacity properties. If you require support for older browsers, you could go back to a JavaScript approach using jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hover-Fading Buttons</title>
<style>
.button {
width: 100px;
height: 100px;
display: block;
position: relative;
}
.button img {
border: 0;
width: 100%;
top: 0; left: 0;
position: absolute;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.js"></script>
<script>
$(function () {
$(document).on("mouseover mouseout", ".button", function () {
$(this).find(".default").stop().fadeToggle(300);
});
});
</script>
</head>
<body>
<a class="button" href="#">
<img class="overlay" src="http://translationgames.org/images/button1overlay.png" alt="Translation games">
<img class="default" src="http://translationgames.org/images/button1.png" alt="Translation games">
</a>
</body>
</html>
I hope this helps you.