I have tried to create media queries for mobile and tablet, and they do work when I'm on a normal browser (on my desktop computer and I make the screen smaller), but do not work when I'm on an actual mobile or tablet. I have done my CSS and HTML validation so I can't imagine it'd be that.
My website is up and running on my universities server so you could view my media queries from there: http://stc110.edu.csesalford.com/ or http://stc110.edu.csesalford.com/general.css
These are my media queries:
/*Styles for screen 600px and lower*/
#media handheld, screen and (max-width: 600px) {
#navigation {
height: auto;
}
#navigation ul {
width: 100%;
display: block;
height: auto;
}
#navigation li {
width: 50%;
float: left;
position: relative;
}
#navigation li a {
border-bottom: 1px solid #ff9999;
border-right: 1px solid #ff9999;
}
#navigation a {
text-align: left;
width: 100%;
text-indent: 25px;
}
header {
padding-top: 30px;
}
}
/*Styles for screen 480px and lower*/
#media handheld, screen and (max-width : 480px) {
#navigation {
border-bottom: 0;
}
#navigation ul {
display: none;
height: auto;
}
#navigation a#pull {
display: block;
background-color: #ff6666;
width: 100%;
position: relative;
}
#navigation a#pull:after {
content:"";
background: url('images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media handheld {
#navigation {
border-bottom: 0;
}
#navigation ul {
display: none;
height: auto;
}
#navigation a#pull {
display: block;
background-color: #ff6666;
width: 100%;
position: relative;
}
#navigation a#pull:after {
content:"";
background: url('images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
Please put below code inside head section
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
#media handheld is deprecated.
Instead, use:
#media only screen and (max-width: 600px) {
and
#media only screen and (max-width: 480px) {
Related
Im so new in CSS and trying to fix the following code..
I want a simple thing where the screen size is smaller than 400 change the image size..
it should work but it doesn't..
I tried to make
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
}
}
Media queries at the top of the CSS need !important to over rule the media query. Media queries at the bottom do not need !important. I placed the query at the top so I used !important to over rule any other style after.
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px !important;
}
}
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
I think this will work.
#media screen and (max-width: 500px) {
.left__img2 {
max-width: 10px;
}
}
Your code works well in the following example (resize your window), maybe it comes from a side effect of the rest of your code, can you show us the rest of your code?
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
background-color: red;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
background-color: yellow;
}
<div class="left__img2"><div>
I am having a hard time making the results boxes on this page responsive:
http://search.epicmountainhomes.com/i/deer-valley-real-estate
Does anyone know how to edit it using IDX broker or custom CSS?
Thank you very much!
Ok I figured it out:
/*Set Mobile Responsiveness One*/
#media only screen and (max-width: 500px) {
.IDX-resultsCell {
padding-bottom: 22px !important;
border-bottom: 1px solid #e5eeed !important;
clear: left!important;
width: 100%!important;
}
}
/*Set Mobile Responsiveness Two*/
#media only screen and (max-width: 500px) {
.IDX-grid .IDX-resultsPhotoImg {
height: 155%!important;
width: 100%!important;
clear: left!important;
left: 0!important;
position: absolute!important;
top: auto!important;
z-index: 0!important;
max-height: none;
max-width: none;
min-height: none;
min-width: none;
}
}
I do not know css and it seems hard to display a menu through my self-hosted wordpress site theme in the mobile version. The idea is to use the following code:
#sidebar-primary { display: none; }
Though seems that nothing happens when I add it. Is there a way to hide this element? Below is th whole code when the mobile version is present. Thanks
#media only screen and (max-width: 767px) {
.wrap { max-width: 300px; }
#branding {
float: left;
width: 100%;
position: relative;
}
#sidebar-header {
width: 100%;
margin-bottom: 10px;
}
.featured-wrapper, .aside, .content-wrap, #content, #sidebar-subsidiary .widget, #respond { width: 100%; }
.featured-post h2.entry-title a {
font-size: 12px;
line-height: 1.4em;
padding-right: 15px;
bottom: 87px;
}
.featured-post .byline {
bottom: 63px;
padding: .25em 15px .25em 1.3em;
}
.home.singular .byline { font-size: 10px; }
.menu-toggle {
display: block;
width: 100%;
}
#menu-primary {
float: left;
clear: both;
width: 100%;
margin-top: 10px;
}
#menu-primary .menu, .menu ul {
float: left;
width: 100%;
}
#menu-primary ul li {
clear: left;
display: block;
padding-left: 0;
background: none;
}
#menu-primary ul li a {
font-size: 20px;
margin-left: 0;
padding: 12px 15px;
}
#menu-primary li li a { font-size: 18px; }
#menu-primary li ul, #menu-primary li li { border: none !important; }
#menu-primary li li a:hover { background: none; }
#menu-primary ul li ul {
display: block !important;
float: left !important;
visibility: visible !important;
}
#menu-primary li ul {
display: block !important;
position: relative !important;
top: 0;
left: 30px;
}
#menu-primary ul li li ul { left: 30px !important; }
#menu-primary li:hover ul, #menu-primary li.sfHover ul {
display: block !important;
top: 0 !important;
}
#menu-primary li:first-child ul { left: 0; }
#menu-primary .sf-sub-indicator { background: none !important; }
#menu-secondary .sf-sub-indicator { background: none !important; }
.hentry {
width: 100%;
margin-right: 0;
}
.page-template-front .hentry:hover .read-more, .archive .hentry:hover .read-more, .search .hentry:hover .read-more { display: none; }
.page-template-front .hfeed-more .hentry {
float: left;
width: 100%;
margin-right: 0;
}
.comment-list li li { padding-left: 0; }
#sidebar-primary, #sidebar-secondary, #sidebar-subsidiary {
width: 100%;
clear: left;
}
#footer-content, #menu-subsidiary {
width: 100%;
margin-bottom: 20px;
}
#menu-subsidiary .menu { float: left; }
#menu-subsidiary li {
background: none;
float: none;
padding-left: 0;
margin-bottom: .4em;
}
#menu-subsidiary li a {
font-size: 10px;
line-height: 2.5em;
}
textarea { width: 96%; }
}
If it is not working then it looks like the style for mobile devices are defined in different #media query
Mostly max-width : 320px #media query is used for mobile devices
For mobile devices max-width : 320px just check if it is there and add styles in that query
#media only screen
and (max-width : 320px) {
/* Styles */
}
and more information on #media queries can be found here and here
Did you try adding !important to your style?
#sidebar-primary { display: none; !important}
Are you sure that you have not missed any other
#media only screen and (max-width: xyz px)
May be
#media only screen and (max-width: 767px)
style are not calling.
Check with other #media tag if exists in css.
The right way to force the element to not be displayed is to use the css below:
#sidebar-primary { display: none !important;}
semi-colon after !important
Even if you set the display to none it will still appear when you inspect the dom element. To remove it entirely you need to use jquery or javascript the triggers on document ready that removes the element.
$(document).ready(function(){
if($(window).width() < 767){
$('#sidebar-primary').remove();
}
})
Hope this helps
I'd like to make my gallery http://wordpress.org/extend/plugins/photospace-responsive/ be responsive with a vertical layout changing into a horizontal one when the browser is scaled down for mobile.
Please can you tell me how I can make it revert when the screen size is smaller to the gallery being on top?
See my test page
http://brightmist.co.uk/gallery/
I've even tried media queries
.photospace_res .gal_content {
float: left;
width: 80%;
}
.photospace_res .thumbs_wrap2 {
float: left;
min-height: 800px;
width: 20%;
}
#media all and (max-device-width: 480px) {
.photospace_res .gal_content {
float: none;
width: 100%;
}
.photospace_res .thumbs_wrap2 {
float: none;
min-height: 0;
width: 100%;
}
}
Thanks for your help
Judi
Yay I fixed it and added a few extra styles
.photospace_res .gal_content {
float: left;
width: 80%;
}
.photospace_res .thumbs_wrap2 {
float: left;
width: 20%;
}
.photospace_res {
margin: 0;
}
.photospace_res .ss-controls {
border: 1px solid #CCCCCC;
margin-bottom: 20px;
padding: 5px 10px;
}
#media screen and (max-width: 700px) {
.photospace_res .gal_content {
float: none;
width: 100%;
}
.photospace_res .thumbs_wrap2 {
float: none;
min-height: 0;
width: 100%;
}
}
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.