I used this code to make my website responsive, but it isn't working. The #media screen part is black and it seems like my browser doesn't recognize this code.
#media screen and(max-width: 478px) {
body {
font-size: 13px;
}
}
#media screen and(max-width: 740px) {
nav{
width: 100%;
margin-bottom: 10px;
}
nav ul{
list-style: none;
margin: 0 auto;
padding-left: 0;
}
nav ul li{
text-align: center;
margin-left: 0 auto;
width: 100%;
border: 1px solid #878E63
}
nav ul li a{
padding: 8px 0px;
font-size: 16px;
}
.left-col{
width: 100%;
}
.sidebar{
width: 100%;
}
.section{
float: left;
width: 100%;
margin: 0px;
}
}
Are you setting the initial scale of your page?:
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I am trying to center my logo and search bar within my blue header. In my site I am using a section with a width of 1200px and inside the header there is also a "headersection" that is 1200px. I want the logo on the left side of this section and the searchbar in the middle. How can I accomplish this?
Live codepen: https://codepen.io/PHV/pen/dyvXGaa
My HTML:
<div class="usp-banner" role="complementary">
<ul class="uspBannerList">
<li class="uspBannerList">Vind de leukste en goedkoopste bordspellen op Spelplaats.com</li>
<li class="uspBannerList">Vergelijk prijzen bij verschillende aanbieders</li>
</ul>
</div>
<div class="header">
<div class="headersection">
<div class="logo">
<img src="img/Spelplaats-Logo-F.png" alt="Spelplaats.com" class="logo">
</div>
<script src="js/searchfunction.js"></script>
<div class="search">
<form action="search.html" method="get">
<label for="search" class="search"></label>
<input type="text" class="searchTerm" placeholder="Zoek spel" name="search">
</form>
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="topnav" id="myTopnav">
Strategie
Fantasy
Deductieve
Cooperatief
Familie
Kinder
Kaartspellen
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
My CSS:
html {
color: #ffffff;
font-size: 1em;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);
/* No padding on the site*/
*,html,body,div,dl,dt,dd,ul,ol,li,h2,h3,h5,h6,pre,form,label,fieldset,input,blockquote,th,td {
margin: 0;
padding: 0;
}
article,aside,figure,footer,header,hgroup,nav,section {
display: block;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Site background */
body {
background: #ffffff;
color: #374147;
font: 14px "Open Sans",Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 1.4;
margin: auto;
}
h2{
font: 16px "Open Sans",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-top: 3px;
margin-bottom: 5px;
}
h3 {
font: 14px "Open Sans",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-top: 3px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #eff7fa;
overflow: hidden;
text-align: center;
}
/* Style the links inside the navigation bar */
.topnav a {
display: inline-block;
color: #374147;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: rgb(0, 51, 109);
color: white;
}
.topnav input[type=text] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 16px;
border: none;
font-size: 17px;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Styling of the section */
section{
max-width: 1200px;
min-height: 1000px;
margin-left: auto;
margin-right: auto;
}
.headersection{
max-width: 1200px;
max-height: 96px;
margin-left: auto;
margin-right: auto;
}
/* Styling of complementary banner */
.usp-banner {
display: block;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 3px;
font: 14px "Open Sans",Helvetica,Arial,sans-serif;
line-height: 1.5rem;
color: #374147;
background: #fff;
height: 30px;
}
#media screen and (max-width: 600px) {
.usp-banner{
display: none;
}
}
#media screen and (max-width: 768px) {
.usp-banner{
display: none;
}
}
.uspBannerList ul{
margin-left: 0;
padding-left: 0;
}
.uspBannerList li{
list-style-type: none;
margin-right: 2.5%;
margin-left: 2.5%;
width: 45%;
float: left;
height: auto;
}
/*Styling of searchbar */
.search {
width: 35%;
position: relative;
display: flex;
left: 12%;
margin: auto;
}
#media screen and (max-width: 600px) {
.search{
width: 50%;
}
}
#media screen and (max-width: 768px) {
.search{
width: 60%;
}
}
.searchTerm {
width: 300px;
border: 3px solid #fff;
border-right: none;
padding: 5px;
height: 36px;
border-radius: 5px 0 0 5px;
outline: none;
color: #374147;
}
#media screen and (max-width: 600px) {
.searchTerm{
width: 100px;
}
}
.searchTerm:focus{
color: #374147;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #fff;
background: #57bdfc;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Styling of the header */
.header {
padding: 35px;
text-align: center;
background: #57bdfc;
color: white;
}
.logo {
height: 96px;
float: left;
position: relative;
}
#media screen and (max-width: 600px) {
.logo{
margin-left: 5px;
}
}
#media screen and (max-width: 768px) {
.logo{
margin-left: 5px;
}
}
Update these css
.headersection {
max-width: 1200px;
max-height: 96px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.search {
display: flex;
}
if you want to have padding for the header and the height of .headersection be limit
you should set position absolute for .logo as below:
.logo { position: absolute; top: 0; bottom: 0; margin: auto}
and set position relative for .header.
but this is not good practice.
you can easily use this code for better result :
.header {
display: flex;
align-items: center;
}
remove .headersection because there is no need
this might be helpful
.logo {
height: 96px;
float: left;
position: relative;
margin-top: -15px; <--- adjust according to your need..
}
I want my .logo to be in the middle for the small screens, and on the left for all of the other screens. The .logo stays on the left until the screen gets big and then moves a little to the right, but I would like it to stay into the middle until the screen gets to the breakpoint for bigger screens. I don't know a whole lot about flexbox, but I was hoping that y'all would be able to tell me how to do this!
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mad Men Software | Sometimes Crazy is Just What We Need</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="css/normalize.min.css">
</head>
<body>
<header class="header">
<h1 class="logo">Logo</h1>
<ul class="nav">
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</body>
</html>
and here is my css:
/******************************
Flexbox Layout
*******************************/
.header, .nav {
display: flex;
flex-direction: column;
}
.header {
justify-content: space-between;
}
.nav {
flex: 1;
justify-content: space-around;
}
#media all and (min-width: 670px) {
.header, .nav {
flex-direction: row;
}
}
#media all and (min-width: 1030px) {
.nav {
flex: none;
}
}
/******************************
Additional Styling
*******************************/
body {
margin: 0;
font-family: Helvetica;
background: #5fcf80;
}
.header {
padding: 10px 0;
margin: 0 auto;
}
.logo {
background: url('/HTML/MadMenTransparent/MadMenOfficialLogo.png') center center no-repeat;
width: 150px;
min-height: 70px;
background-size: contain;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.nav {
list-style: none;
}
.nav li {
margin: 12px 0 12px 28px;
}
.nav li a {
text-decoration: none;
color: #fff;
font-size: 12px;
text-transform: uppercase;
}
.nav li a:hover {
color: rgba(255,255,255,0.7);
}
.nav li:last-child a {
background: rgba(255,255,255,0.3);
border-radius: 2px;
transition: 200ms ease-in-out;
padding: 8px 16px 7px;
}
.nav li:last-child a:hover {
background: rgba(255,255,255,0.5);
color: #fff;
}
#media all and (min-width: 1030px) {
.header {
width: 1030px;
min-width: 768px;
}
}
/*************************
Clearfix
*************************/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
You can add a breakpoint at ur css like this:
#media only screen and (min-device-width: 700px) and (max-device-width: 1024px) {
header {
position: relative;
}
header ul.nav {
margin-top: 150px;
}
.logo {
position: absolute;
left: 50%;
margin-left: -75px;
}
}
I have tried everything and failed. My current WordPress theme is not so mobile friendly, in fact, even at 768x1024 resolution it goes all crazy. I have only adjusted the content width, and sidebar width.
It is perfect at most of the screens, but if I try to view it on other devices, such as iPad, Kindle, it doesn't look right.
Screenfly iPad view: http://quirktools.com/screenfly/#u=http%3A//tryonlineroulette.com/&w=768&h=1024&a=22
Live website demo: http://tryonlineroulette.com
And here is the code that is responsible for mobile or different resolution view:
/***** Media Queries *****/
#media screen and (max-width: 1024px) {
.mh-container { width: 980px; }
#main-content { width: 630px; }
.main-nav { width: 100%; }
.loop-header, .loop-thumb { width: 100%; float: none; margin-right: 0; }
.loop-thumb, .loop-header .entry-meta { margin-top: 20px; }
.entry-title-wrap, .entry-meta-wrap { float: none; width: 100%; }
.entry-title-wrap { margin-bottom: 20px; margin-bottom: 1.25rem; }
.entry-header .entry-meta { float: left; }
.commentlist ul, .commentlist ol { margin: 0 0 30px 0; margin: 0 0 1.875rem 0; }
.commentlist ul ul, .commentlist ol ol { margin: 0; }
}
#media screen and (max-width: 767px) {
.mh-container { max-width: 440px; width: 90%; }
#main-content, #main-sidebar { float: none; width: 100%; margin-right: 0; }
#main-content { margin-bottom: 30px; margin-bottom: 1.875rem; }
[class*='mh-col-'] { float: none; width: 100%; margin: 0; }
.js .slicknav_menu { display: block; }
.js .main-nav { display: none; }
.header-wrap { padding: 0; }
.logo { padding: 40px 0; padding: 2.5rem 0; }
.latest-news-widget .news-item { margin-bottom: 30px !important; margin-bottom: 1.875rem !important; }
}
Any help will be much appreciated!
Thanks
I was able to do the Accordion Nav bar to respond on laptop/desktop when a certain size has meant. However, it doesn't respond for any mobile devices. Another issue that I am having is it is not displaying the icon for the Accordion Menu bar for either desktop and mobile devices. Any help would be appreciated to resolve the issue I am having.
Thank you
Responsive CSS:
/*This is the placeholder for responsive CSS that we will implement for mobile design*/
/* Smartphones ----------- */
#media screen and (min-width : 240px) and (max-width: 519px){
/* Styles */
#content{
float:none;
padding:0;
width: auto;
}
img{
max-width: 100%;
height: auto;
width:auto\9; /*for ie8*/
}
body{
float:left;
font-family: 'Fabrica';
}
#logo {
margin-right:auto;
max-width: 100%;
height: auto;
padding: 0;
}
#wrapper{
margin: 0 auto;
}
#wrapper p{
text-indent: 0;
}
h1, h2, h3 {
font-family: 'Fabrica';
}
nav{
position: relative;
min-height: 40px;
}
nav ul{
position:absolute;
width: 180px;
padding: 5px,0;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff url(.../img/menu-bar-mobile.jpg) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
nav ul:hover li{
display: block;
margin: 0 0 5px;
}
nav a:hover {
display:block;
}
nav li{
display:none;
margin:none;
}
#banner{
display: none;
}
footer{
font-family: 'Fabrica';
float:left;
}
}
I am working on a mobile responsive website.
I have the navigation menu with the fixed position.
Right after I close the nav-menus div I have an image that has to be right under it. The thing is that the image goes under the fixed div of the menu.
What is the solution for this?
I want the yellow banner to be fully visible under the nav bar. now it's just under + behind it.
This is an example of what I have :
HTML code:
<!DOCTYPE html>
<html >
<body style="height:100%;">
<div data-role="panel" id="menu" class="" style="padding: 45px 0; margin: 0; " >
<div class="ui-panel-inner">
// the main menu in the background
</div>
</div>
<div id="superDiv" style="background-color: white; -webkit-transition: width 2s; transition: width 2s; height: 130%; ">
<div class="main" style="height: 100%;">
<div class="sidebar">
// menu items
</div>
<div class="header_space"></div> // I used this but it's now working good with precentages..
<img src="banner.png" id="mob-banner"/> // this is the banner
<div class="dynamicPage">
// content of the page..
</div>
</div>
</div>
</body>
</html>
The CSS code:
/******************/
/*** MOBILE ******/
/****************/
.header_space{
display: none;
height: 5.1%;
}
#mob-menu-btn{
display: none;
}
.sub-menu{
display: none;
}
#mob-home-btn{
display: none;
}
#mob-logo{
display: none;
}
#mob-banner{
display: none;
}
.makeFixed{
position: fixed;
}
/*****************************************************************/
#media (max-width: 604px) {
.main{
width: 100%;
/*overflow: hidden;*/
overflow-x: hidden;
}
.sidebar{
float: initial;
width: 100%;
padding: 0;
position: fixed;
z-index: 100;
background-image: url('top_background.png');
text-decoration: none;
}
.header_space{
display: inherit;
height: 4.7%;
}
.sports{
/*display: none;*/
padding: 0 ;
background-color: #fff;
margin: 0;
width:100%;
}
.list{
width: 100%;
overflow: hidden;
overflow-y: auto;
top: -10%;
overflow: hidden;
overflow-y: auto;
height: 880%;
display: none;
}
.sports li{
list-style-image:none;
list-style-type: none;
border-bottom: 2px solid #eeeeee;
margin-bottom: 0px;
margin-left: 0px;
/*padding-top: 15px;
padding-bottom: 15px;*/
padding-left: 10px;
width:100%;
font-family: arial;
text-decoration: none;
overflow: hidden;
/*height: 27px;*/
z-index: 100;
}
.sports a li {
text-decoration: none;
}
.sports2{
display: none;
margin-bottom: 0;
overflow: hidden;
}
.sub-menu{
display: inherit;
float: left;
cursor: pointer;
width: 30px;
/*margin-right: 20px;*/
position: relative;
bottom: 7px;
z-index: 900;
position: relative;
top: 7px;
padding-right: 17px;
}
.sports2 li{
list-style-image:none;
list-style-type: none;
border-bottom: 0px solid #eeeeee;
margin-bottom: 0px;
margin-left: 0px;
/*padding-top: 15px;
padding-bottom: 15px;*/
padding-left: 0px;
width:100%;
font-family: "arial";
text-decoration: none;
overflow: hidden;
}
.sports2 div{
padding: 15px 0;
}
#mob-menu-btn{
float: right;
width: 10%;
display: inherit;
cursor: pointer;
margin-top: 0.8%;
}
#mob-home-btn{
display: inherit;
cursor: pointer;
margin-top: 0.8%;
width: 10%;
float: left;
}
#mob-logo{
display: inherit;
text-align: center;
margin: 0.2% auto;
width: 30%;
}
#mob-banner{
display: inherit;
}
.banner{
display: none;
}
.content{
width:100%;
background-color: white;
}
.logo{
padding-top: 1px;
}
#cat-header{
display: none;
}
.line{
display: none;
}
.table {
width: 100%;
}
#top-pages{
display: none;
}
.top-pages{
display: none;
}
.category-link{
float:left;
padding-top: 25px;
width: 510px;
padding: 15px 0;
}
.content h1 {
color:#031c3f;
font-size:24px;
text-align: left;
font-family: "UScoreRGK";
margin-left: 7px;
}
.content p {
margin-left: 10px;
margin-right: 10px;
}
#active_line{
margin-left: 10px;
margin-right: 10px;
}
#menu {
z-index: 0;
top: 0px;
position: absolute;
/*right: 0px!important;
left: auto!important;*/
}
#menu li {
list-style: none!important;
}
}
#media (min-width : 414px) and (max-width : 533px) {
.category-link{
width: 460px;
}
}
#media (min-width : 375px) and (max-width : 414px) {
.category-link {
width: 340px;
}
.wcmText ul, ol{
margin: 0 0 1em -2.5em;
}
.wcmText p{
margin-top: 0;
}
.wcmText h1, h2{
margin-top: 0;
margin-bottom: 0;
font-size: 110%;
}
}
#media (min-width : 360px) and (max-width : 375px) {
.category-link {
width: 282px;
}
.sidebar{
height: 38px;
}
}
#media (min-width : 320px) and (max-width : 360px) {
.wcmText ul, ol{
margin: 0 0 1em -2.5em;
}
.wcmText p{
margin-top: 0;
}
.wcmText h1, h2{
margin-top: 0;
margin-bottom: 0;
font-size: 110%;
}
}
#media (min-width : 240px) and (max-width : 320px) {
.sidebar{
background-image: url('top_background-320-2.png');
height: 52px;
}
#mob-menu-btn {
width: 7%;
margin-top: 4.8%;
margin-right: 4%;
}
#mob-home-btn {
width: 7%;
margin-top: 4.8%;
margin-left: 4%;
}
#mob-logo {
margin: 2% auto;
width: 45%;
}
.header_space {
height: 52px;
}
.list {
width: 99.5%;
overflow: hidden;
overflow-y: auto;
top: -9%;
overflow: hidden;
overflow-y: auto;
height: 803%;
}
.sports li {
width: 96%;
}
.content h1 {
color:#031c3f;
font-size:24px;
text-align: left;
font-family: "UScoreRGK";
margin-left: 7px;
}
.content p {
margin-left: 10px;
margin-right: 10px;
}
.category-link{
float:left;
padding-top: 25px;
width: 230px;
padding: 15px 0;
}
}
It looks like the only thing you are missing to make the ".header_space" work is to add
style="height: 100%;" to your HTML tag
<html style="height: 100%;">
or in your CSS
html { height:100% }
all your height properties, for example "height:100%" on the BODY tag, are not working.
although, i don't think your solution is an elegant one.
I would prefer to add
#media (max-width: 604px) {
/* lets say 50px is the height of your mobile menu */
#mob-banner { margin-top: 50px; }
}
to the the media query that handles your mobile views, instead of
<div class="header_space"></div>