So I have this really weird problem. My media queries work very well when I test them locally, however, when I uploaded the files to my website, the server doesn't seem to notice the media queries, it notices one of them which is the first one but the ones for smartphones, it just skips and displays all the elements that I've hidden for all screen sizes. I'm certain they're correct because they work locally. Anyway, here's the html and css.
<meta name="viewport" content="width=device-width">
<header>
<div class="container">
<h1 id="logo"><img src="index/logo.png" alt="logo"/></h1>
<div class="dropdown">
<img src="index/mobilemenubutton.png" id="menubutton">
<div class="dropdown-content">
<ul id="nobullets">
<li class="center">Home</li>
<li class="center">About</li>
<li class="center">Services</li>
</ul>
</div>
</div>
#container_2, #navi, #infoi, #smartphone_main_col, .dropdown, .dropdown-
content {
display: none;
}
#media screen /*THIS ONE WORKS*/
and (max-width: 1367px) {
.slider {
display: none;
}
.fader {
display: block;
}
#navi, #infoi {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#infoi {
z-index: 1;
transition: 2s;
}
#infoi:hover {
opacity: 0;
}
#container_2 {
position: relative;
width: 100%;
height: 100%;
display: block;
}
#other_f {
position: relative;
top: 650px;
}
#newsletter {
z-index: 3;
}
.button_1 {
display: inline-block;
border-radius: 4px;
background-color: #0099ff;
border: none;
color: #FFFFFF;
line-height: 4px;
font-size: 20px;
padding: 20px;
padding-top: 18px;
padding-bottom: -2;
width: 150px;
height: 30px;
transition: all 1s;
cursor: pointer;
margin: 5px;
position: relative;
top: 3.3px;
}
footer {
z-index: 2;
position: relative;
bottom: 0;
width:100%;
height:40px;
}
}
/* Smartphones (portrait and landscape) ---------- */ /*THIS ONE DOESN'T WORK*/
#media screen and (min-width: 320px) and (max-width: 480px){
.slider, .slides, .slide, #infoi, #navi, footer {
display: none;
}
#background {
background-color: #d2d8d0;
}
.container {
width: 100%;
margin: auto;
overflow: hidden;
padding-right: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
border-bottom: #0099ff 4px solid;
}
#logo {
float: left;
position: relative;
right: 25px;
bottom: 30px;
}
.dropdown {
position: absolute;
display: inline-block;
padding: 0;
margin: 0;
}
#menubutton {
position: relative;
width: 70px;
height: 70px;
left: 30px;
}
#nobullets {
list-style-type: none;
}
.center {
padding: 10px 20px 10px 0px;
}
.center:hover {
background-color: #ffffff;
}
.dropdown-content {
display: none;
position: relative;
right: 20px;
color: black;
background-color: #35424a;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin: 0;
bottom: 100px;
right: 80px;
padding: 0;
}
.dropdown:hover .dropdown-content {
display: block;
}
.link-1 {
display: none;
}
#smartphone_main_col {
display: block;
padding-left: 40px;
padding-right: 40px;
padding-top: 80px;
}
#newsletter {
height: 80px;
position: fixed;
bottom: 0;
padding-top: 0;
padding-right: 0;
}
#newsletterhead {
font-size: 20px;
position: relative;
top: -12px;
left: 34px;
}
#newsletter input[type="email"] {
padding: 4px;
height: 23px;
width: 185px;
transition: 1s;
position: relative;
bottom: 10px;
right: 35px;
float: left;
}
.button_1 {
display: inline-block;
border-radius: 0px;
background-color: #0099ff;
border: none;
color: #FFFFFF;
line-height: 4px;
font-size: 20px;
padding: 18px;
padding-bottom: -12px;
width: 120px;
height: 7px;
transition: all 1s;
cursor: pointer;
margin: 5px;
position: relative;
top: -16px;
right: 35px;
}
}
So I've finally figured it out guys, I had user-scalability set to no, I just set it to yes and deleted temp files in my browser and it's working just fine.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-
scalable=yes"> <!--THIS-->
<meta name="description" content="Affordable and professional web design">
<meta name="keywords" content="web design, affordable web design,
professional web design, portfolio">
<meta name="author" content="Stefan Vujic">
<title>Light Designs | Welcome</title>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="favicon.png">
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
you can try place mobile css front pc css like this:
#media screen and (min-width: 320px) and (max-width: 480px){...}
#media screen and (max-width: 1320px){...}
Related
So i have made a website with HTML and CSS. It has different effects like the parallax effect(a very simple version of it), transparent navbar, and now I am trying to make my Navbar responsive. Everything works, but my hamburger menu is very far to the left and when I find a way to move it, it doesnt work after i moved it.
As you can see it is very close to the top of the screne and so far to the left that it is past the logo. I want it to stay to the right even if i made the screen smaller ofr bigger, like it moves with the screen when i move it.
This is my css code:
#font-face {
font-family: 'Poppins';
src: url(Fonts/Poppins-Regular.ttf
}
#font-face {
font-family: 'Comfortaa';
src: url(Fonts/Comfortaa-VariableFont_wght.ttf);
}
#font-face {
font-family: 'DancingScript';
src: url(Fonts/DancingScript-VariableFont_wght.ttf);
}
* {
padding: 0;
margin: 0;
color: #A6808C;
box-sizing: border-box;
}
body {
background-color: #565264;
font-family: Poppins;
}
html {
overflow: scroll;
overflow-y: hidden;
}
::-webkit-scrollbar {
width: 0%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.4);
border-bottom: 0px solid #fff;
z-index: 9999
}
nav .logo {
padding: -22px 20px;
height: 50px;
float: left;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a {
line-height: 60px;
color: #fff;
padding: 12px 30px;
text-decoration: none;
font-size: 25px;
}
nav ul li a:hover {
background: rgba(0,0,0,0.1);
border-radius: 5px;
}
.text {
font-size: 2rem;
padding: 2rem;
background-color: #565264;
color: whitesmoke;
}
.title {
font-size: 7rem;
color: whitesmoke;
text-shadow: 0 0 5px black;
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(3);
background-repeat: no-repeat;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
.hamburger {
position: relative;
width: 30px;
height: 4px;
background: #fff;
border-radius: 10px;
cursor: pointer;
z-index: 2;
transition: 0.3s;
}
.hamburger:before, .hamburger:after {
content: "";
position: absolute;
height: 4px;
right: 0;
background: #fff;
border-radius: 10px;
transition: 0.3s;
}
.hamburger:before {
top: -10px;
width: 20px;
}
.hamburger:after {
top: 10px;
width: 20px;
}
.toggle-menu {
position: absolute;
width: 30px;
height: 100%;
z-index: 3;
cursor: pointer;
opacity: 0;
}
.hamburger, .toggle-menu {
display: none;
}
.navigation input:checked ~ .hamburger {
background: transparent;
}
.navigation input:checked ~ .hamburger::before {
top: 0;
transform: rotate(-45deg);
width: 30px;
}
.navigation input:checked ~ .hamburger::after {
top: 0;
transform: rotate(45deg);
width: 30px;
}
.navigation input:checked ~ .menu {
right: 0;
box-shadow: -20px 0 40px rgba(0,0,0,0.3);
}
#media screen and (max-width: 1062px) {
.hamburger, .toggle-menu {
display: block;
}
.header {
padding: 10px 20px;
}
nav ul {
justify-content: start;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
right: -300px;
background-color: #565264;
width: 300px;
height: 100%;
padding-top: 65px;
}
.menu li {
width: 100%;
}
.menu li a, .menu li a:hover {
padding: 30px;
font-size: 24px;
box-shadow: 0 1px 0 rgba(112,102,119,0.5) inset;
}
}
<head>
<meta charset="utf-8">
<meta name="veiwport" content="width=device-width, initalscale=1.0">
<Title>Test</Title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<nav>
<div class="logo">
<a href="index.html">
<img src="Pictures\Logo DesignK whitegreen.png" alt="DesignK" height="50px" width="200px">
</a>
</div>
<div class="navigation">
<input type="checkbox" class="toggle-menu">
<div class="hamburger"></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Feedback</li>
</ul>
</div>
</nav>
<div class="wrapper">
<header>
<img src="Pictures/LakeandMoutains.jpg" class="background">
<h1 class="title">Welcome!</h1>
</header>
<section class="text">
<h3>Essay on Mountains</h3>
</section>
</div>
</body>
Does anyone know how to make the hamburger menu move to the right side of the screen?
Update your .hamburger, .toggle-menu styles like this
.hamburger, .toggle-menu {
display: block;
position: absolute;
right: 30px;
}
Update the value of right according to your need.
You could always use flexbox. The following lines of code will display this on the right hand side:-
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.navigation {
margin-left: auto;
}
Add this to your navigation class:
.navigation{
position:relative;
}
and then this to your hamburger menu to make it stick to the right.
.hamburger{
position:relative;
right:8%;
}
The position absolute will make the hamburger-menu stick relative to the navigation bar and right 8% will stick it to the right.
You must understand the importance of HTML structure and positioning because this is the problem in your HTML.
To fix your problem, you need to put the burger menu and the check box in one container and then position the container.
The problem now is that you are positioning every part individually and their width and height are not properly set.
try to follow the steps I mentioned then let us know if you can do it or not.
I'm very new to HTML and CSS and have finally created my new website. The site works fine on my laptop and PC, but when I open it on my phone, there is this huge white space covering half my screen in portrait mode. It's perfectly fine in landscape mode.
I want my website to be completely zoomed in when opened in portrait mode, so that you can swipe/scroll to navigate on the site and get rid of the white space. Basically, at the moment, when the site is opened, it zooms out to show 100% of the site, but I only want it to show whatever fits the mobile screen in portrait mode. Hope my question is clear. I've been searching for an answer for over 3 hours now. Please help me guys :(
My css: https://pastebin.com/AeHyczJh
My HTML: https://pastebin.com/N5jV8yqY
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta name="description" content="Affordable and professional web design">
<meta name="keywords" content="web design, affordable web design, professional web design">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">
<header>
<div class="container">
<img src="images/final.png" width="162" height="200" alt="logo" id="logo"/>
<nav>
<ul>
<li class="current">Home</li>
<li class="dropdown">
Registration
<div class="dropdown-content">
Team
Individual
Coach a team
Manage a team
</div>
</li>
<li class="dropdown">
KWSA Women's Soccer League
<div class="dropdown-content">
Match Schedule
Practice Schedule
Pitch Locations
Team Kits
Top Scorers
</div>
</li>
<li class="dropdown">
Sponsors
<div class="dropdown-content">
Sponsors of KWSL
Sponsor a team
</div>
</li>
<li class="dropdown">
Info
<div class="dropdown-content">
Rules
FAQ
</div>
</li>
<li>The Carpool Program</li>
</ul>
</nav>
</div>
</header>
<section id="main_content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/WSd0HZVh5pE?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<div id="main_text">
<h1></h1>
<p></p>
</div>
</section>
<footer>
<div class="foot-container">
<img src="images/fb.png" class="social_fb">
<img src="images/youtube.png" class="social_youtube">
<img src="images/insta.png" class="social_insta">
<img src="images/mail.png" class="social_mail">
</div>
</footer>
</div>
</body>
</html>
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url(''); /*URL to font*/
}
#charset "utf-8";
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
html{
max-height: 5px;
}
}
body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:0;
background-color:#f4f4f4;
overflow: scroll;
background: url(images/field.jpg) no-repeat 0 -200px;
}
h1,
p{
margin: 0;
}
#wrap{
}
.container{
margin: auto;
overflow: hidden;
}
header{
padding-top: 30px;
min-height: 70px;
padding-bottom: 0px;
min-width: 1300px;
padding-left: 20px;
}
#logo{
position: absolute;
top: 20px;
left: 20px;
margin: auto;
}
header li{
float:center;
display:inline;
padding: 0 70px 0 0px;
}
nav{
float: right;
}
header a{
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
font-size: 12px;
}
header a:hover{
font-weight: bold;
}
iframe{
position: static;
top: 300px;
left: 200px;
float:right;
box-shadow: 10px 10px 100px black;
overflow: hidden;
margin: 200px 20px 0px 0px;
}
#main_content{
position: static;
min-height: 700px;
min-width: 1300px;
width: 100%;
z-index: 1;
}
#main_content h1{
position: absolute;
left: -135px;
top: 165px;
text-align: center;
color: #FFFFFF;
font-family:"Bauhaus 93";
font-size: 50px;
min-height: 500px;
min-width: 150px;
}
#main_content p{
color:#FFFFFF;
text-align: center;
height: 10px;
width: 400px;
position: absolute;
left: 410px;
top: 275px;
}
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: all 700ms ease;
border: black 1px solid;
}
li a:hover, .dropdown:hover .dropbtn {
background: black;
color: white;
box-shadow: inset 0 0 0 3px black;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
background: rgba(208,208,208,0.8);
box-shadow: 1px 1px 1px black;
}
.dropdown-content a:hover {background-color:black;}
.dropdown:hover .dropdown-content {
display: block;
}
li a, .dropbtn-2 {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown2:hover .dropbtn-2 {
}
.dropdown-content-2 {
display: none;
position: absolute;
background-color: #1A3C60;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content-2 a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content-2 a:hover {background-color:rgba(56,97,159,0.46)}
.dropdown2:hover .dropdown-content-2 {
display: inline-block;
position: absolute;
left: 160px;
margin-top: -47px;
}
li.dropdown2 {
display: inline-block;
}
#FAQ{
position: static;
background: url(images/faq_bg.png) center no-repeat ;
min-width: 1300px;
min-height: 700px;
width: 100%;
height: 100%;
}
#FAQ h1{
padding-top: 75px;
color: #e4e3e3;
font-family:"Bauhaus 93";
font-size: 50px;
text-align: center;
left: 390px;
}
#FAQ ul p{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
font-weight: normal;
}
#FAQ ul{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
left: 400px;
top: 50px;
z-index: 2;
font-weight: bold;
}
.social_fb{
position: relative;
top: 15px;
left: 500px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_fb:hover{
background: #3b5998;
}
.social_youtube{
position: relative;
top: 15px;
left: 520px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_youtube:hover{
background: #bb0000;
}
.social_insta{
position: relative;
top: 15px;
left: 540px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_insta:hover{
background: #8a3ab9;
}
.social_mail{
position: relative;
top: 15px;
left: 560px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_mail:hover{
background: #e4a805;
}
#carpool{
position: static;
background: url(images/faq_bg.png) center no-repeat ;
min-width: 1300px;
min-height: 700px;
width: 100%;
z-index: 1;
height: 100%;
}
#carpool h1{
padding-top: 75px;
color: #e4e3e3;
font-family:"Bauhaus 93";
font-size: 50px;
text-align: center;
left: 390px;
}
#carpool ul p{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
font-weight: normal;
}
#carpool ul{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
left: 400px;
top: 50px;
z-index: 2;
font-weight: bold;
}
#soon{
position: absolute;
left: 550px;
top: 300px;
}
Working on a mobile first approach and have encountered a strange re-alignment issue while expanding from mobile (480) to tablet view (768px).
The final layout is supposed to look like this:
However, I see this:
I understand that this is a CSS display issue, I can get Display: inline-block to work for the text segment to align with the album artwork (I have to reduce the width of the div though), but I cannot get the Display: inline-block to apply to the third div and to get it to align on the right hand side of the text box. Here's the HTML (removed unnecessary code for this question). The three relevant classes are'album-artwork', 'info-bar-container' and 'dig-box' (the lightning bolt). What is the best way to go about fixing this problem?
Thank you for your help!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="assets/img/favicon.ico" />
<title>UNCVRD</title>
<!-- Bootstrap Core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- Font awesome icons -->
<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="assets/css/custom.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<!-- Ionicons -->
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- HTML5 shiv and REspond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Music Feed -->
<section id="music-feed">
<div class="song-container">
<div class="album-artwork">
<img class="sc-artwork" src="https://i1.sndcdn.com/artworks-000182929734-focihg-t500x500.jpg">
<div class="album-dark-overlay">
<div class="ranking-triangle"></div>
<i class="icon ion-ios-play"></i>
</div>
</div>
<div class="info-bar-container">
<div class="info-bar">
<div class="info-bar-text">
<div class="artist-name">Echos - Gold</div>
<div class="curator-name">Curated by <a class="curator-link" href="">UNCVRD</a></div>
</div>
</div>
<div class="dig-box">
<i class="icon ion-ios-bolt balanced"></i>
</div>
</div>
</div>
</section>
</section>
<!-- Bootstrap Core Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="assets/js/jquery-3.1.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
CSS stylesheet!
/* Reference Palette
Background: #dedede
Grey font: #b9b9b9
*/
/* ==== General ==== */
html {
font-family: 'Open Sans', sans-serif;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
background: #dedede;
font-family: 'Open Sans', sans-serif;
}
h4 {
margin: 0;
padding: 0;
}
/* ==== Navigation Bar ==== */
.navbar {
position: relative;
margin-bottom: 16px;
}
.navbar-toggle {
padding: 0;
border: none;
border-radius: none;
margin: 13px 0 0 16px;
}
.navbar-toggle .icon-bar {
background-color: black;
}
.navbar-brand {
position: absolute;
left: 50%;
margin-left: -53.5px !important;
padding: 0;
display: block;
font-size: 30px;
color: black;
}
.dropdown-menu {
color: black;
}
.navbar .nav > li > a {
color: black;
border-top: 1px solid #dedede;
}
ul.nav.navbar-nav.navbar-right {
margin-bottom: 0;
margin-top: -7.5px;
}
.container-fluid > .navbar-collapse {
margin-top: 3.25px;
}
/* ==== FEED ==== */
#feed {
width: 480px;
margin: auto;
}
/* ==== Playlist Mode ==== */
.playlist-header {
margin-bottom: 16px;
}
.playlist-select {
margin-bottom: 16px;
display: flex;
max-width: 260px;
}
.discovery-mode {
padding-right: 8px;
padding-left: 8px;
min-width: 130px;
font-size: 14px;
height: 30px;
background-color: white;
text-align: center;
vertical-align: middle;
line-height: 30px;
}
.playlist-choice {
flex: 1;
min-width: 130px;
height: 30px;
font-size: 14px;
border: 2px solid #fff;
text-align: center;
vertical-align: middle;
line-height: 26px;
}
/* ==== Music Feed ==== */
#music-feed {
margin-top: 16px;
width: 448px;
}
.song-container {
width: 100%;
height: 220px;
margin-bottom: 16px;
}
.song-container:last-child {
margin-bottom: 82px;
}
.album-artwork {
width: 100%;
height: 155px;
overflow: hidden;
position: relative;
}
.sc-artwork {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
}
.info-bar-container {
display: flex;
}
.album-dark-overlay {
/* background-color: rgba(0, 0, 0, 0.25);*/
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 77.5px;
color: #dedede;
}
.ranking-triangle {
width: 0;
height: 0;
position: relative;
border-style: solid;
border-width: 38px 38px 0 0;
border-color: #fff transparent transparent transparent;
}
.ranking {
top: 0;
right: 0;
width: 38px;
text-align: left;
}
.info-bar {
width: 90%;
max-width: 484px;
height: 65px;
background-color: white;
display: table;
}
.dig-box {
width: 10%;
background-color: white;
text-align: center;
line-height: 65px;
max-height: 65px;
}
.ion-ios-bolt {
color: #dedede;
font-size: 30px;
}
.ion-ios-bolt:hover {
color: black;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
/* ...and now for the proper property */
transition: .5s;
}
.ion-ios-play {
font-size: 80px;
color: white;
opacity: 1;
}
.ion-ios-play:hover {
color: #b9b9b9;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
/* ...and now for the proper property */
transition: .5s;
}
.info-bar-text {
display: table-cell;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
}
#music-feed .artist-name {
font-size: 16px;
font-weight: 600;
margin-left: 16px;
}
#music-feed .curator-name {
font-size: 14px;
color: #b9b9b9;
margin-left: 16px;
}
.curator-link {
color: black;
}
.curator-link:hover {
color: black;
text-decoration: none;
}
/* ==== Progress Bar ==== */
#progress-bar-container {
position: fixed;
bottom: 60px;
left: 0;
}
#progress-bar-container .container-fluid {
margin: 0;
padding: 0;
height: 6px;
}
.progress-background {
width: 100%;
height: 6px;
background-color: #b9b9b9;
position: fixed;
}
.progress-bar {
width: 40%;
height: 6px;
background-color: #000;
position: fixed;
z-index: 1;
}
/* ==== Bottom Music Bar ==== */
#music-bar {
width: 100%;
height: 60px;
background: white;
position: fixed;
bottom: 0;
left: 0;
}
#music-bar .container-fluid {
padding: 0;
height: 60px;
}
.music-control-container {
font-size: 28px;
height: 60px;
display: inline-flex;
line-height: 60px;
text-align: center;
vertical-align: middle;
}
#music-bar .ion-ios-rewind {
margin-left: 16px;
}
#music-bar .ion-pause {
margin: 0 12px;
}
#music-bar .ion-ios-fastforward {
margin-right: 0px;
}
#music-bar .album-artwork {
float: right;
height: 30px;
width: 30px;
margin: 15px 0 15px 15px;
padding: 0;
position: relative;
}
.music-control-container img {
width: auto;
height: auto;
vertical-align: top;
width: 100%;
height: 100%;
}
#music-bar .song-name {
font-size: 13px;
font-weight: 600;
margin-left: 15px;
}
/* ==== Custom Media Queries ==== */
#media only screen and (min-width: 768px) {
#feed {
width: 768px;
margin: auto;
}
#music-feed {
width: 736px;
}
.song-container {
height: 160px;
}
.album-artwork {
width: 160px;
height: 160px;
margin-right: -4px;
display: inline-block;
}
.info-bar-container {
width: 576px;
display: inline-block;
}
.info-bar {
max-width: 576px;
height: 160px;
}
.dig-box {
width: 10%;
background-color: white;
text-align: center;
line-height: 160px;
max-height: 160px;
}
}
You've set a width on your #music-feed which appears to be too thin to hold all the items, causing them to drop down to the next lines. Also your div.dig-box isn't set to "display: inline-block" so by default wants to occupy a line by itself.
From there onwards you have a bit more work to do but hope this helps.
My mobile css hamburger menu isn't working, if I click on it it doesn't stay open, and I have no clue on how to open the dropdown menu inside the hamburger menu. Also my nav title (.logo) is hard to center, does anyone have a solution for that?
JSFidlle for easy viewability (Mobile css & Style.css in are merged here only the background is missing)
Thanks for any help, and sorry if my code looks messy :/
My Code:
Index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, I'm Sten</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobile.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div class="nav animated slideInDown">
<img src="img/hamburger.png" alt="" class="hamburger">
<div class="logo">
<h1>STEN</h1>
</div>
<ul>
<li>
PAGE
<ul>
<li>DROPDOWN</li>
<li>DROPDOWN</li>
</ul>
</li>
<li>PAGE</li>
<li>PAGE</li>
<li>PAGE</li>
</ul>
</div>
<div class="landing animated fadeIn">
<div class="container">
<h1>STEN</h1>
<hr>
<p>I'M A</p>
<h2>-OCCUPATION-</h1>
<button>KNOP</button>
<button>KNOP</button>
</div>
<div class="scroll" onClick="">
</div>
</div>
<div class="about">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="main.js"></script>
</body>
</html>
Style.css (Master css file)
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: 300;
font-size: 50px;
}
.nav {
width: 100%;
height: 10%;
background-color: #F2F2F2;
border-bottom: 1px solid #E4E4E4;
text-align: center;
position: fixed;
z-index: 999;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.nav .hamburger {
display: none;
}
.nav .logo {
float: left;
margin-left: 10%;
}
.nav .logo h1 {
color: #000;
line-height: 10vh;
font-size: 32px;
}
.nav > ul {
height: 100%;
width: auto !important;
display: inline-block;
float: right;
margin-right: 10%;
}
.nav > ul > li {
display: inline-block;
list-style: none;
padding: 0 20px 0 20px;
vertical-align: top;
position: relative;
}
.nav > ul > li:first-child > a:after {
width: 6px;
height: 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
position: absolute;
margin-top: calc(5vh - 5px);
margin-left: 8px;
content: "";
transform: rotate(45deg);
}
.nav > ul > li > ul {
display: none;
margin-left: -50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.nav > ul > li > ul > li {
list-style: none;
background-color: #F2F2F2;
padding: 0 20px 0 20px;
position: relative;
}
.nav li:hover > ul {
display: block;
position: absolute;
}
.nav ul a {
color: #000;
text-decoration: none;
line-height: 10vh;
}
.nav a:hover {
color: #999;
}
.landing {
padding-top: 10vh;
height: 90%;
width: 100%;
background: url('../img/bg.jpg');
background-size: cover;
background-position: center;
position: fixed;
text-align: center;
color: #FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
z-index: 0;
}
.landing:before {
content: " ";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.landing .container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 100%;
}
.landing .container h1 {
letter-spacing: 6px;
font-size: 78px;
}
.landing .container p {
font-size: 20px;
font-weight: 100;
}
.landing hr {
width: 300px;
margin: 25px 0 25px 0;
margin-left: calc(50% - 150px);
border-bottom: 3px solid #EF2D56;
}
.landing button {
width: 200px;
padding: 24px;
margin-top: 20px;
position: relative;
color: #FFF;
background-color: transparent;
border: 1px solid #FFF;
}
.landing button:first-child {
margin-right: 1%;
}
.landing button:last-child {
margin-left: 1%;
background-color: #EF2D56;
border: 1px solid #EF2D56;
}
.landing button:hover {
cursor: pointer;
}
.landing button:focus {
outline: none;
}
.scroll {
width: 16px;
height: 16px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
position: absolute;
content: " ";
transform: rotate(45deg);
bottom: 0;
margin-bottom: 30px;
margin-left: calc(50% - 8px);
cursor: pointer;
}
.about {
height: 200%;
width: 100%;
background-color: #FFF;;
z-index: 50;
position: absolute;
margin-top: 100vh;
}
Mobile css file
#media only screen and (max-device-width: 850px){
.nav .hamburger {
height: 6vh;
width: 6vh;
display: inline-block;
float: left;
margin: 2vh 0 0 2vh;
}
.nav .logo {
position: relative;
}
.nav > ul {
display: none;
float: none;
margin-top: 10vh;
}
.nav .hamburger:hover ~ ul {
display: block;
width: 100%;
margin: 0;
}
.nav > ul > li {
display: block;
background-color: #F2F2F2;
}
.about {
margin-top: 100vh;
}
}
Change the way you wrote media query, Try this way:
#media only screen and (max-width: 850px) {
//Your mobile CSS code
}
See the fiddle: https://jsfiddle.net/7xjyutuf/1/
chnage your media query into this #media only screen and (max-width:850px){}.
If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting;
If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.
for more info you can visit this http://www.menucool.com/3613/max-device-width-vs-max-width-Which-one-should-I-use
check this fiddle https://jsfiddle.net/ok7hmodo/1/
For making the menu static use Jquery.Please check this https://jsfiddle.net/7xjyutuf/10/.
This is a css only solution.You have to make the ul display block when user hovers on it
https://jsfiddle.net/tucsgohy/1/
nothing found in the www about my problem. I have a content of 640px filled with divs and images. If i run my app on the iPhone Simulator now, it only shows 320px and cuts the half of the content.
This is my header:
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum- scale=1.0">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript">
var myScroll;
function loaded () {
myScroll = new IScroll('#wrapper', { useTransition: false });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>
And here a link to my Stylesheet (i hope this is okay?!)
http://pastebin.com/1CDxMLHW
Hope u can tell my, what i did wrong!
The problem is is that the emulator is not realy retina it depends on your own screen. I have reproduces the problem and solved the problem by making your lay out fluid. The width of all elements are defined with percentages. In this way they can adapt to the available screen width.
/*########################
# GENERAL SCROLL STYLING #
########################*/
html {
-ms-touch-action: none;
width: 100%;
}
li, ul{
list-style: none;
padding: 0;
}
body {
overflow: hidden; /* this is important to prevent the whole page to bounce */
}
#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 118px;
padding: 0;
border-top: 18px solid #000000;
}
#footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
background: #444;
padding: 0;
border-top: 1px solid #444;
}
#wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
/*########################
# GENERAL HEAD STYLING #
########################*/
.head_first{
background:url(../img/buttons/fb_btn.png);
width: 30%;
height: 100px;
float: left;
}
.head_second{
background:url(../img/buttons/nav_top_btn.png);
width: 30%;
height: 100px;
float: left;
}
.head_third{
background:url(../img/buttons/weather_btn.png);
width: 30%;
height: 100px;
float: left;
}
#main_pic{
background:url(../img/start/strand.jpg);
width: 100%;
height: 400px;
clear: both;
float: left;
margin-top: 73px;
}
/*########################
# CONTENT STYLING #
########################*/
li{
background:url(../img/buttons/nav_btn.png);
background-repeat: no-repeat;
list-style: none;
clear: both;
float: left;
position: relative;
width: 100%;
height: 64px;
color: #FFFFFF;
font-size: 35px;
}
li a{
top: 10px;
left: 20px;
width: 100%;
height: 100%;
display: block;
position: relative;
}
a:link{
text-decoration: none;
color: #FFFFFF;
}
a:hover{
text-decoration: none;
}
a:active{
text-decoration: none;
}
a:visited{
text-decoration: none;
color: #FFFFFF;
}
/*########################
# FOOTER STYLING #
########################*/
.footer_first{
background:url(../img/buttons/home_btn.png);
clear: both;
float: left;
width: 25%;
height: 84px;
}
.footer_second{
background:url(../img/buttons/news_btn.png);
float: left;
width: 25%;
height: 84px;
}
.footer_third{
background:url(../img/buttons/card_btn.png);
float: left;
width: 25%;
height: 84px;
}
.footer_fourth{
background:url(../img/buttons/faehr_btn.png);
float: left;
width: 25%;
height: 84px;
}