ERRORS
#media only screen (min-width: 1021px) and (max-width: 1180px) {
.twee img {
margin-top: 3em;
}
.drie {
margin-top: 3em;
}
.audiovisual iframe {
width: 90%;
}
.cp img {
width: 75%;
height: 75%;
display: inline;
padding: 0;
}
}
#media only screen (min-width: 791px) and (max-width: 1020px) {
body {
background-image: url(IMG/Sam-open-copy-1020.jpg);
}
.twee img {
margin-top: 7em;
}
.drie {
margin-top: 7em;
}
.zes {
margin-top: 2em;
}
.audiovisual iframe {
width: 90%;
}
.kaart iframe {
width: 75%;
height: 75%;
padding: 0;
margin: 0;
padding-bottom: 2em;
}
.cp img {
width: 75%;
height: 75%;
display: inline;
padding: 0;
}
#totop {
right: 0;
}
}
So this is my code, my mediaqueries won't apply on my HTML.
When I validate I got these errors.(see the image ERRORS) But I can't find out what's wrong with it? I checked everything but probably I can't find it because I look over it or something....
Add an extra 'and' in your #media query:
#media only screen and (min-width: 1021px) and (max-width: 1180px) { ...
Related
I add a TOC to my HTML document and use the following CSS to style it. But I can't close the blue gap in the picture below? I don't find the right property.
image description
<style type="text/css">
.main-container {
max-width: 100%;
}
#TOC {
margin: 20px 0px 1px 0px;
}
#media (max-width: 1800px) {
#TOC {
width: 200px;
margin-left: -20px;
}
}
.toc-content {
padding-left: 1px;
padding-right: 1px;
}
div.main-container {
max-width: 100%;
}
div.tocify {
width: 50%;
max-width: 100px;
max-height: 85%;
}
#media (max-width: 1800px) {
div.tocify {
width: 100%;
max-width: none;
}
}
</style>
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:
Is there something wrong with my styles or media query? When im in my phone i lose the ability to scroll down. here is my only media query
#media (max-width: 568px) {
header {
padding: 1em 0;
position: fixed;
.logo {
width: 200px;
}
.main-nav {
display: none;
}
#burger-icon {
width: 27px;
display: block;
}
}
#section1 {
height: 500px;
text-align: center;
}
#section2 {
.col-1 {
width: 100%;
text-align: center;
}
.col-2 {
width: 100%;
padding: 0;
margin-left: 0;
margin-top: 20px;
display: block;
}
}
}
Try this
#media screen and (max-width: 568px) {
header {
padding: 1em 0;
position: fixed;
.logo {
width: 200px;
}
.main-nav {
display: none;
}
#burger-icon {
width: 27px;
display: block;
}
}
#section1 {
height: 500px;
text-align: center;
}
#section2 {
.col-1 {
width: 100%;
text-align: center;
}
.col-2 {
width: 100%;
padding: 0;
margin-left: 0;
margin-top: 20px;
display: block;
}
}
I fixed it, it was the skrollr declaration on my script it was my own mistake thankyou for all the help i think the skrollr.js has issue with mobile.
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 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 */
}