https://blendbee.com
This is a WordPress site. The top part of the header needs some styling improvements for smaller screen sizes:
Center the logo
Some padding or margin above the logo (so it doesn't touch the top bar)
Less whitespace above and below the menu icon
Here's the current HTML code:
<div class="header-wrap">
<header id="header" class="site-header " role="banner">
<div class="row">
<div class="large-12 small-12 columns">
<div class="logo">
<a href="https://blendbee.com/" title="BlendBee – Your Tea. Your Way." rel="home">
<img data-interchange="[https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png, (default)], [https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png, (retina)]" alt="" class="hideie" data-uuid="60a3bc00-c94c-c4ba-258c-a9faa107e418" src="https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png">
<img src="https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png" alt="" class="ie">
<noscript><img src='https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png' alt='BlendBee – Your Tea. Your Way.'></noscript>
</a>
</div>
<div id="mobile-menu-button" class="show-for-small">
<a class="secondary button" id="mobileMenuButton" href="#mobile-menu">
<span class="mobile-menu-icon"></span>
<span class="mobile-menu-icon"></span>
<span class="mobile-menu-icon"></span>
</a>
</div>
</div>
</div>
</header>
</div>
And related CSS:
#media screen and (max-width: 767px) {
.mix.half.mix_all {
width: 50%;
float: left;
}
.mix.mix_all {
width: 100%;
}
.sidebar.large-3.small-12.columns {
width: 100%;
float: none;
}
#soc-icons-wrap.closed {
margin-bottom: 20px;
height: 50px;
}
.large-6.small-12.columns p{
width: 100% !important;
}
#header.scroll-to-fixed {
position: static;
}
}
#mobile-menu-button .button {
margin-bottom: 0;
padding: 0.75em 0.5em;
width: auto
}
.mobile-menu-icon {
background: #fff;
height: 0.25em;
width: 2.5em;
display: block;
}
.mobile-menu-icon + .mobile-menu-icon {
margin: 0.25em 0 0
}
#media only screen and (min-width: 767px) {
body.admin-bar #header.scroll-to-fixed {
top: 32px;
}
}
#media only screen and (max-width: 767px) {
.logo {
float: none;
text-align: center;
}
#header.scroll-to-fixed {
position: static !important;
height: auto;
width: auto;
border-bottom: none;
}
#header.scroll-to-fixed .logo {
width: 300px;
padding-top: 20px;
position: static;
top: 0;
margin: 0 auto;
}
#header.scroll-to-fixed .logo img {
max-height: 140px;
width: 100%;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
#mobile-menu .tiled-menu {
float: none;
margin: 0;
padding: 0;
}
#mobile-menu .main-menu-item {
float: none;
width: 100% !important;
}
#mobile-menu .menu-tile {
height: 60px !important;
background-image: none !important;
}
#mobile-menu .item-title,
#mobile-menu .tiled-menu > .menu-item-language > a {
top: 5px;
font-size: 20px;
left: 25px;
}
#mobile-menu .tile-icon,
#mobile-menu .tiled-menu > .menu-item-language:before {
right: 10%;
width: auto;
}
#mobile-menu .tiled-menu > .menu-item-language {
height: 60px !important;
}
#mobile-menu .style-metro .sub-menu {
padding-top: 3px;
}
}
#media only screen and (min-width: 640px) and (max-width: 1024px) {
.tiled-menu .sub-menu {
position: absolute;
}
.tiled-menu {
text-align: center;
}
.main-menu-item {
text-align: left;
}
.tiled-menu .metro-menu-item .sub-menu {
position: absolute;
}
}
wrapper i {
margin: 84px 0 0 110px;
}
.entry-header .entry-meta .entry-tags {
margin-left: 0;
}
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns {
position: relative;
top: 12px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns .answer {
width: 33%;
margin-top: 20px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns .answer input {
padding: 18px 5px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns {
width: 13%;
margin-top: 20px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
width: 33%;
margin-top: 20px;
}
.site-header {
border-bottom: none;
}
ol ul, ul ol, ul ul, ol ol {
-webkit-margin-before: 0px;
-webkit-margin-after: 10px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns p {
float: left;
width: 70%;
text-align: left;
margin-top: 0;
}
#media only screen and (min-width: 320px) and (max-width: 767px) {
.tiled-menu {
left: -3px !important;
}
.tiled-menu>li>ul {
padding-top: 0;
}
}
#media screen and (max-width: 320px) {
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
text-align: center;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
margin-left: 28%;
margin-top: 0;
width: 52%;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
margin-top:0 ;
}
.large-3.small-12.columns input{
width: 145px;
}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
text-align: center;
}
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
text-align: center;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
margin-left: 36%;
margin-top: 0;
width: 35%;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
margin-top:0 ;
}
.large-3.small-12.columns input{
width: 148px;
}
}
#media screen and (min-width: 480px) and (max-width: 800px) {
.site-header .logo {
margin: 0 auto 20px;
}
.site-header.scroll-to-fixed .logo {
margin: 0;
}
}
#media screen and (min-width: 481px) and (max-width: 568px) {
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
text-align: center;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
margin-left: 38%;
margin-top: 0;
width: 30%;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
margin-top:0 ;
}
.large-3.small-12.columns input{
width: 149px;
}
}
#media screen and (min-width: 569px) and (max-width: 600px) {
.category-submenu .sub-nav .sub-nav dd {
margin-left: 0.8rem !important;
margin-bottom: 0;
}
.mix .entry-thumbnail img {
width: 100% !important;
}
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
text-align: center;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
margin-left: 38%;
margin-top: 0;
width: 28%;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
margin-top:0 ;
}
.large-3.small-12.columns input{
width: 148px;
}
.pricetable-column {width: 50% !important;}
}
#media screen and (min-width: 768px) and (max-width: 800px) {
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns p{
float: left;
width: 56%;
text-align: left;
margin-top: 0;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns {
width: 13%;
margin-top: 20px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
width: 26%;
margin-top: 20px;
}
}
#media screen and (min-width: 768px) and (max-width: 1000px) {
.logo {
float: none;
margin: 0 auto;
}
#header.scroll-to-fixed .logo {
display: none;
}
.main-menu-item {
display: inline-block;
margin-left: 0;
float: none;
text-align: left;}
.tiled-menu {
float: none;
text-align: center;
}
}
#media screen and (min-width: 640px) and (max-width: 767px) {
.tiled-menu>li>ul {
padding-top: 25px;
}
}
If anyone can help, I'd be much appreciative - thanks :)
First - Try using this code for centering your logo and adding some padding to the top:
.logo {
padding-top: 50px;
width: 280px;
margin: auto;
}
Enter this code in the "Custom CSS" part when you open your customizer.
Second - This code for removing some white space below your menu icon:
#mobile-menu-button {float: none;text-align: center;}
Replace this part in the responsive.min.css file.
Third - This code for removing some white space above your menu icon:
#mobile-menu-button {
margin: 1rem 0 0;
}
Replace this part in the foundation.css file.
As you will see, it works:
Related
My page has a white space on the right side when using margins and padding in the mobile view.
My page:
https://www.blazor.nl/uploads/get/a83c2617117c88b0/IMG-0002
My CSS:
.page-wrapper .page-container {
margin: 0;
padding: 0;
position: relative; }
.page-wrapper .page-container .content-wrapper {
margin: 0 50px 0 50px;
min-height: 600px;
position: relative;
top: -120px; }
.page-wrapper .page-container .content-wrapper .maincontent {
padding: 30px; } }
#media only screen and (min-width: 768px) and (max-width: 992px) {
.page-wrapper .page-container .content-wrapper .maincontent {
padding: 20px; } }
.page-wrapper .page-container {
margin: 0;
padding: 0;
position: relative; }
.page-wrapper .page-container .content-wrapper > h2 {
color: #ffffff;
margin: 0 0 10px;
font-weight: 300; }
#media (max-width: 767px) {
.page-wrapper .page-container .content-wrapper > h2 {
color: #696969;
font-size: 24px; } }
#media (max-width: 992px) {
.page-wrapper .page-container .content-wrapper {
margin: 30px 30px 0 150px; } }
#media (max-width: 767px) {
.page-wrapper .page-container .content-wrapper {
margin: 15px; } }
I am using a snippet which can be found here: https://bootsnipp.com/snippets/dexRM. I also use Bootstrap 3.
Thanks
I'm working on this website http://josedelavega.nowcommu.myhostpoint.ch
(Made using this Wordpress theme http://themeforest.net/item/orquidea-responsive-wordpress-theme/full_screen_preview/5120180)
On Desktop and tablet everything works great, but not on Smartphones (Samunsg Galaxy S6 in my case). The content looks like "blocked" or "hidden". If you check on Desktop first and than on Smartphone you can see the difference.
There is something wrong into the Media Queries?
#media (min-width: 1200px) {
}
#media (min-width: 980px) {
}
#media (max-width: 1000px) {
.cs-style-4 figcaption .descrtext {
display: none!important;
}
nav#topmenu {
display: none;
}
nav#mobilenav {
display: block;
}
.serviceslist,
.teamlist,
.plicetable {
margin-right: 15px;
}
.singleblog .textblock p {
margin-right: 15px;
margin-left: 15px;
}
.singleblog .slidergallery .sliderarrows .ltar {
margin-left: 15px;
}
.singleblog .slidergallery .sliderarrows .rgshare {
margin-right: 15px;
}
.leftpart {
margin-left: 15px;
width: 48%;
}
.rightpart {
margin-right: 15px;
width: 48%;
}
}
#media (max-width: 980px) {
.serviceslist .mobiledesc {
display: block;
}
.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
display: none;
}
}
#media (max-width: 960px) {
}
#media (max-width: 780px) {
.blogarchive article.post {
margin-right: 5px;
}
.gallerypage .galleryitems .galitem .imagegally .mask2 .gallydate {
display: none;
}
.contacttop .leftpart {
width: 100%;
float: none;
margin-bottom: 20px;
}
.contacttop .rightpart {
width: 100%;
float: none;
}
.abouttwotop .leftpart {
width: 100%;
float: none;
margin-bottom: 20px;
}
.abouttwotop .rightpart {
width: 100%;
float: none;
}
.gallerypage .galleryitems .galitem,
.gallerypage .gallpbd .galitem {
width: 50%;
}
.singleblog .slidergallery .sliderbox {
height: 500px;
}
.singleblog .slidergallery .sliderbox img {
width: auto;
max-height: 500px;
}
}
#media (max-width: 640px) {
.rightsidebar,
.leftsidebar {
display: none;
}
.rightsidebaron,
.leftsidebaron {
margin-right: 0;
margin-left: 0;
}
.wrapper .subtitle {
line-height: 26px;
}
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr {
height: auto;
}
#no-more-tables td {
/* Behave like a "row" */
border: none;
position: relative;
padding-left: 50%;
white-space: normal;
text-align: left;
height: auto;
padding-bottom: 20px;
padding-top: 10px;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-tables td:before {
content: attr(data-title);
}
.singleblog .slidergallery .sliderbox {
height: 400px;
}
.singleblog .slidergallery .sliderbox img {
width: auto;
max-height: 400px;
}
.serviceslist .titleservice {
font-size: 20px;
}
}
#media (max-width: 480px) {
header#top .logo {
width: 280px;
margin: 0 auto;
margin-top: 130px;
}
header#top .headertext {
width: 320px;
margin: 0 auto;
margin-top: 35px;
}
header#top a.gobot {
margin: 0 auto;
margin-top: 65px;
}
.teamlist li:nth-child(3n+3) {
margin: 0 auto;
margin-bottom: 40px!important;
}
.teamlist li {
max-width: 295px;
width: 100%;
float: none;
margin: 0 auto;
margin-bottom: 40px!important;
}
footer#footer-main p.copy {
display: block;
width: 100%;
text-align: center;
margin-bottom: 5px;
float: none;
}
footer#footer-main div.socialprof {
display: block;
width: 100%;
float: none;
text-align: center;
}
.blogarchive article.post {
width: 99%;
float: none;
}
.commentform section.comments {
width: 100%;
float: none;
margin-bottom: 30px;
}
.commentform section.respond {
width: 92%;
float: none;
}
.commentform section.comments .scrollbox {
width: 100%;
}
.contactleft,
.leftpart {
width: 90%;
margin-left: 15px;
float: none;
margin-bottom: 40px;
}
.contactright,
.rightpart {
width: 90%;
float: none;
margin-left: 15px;
}
.teamlist {
width: 90%;
overflow: hidden;
}
.wrapper {
overflow: hidden;
}
nav#mobilenav select {
width: 40%;
font-size: 16px;
}
.gallerypage .galleryitems .galitem,
.gallerypage .gallpbd .galitem {
width: 100%;
}
.opentime .timelineopening li {
float: none;
}
.opentime .timelineopening {
text-align: center;
}
.singleblog .slidergallery .sliderbox {
height: 300px;
}
.singleblog .slidergallery .sliderbox img {
width: auto;
max-height: 300px;
}
.serviceslist .titleservice {
font-size: 18px;
}
}
#media (max-width: 380px) {
.singleblog .slidergallery .sliderbox {
height: 200px;
}
.singleblog .slidergallery .sliderbox img {
width: auto;
max-height: 200px;
}
.serviceslist .titleservice {
font-size: 16px;
}
}
You have to check your responsive css file queries it will be look like that:
#media only screen and (max-width: 767px) {
//your code
}
Just check it. Sometimes its given in theme's options to display content or hide them.
I have a media query written but it breaks at certain point, I am now trying to optimize the query to the following :
#media only screen and (max-width: 1366px) and (min-width: 1280px) {
}
#media only screen and (max-width: 1280px) and (min-width: 1024px) {
}
#media only screen and (max-width: 1024px) and (min-width: 768px) {
}
#media only screen and (max-width: 768px) and (min-width: 640px) {
}
#media only screen and (max-width: 640px) and (min-width: 320px) {
}
Here is the one which i am using now
#media only screen and (max-width: 1366px) {
.menuTemplate3
{
margin-top: 3%;
}
.menuTemplate3 a
{
padding: 0 30px;
}
.wrap{
width:95%;
}
.span_of_2 {
padding: 3% 0;
margin: 4% 0;
}
.menu li {
margin: 6px 16px;
}
}
#media only screen and (max-width: 1280px) {
.menuTemplate3
{
margin-top: 3% !important;
}
.menuTemplate3 a
{
padding: 0 25px !important;
}
.wrap{
width:95%;
}
.menu li {
margin: 6px 12px;
}
.booking_room h4 {
font-size: 1.2em;
}
.booking_room p {
font-size: 0.8125em;
}
.f_nav li {
margin-left: 10px;
}
}
#media only screen and (max-width: 1024px) {
.menuTemplate3
{
margin-top: 3% !important;
}
.menuTemplate3 a
{
padding: 0 17px !important;
}
.wrap{
width:95%;
}
.menu li {
margin: 10px 8px;
}
.menu li a {
font-size: 0.8725em;
}
.reservation ul li.span1_of_3 {
width: 14.33333%;
margin-left: 15px;
}
.f_nav li a {
padding: 0 0px;
}
.grid1_of_3 {
float: left;
width: 100% !important;
margin-left: 0%;
}
}
#media only screen and (max-width: 768px) {
.menuTemplate3
{
margin-top: -3% !important;
}
.menuTemplate3 a
{
padding: 0 9px !important;
}
.wrap{
width:95%;
}
.row .grid_3 {
float: right;
width: 38.333333% !important;
}
.menu {
display: none;
}
.logo img
{ margin-left: -14% !important; }
.h_right {
width: 100%;
float: none;
}
.row {
width: 70% !important;
}
.top-nav {
display: block;
margin: 10px 0;
z-index: 999;
position: relative;
}
.nav a{
display: block;
}
.reservation ul li {
float: none;
display: inline-block;
}
.booking_room {
float: none;
width: 98%;
}
.reservation {
float: none;
width: 98%;
}
.b_room {
display: inline-block;
}
.grid1_of_3 h4 a {
font-size: 1.4em;
}
.copy {
float: none;
text-align:center;
}
.f_nav {
float: none;
text-align:center;
margin-top: 20px;
}
.soc_icons {
text-align: center;
margin: 20px 0;
}
.content {
float: none;
width: 100%;
margin-right: 0%;
}
.sidebar {
float: none;
width: 100%;
padding-left: 0%;
border-left: none;
}
.sidebar h4 {
margin: 4% 0 4%;
}
.sel_room {
float: none;
width: 100%;
}
.sel_room.left {
margin-left: 0%;
}
.service_list li {
width: 48.3333%;
margin-bottom:4%;
}
.service_list li:nth-child(3){
margin-left: 0;
}
.reservation h5 {
margin: 10px 0;
}
}
#media only screen and (max-width: 640px){
.menuTemplate3
{
margin-top: 3% !important;
}
.menuTemplate3 a
{
padding: 0 8px;
}
.wrap{
width:95%;
}
.logo{
width: 20%;
}
.h_right{
width:100%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.reservation ul li.span1_of_1 {
width: 100%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.book_date input[type="text"] {
width: 96% !important;
}
.reservation ul li.left {
margin-left: 0px;
}
.reservation ul li.span1_of_2 {
width: 49.33333%;
}
.reservation ul li.span1_of_3 {
width: 47.33333%;
margin-left: 10px;
}
.grid1_of_3 {
float: left;
width: 100%;
margin-left: 0%;
}
.grid1_of_3 h4 a {
margin: 2% 0;
}
.grid1_of_3 img{
margin-top:4%;
width: 10%;
}
.online_reservation {
margin-top: -30px;
}
.reservation ul li.span1_of_2 {
width: 48.33333%;
}
.res_btn form input[type="submit"] {
width: 50% !important;
padding: 10px;
}
.contact_left {
float: none;
margin-right: 0%;
width: 100%;
}
.contact_right {
float: none;
width: 100%;
}
.logo img{
margin-left: 0%;
margin-top: 2%;
}
}
#media only screen and (max-width: 530px) {
.menuTemplate3
{
margin-top: -11%;
width: 70%;
}
.menuTemplate3 a
{
padding: 0 15px;
}
.wrap{
width:95%;
}
.logo{
width: 32.333333%;
}
.h_right{
width:60.333333%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.online_reservation {
margin-top: 0px;
}
.date_btn {
margin: 0 0 20px;
}
.logo img{
margin-left: 0%;
margin-top: 2%;
}
}
#media only screen and (max-width: 320px) {
.menuTemplate3
{
margin-top: -11%;
width: 70%;
}
.menuTemplate3 a
{
padding: 0 15px;
}
.wrap{
width:95%;
}
.logo{
width: 38.333333%;
}
.h_right{
width:60.333333%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.reservation {
padding: 10px;
width: 97%;
}
.booking_room {
width: 97%;
padding: 10px;
}
.hide{
display: none;
}
.reservation ul li.span1_of_2 {
width: 100%;
}
.reservation ul li.span1_of_3 {
width: 100%;
margin-left: 0px;
}
.book_date input[type="text"] {
width: 93% !important;
}
.soc_icons ul li {
margin-left: 0px;
}
.grids_of_img {
float: none;
width: 100%;
}
.grids_of_para {
float: none;
width: 100%;
margin-left: 0%;
}
.span2_of_1 {
float: none;
width: 100%;
margin-left: 0%;
}
.res_btn form input[type="submit"] {
width: 60% !important;
padding: 10px;
}
.service_list li {
float:none;
margin-left:0;
width: 100%;
margin-bottom: 4%;
}
.contact-form input[type="text"], .contact-form textarea {
width: 93% !important;
}
.contact-form input[type="submit"] {
padding: 10px;
width: 50% !important;
}
.logo img{
margin-left: 0%;
margin-top: 2%;
}
}
Can anybody help me with the use the optimized media query? I am confused to place the classes.
you should use max-width and min-width both for media query like this is example
You'll want to use both min and max widths to optimize:
#media (min-width: 1281px) and (max-width: 1366px) {
}
#media (min-width: 1025px) and (max-width: 1280px) {
}
#media (min-width: 769px) and (max-width: 1024px) {
}
#media (min-width: 641px) and (max-width: 768px) {
}
#media (min-width: 321px) and (max-width: 640px){
}
#media (min-width: 1px) and (max-width: 320px) {
}
I have a couple media queries in my stylesheet, each modifying some styles, but not others. I'm using the max-width query:
#media screen and (max-width: 1024px) {
#header .span6 { width: 60%; margin-left: 200px; }
#error .span6 { width: 60%; margin-left: 200px; }
#timer-block { width: 60%; margin-left: 200px;}
#timer { font-size: 5em; }
#start-pause { margin-left: 200px; }
.control { width: 297px; margin-top: 0; }
#footer { width: 60%; margin-left: 200px; }
}
#media screen and (max-width: 768px) {
#header .span6 { width: 80%; margin-left: 75px; }
#error .span6 { width: 80; margin-left: 75px; }
#timer-block { width: 80%; margin-left: 75px;}
#timer { font-size: 5em; }
#start-pause { margin-left: 75px; }
.control { width: 300px; margin-top: -5px; }
#footer { width: 80%; margin-left: 75px; }
}
#media screen and (max-width: 800px) {
#header .span6 { width: 80%; margin-left: 75px; }
h1 { font-size: 3.5em; margin-bottom: 0px;}
#error .span6 { width: 80%; margin-left: 75px; }
#timer-block { width: 80%; margin-left: 75px; }
#timer { font-size: 5em; }
.little { font-size: 0.5em; }
#start-pause { margin-left: 75px; }
.control { width: 312px; margin-top: -5px; }
#footer { width: 80%; margin-left: 75px; }
}
#media screen and (max-width: 600px) {
#header .span6 { width: 90%; margin-left: 25px; }
#error .span6 { width: 90%; margin-left: 30px; }
#timer-block { width: 90%; margin-left: 30px;}
#start-pause { margin-left: 30px; }
.control { width: 264px; margin-top: -5px; }
#footer { width: 90%; margin-left: 25px; }
}
#media screen and (max-width: 480px) {
#header { margin-top: -10px; }
#header .span6 { width: 90%; margin-left: 25px; }
h1 { font-size: 3em; margin-left: -15px; padding-left: 10px; }
#interval { width: 150px; height: 40px; font-size: 2em; margin-bottom: 20px; width: 150px; }
#error .span6 { width: 90%; margin-left: 25px; }
#timer-block { width: 90%; margin-left: 24px; height: 100px; padding: 10px; }
#start-pause { margin-left: 25px; }
.control { margin-top: -5px; width: 210px; }
#footer { width: 100%; margin-top: -20px; margin-left: 0; }
}
#media screen and (max-width: 320px) {
#timer-block { width: 90%; margin-left: 15px; padding: 10px; font-size: 0.8em; }
#header { margin-top: 0px; }
#header .span6 { margin-left: 37px; }
#interval { margin-top: -45px; margin-left: 20px; }
#error .span6 { width: 90%; margin-left: 15px; }
.control { width: 141px; margin-top: -10px; }
#start-pause { margin-left: 15px; }
#footer { width: 95%; margin-left: 10px; }
}
Is there a way I can change what I'm doing to make there be no collisions? This is the first time I use media queries so I may be missing something entirely.
Instead of
#media screen and (max-width: 480px)
You can use
#media screen and (max-width: 480px) and (min-width: 321px)
This way it will look only at screen sizes between 320 and 481;
instead of 0 and 481
Set a min width 1 pixel higher than the max width of the next query
Example
#media screen and (min-width: 769px) and (max-width: 1024px) {
#header .span6 { width: 60%; margin-left: 200px; }
#error .span6 { width: 60%; margin-left: 200px; }
#timer-block { width: 60%; margin-left: 200px;}
#timer { font-size: 5em; }
#start-pause { margin-left: 200px; }
.control { width: 297px; margin-top: 0; }
#footer { width: 60%; margin-left: 200px; }
}
I think you need to use min-width in this case to prevent collision, for example:
#media only screen and (min-width : 321px) and (max-width : 480px) {
/* Styles */
}
Once I accidentally left out some proper syntax for my media queries at the stated mobile viewport. It displayed correctly, which is awesome, but I'd like to be using the correct syntax, and am curious to know why / how this is occurring. Below are the styles involved.
/* Smartphones (Landscape) ----------- */
#media only screen and (min-width: 320px) and (max-width: 480px)
ul.ui-tabs-nav li.ui-state-active a {
background-color: #C6C699;
height: 17px;
text-shadow: none;
width: 77px;
}
.content .full header, .content .full .entry-summary, .content .full .entry-content, .content .full .entry-meta, .content .full .edit-link {
margin-top: 3px;
padding: 15px;
width: 100%;
}
#topbgimg { display: none; }
#topvidarea {
margin-left: 21%;
margin-right: 20%;
margin-top: -5px;
max-width: 400px;
}
#topmenucontain { display: none; }
.fmenu { display: none; }
#clogo { display: none; }
#youtube1, #youtube2 { display: none; }
#wrapper {
margin: 0 1em;
}
h1 {
font-size: 2em;
}
#logoimg { display: none; }
#notification {
height: 200px;
margin: 0;
width: 100%;
padding-top:20px;
}
.ui-tabs .ui-tabs-nav li a {
border: 3px solid white;
color: white;
}
#branding {
width: 100%;
padding: 1em 0;
margin: 0;
text-align: center;
}
#topbtn, #topbtn2, #topbtn3 {
width: 75px;
}
#topbtnbuy {
background: none repeat scroll 0 0 #C6C699;
border: 1px solid #C6C699;
color: #333333;
display: inline;
float: left;
font-family: Georgia;
font-size: 12px;
height: 42px;
margin-right: 10px;
margin-top: -1px;
width: 25%;
}
a.box:link {
min-width: 70%;
}
nav#access {
border-bottom: 1px dashed #CFCFCF;
position: relative;
text-align: center;
}
nav#access ul.menu li:nth-child(n+5) {
display: none;
}
.content {
min-height: 0;
background-image: none !important;
border-bottom: 1px dashed #CFCFCF;
}
/* Hide Background & Overlay Images */
.overlay {
display: none;
}
.has-background {
min-height: 0;
}
.content header, .content .entry-summary,
.content .entry-content, .content .edit-link,
footer.entry-meta {
width: 100%;
}
.content header, .has-background header {
margin-top: 2em;
}
.content header h2 a, .single .content header h2 {
font-size: 2em;
}
.content section.right,
.content section.left,
.content section.full,
.content section.center {
padding: 0;
}
.content section.center header,
.content section.center .entry-summary,
.content section.center .entry-content,
.content section.center .edit-link,
.content section.center footer.entry-meta,
.content section.right header,
.content section.right .entry-summary,
.content section.right .entry-content,
.content section.right .edit-link,
.content section.right footer.entry-meta {
left: 0;
}
#comments {
margin: 1em 0;
}
#comment, #commentform input,
#commentform #submit, #commentform #comment {
width: 416px;
}
.commentlist {
width: 424px;
}
#commentform #submit {
width: 430px;
}
#comments, #commentform #comment-reply {
width: 100%;
}
.cat-links, .entry-meta .sep:nth-child(n+4),
.comments-link, .edit-link {
display: none;
}
/* Footer */
#footer {
width: 100%;
padding: 1em 0;
}
#footer-widgets {
margin-bottom: 1em;
}
#footer .widget {
width: 45%;
margin: 0.5em 0;
}
.third-box {
width: 89%;
}
#buybutton { width: 95%; }
.scrolldowntext { margin-top: 40px; }
#notification {
background-color: #333333;
border-bottom: 5px solid #C6C699;
font-size: 22px;
height: 200px;
padding-top: 20px;
position: absolute;
width: 100%;
z-index: 9990;
}
#topcaption {
display: none;
}
#logoimg { display: none;}
#topmenucontain {
margin: -33px auto 0;
width: 50%; }
a.box:link {
color: #C6C699;
display: inline;
float: left;
font-family: Georgia;
font-size: 12px;
height: 50px;
margin-right: 10px;
min-width: 75px;
}
#videoscreenshot { height: 215px; width: 100%; }
.fancybox-iframe { display: hidden; }
}
Once I left out the additional { at the end of '#media only screen and (min-width: 320px) and (max-width: 480px)' all my media queries were being read?
Update: Just tried removing all styles within specified above viewport, in attempts to start from scratch properly in case some styles were whatever.
BUT, within starting, I simply am trying to hide the top menu within the viewport. And this is ignored and not rendering for some reason?
/* Smartphones (Landscape) ----------- */
#media only screen and (min-width: 320px) and (max-width: 480px) {
#topvidarea {
margin-left: 24%;
margin-right: 20%;
margin-top: -265px;
max-width: 400px;
}
#topmenucontain { display: none; }
}
You have no opening bracket in your media query but you do have a closing one:
#media only screen and (min-width: 320px) and (max-width: 480px) {
......
}
All your other media queries where probably being read because you were not properly closing your first query, and thus the query did not know where to begin and end.