so my media queries are playing up and I can't see why. Theyre located on the end of styles.css on carrotcruchpvp.comule.com. 720p and 1366 x 768 seem to be working. However any media query over that resolution doesnt work and 1366 x 768 seems to take precedence. Just in terms of debugging.
Things I've tried,
using !important on things.
Moving the media queries around, i.e 2160 x 1440 at top and descending in resolution.
width/height, min-width/min-height. I know min- uses browser width but just wanted to double check.
My next step is just to do it all in javascript if I can't find a solution here. Using an updated version of chrome.
Heres the lot:
/* Media query for standard 1280 x 720 resolution, 16:9 aspect ratio */
#media all and (min-device-width:1280px) and (min-device-height:720px) {
.complainant_txt {
font-size: 1.6vh;
}
.hex-grid-mid {
left:9.5%;
}
.hi-icon.button.hi-icon-earth {
left:-25vh;
}
.hexagon-scale {
width: 8.5vw;
height: 29.5vh;
}
.hex-grid-top .hexagon {
float: left;
margin: 0 0.57vw;
}
.hex {
width: 55%;
position: relative;
height: 40%;
left: 31%;
margin-top: -1.5%;
}
.quote {
font-family: 'Open Sans', sans-serif;
top: 30%;
left: 5%;
font-size: 0.7vw;
height: 38%;
}
h4 {
margin-bottom:1%;
}
#info_btn {
left:82vh;
}
#fourth_quote {
left:3%;
}
#firststat {
left: 3% ;
}
#secondstat {
margin-left: 4.6%;
}
#thirdstat {
margin-left: 2%;
}
#firststat{
opacity: 0;
-moz-transition: opacity 1.2s;
-o-transition: opacity 1.2s;
transition: opacity 1.2s;
display: inline-block;
font-family: 'Open Sans';
font-size: 76%;
width: 14%;
margin-left: 26%;
text-align: center;
margin-top: 0;
margin-bottom: 0;
position: relative;
bottom: 1em;
vertical-align: top
}
}
/* Media query for standard 1366 x 768 resolution, 16:9 aspect ratio */
#media all and (min-device-width:1366px) and (min-device-height:768px) {
.hex-grid-mid {
left:9.5%;
}
.hi-icon.button.hi-icon-earth {
left:-25vh;
}
.hexagon-scale {
width: 8.5vw;
height: 29.5vh;
}
.hex-grid-top .hexagon {
float: left;
margin: 0 0.57vw;
}
.hex {
width: 55%;
position: relative;
height: 41%;
left: 30.6%;
margin-top: -1.5%;
}
.quote {
font-family: 'Open Sans', sans-serif;
top: 32%;
left: 5%;
font-size: 0.7vw;
height: 38%;
}
.complainant_txt {
font-size: 1.6vh;
}
#firststat,
#secondstat,
#thirdstat {
bottom: 3.8em;
}
#history {
margin-top:3.3%;
}
h4 {
margin-bottom:1%;
}
#info_btn {
left:82vh;
}
#fourth_quote {
left:3%;
}
#window4 {
height:19vh;
}
#window5 {
height:26vh;
}
#window6 {
height:28vh;
}
#window7 {
height:34vh;
}
#window8 {
height:31vh;
}
#window9 {
height:28vh;
}
}
#media all and (min-device-width:1600px) and (min-device-height:900px) {
.hi-icon-wrap {
margin-left: 4.7%;
}
.hi-icon.button.hi-icon-earth {
left:-25vh;
}
#history {
margin-top:3.3%;
}
#info_btn {
left:80vh;
}
}
#media all and (min-device-width:1920px) and (min-device-height:1080px) {
.quote {
top: 39%;
}
.hi-icon.button.hi-icon-earth {
left:-25vh;
}
#info_btn {
left:81vh;
}
}
/* Media queries for my SP3 with 3:2 aspect ratio. */
#media all and (min-device-width:2160px) and (min-device-height:1440px){
.quote {
top:32%;
}
#exit, #exit1, #exit2 {
right: 4%;
top: -2%;
}
.hi-icon.button.hi-icon-earth {
left:-21vh;
}
#second_quote {
top: 35%;
left: 5%;
}
#decision_btn {
top: -12vh;
left: 36vw;
}
#up_right2 {
bottom: 4.8%;
left: 56%;
}
#info_btn {
left: 68vh;
top: -11.5vh;
}
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-height, initial-scale=1">
<title>Catholic Professional Standards</title>
<link href="plugins/fullpage/jquery.fullPage.css" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="plugins/fullpage/jquery.fullPage.js" type="text/javascript"></script>
<script src="js/fullpage_initialisation.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</head>
Assuming this is a website and not a something you're specifically using on a mobile device such as an app, there's no reason to use min-device-width over min-width in your media query. min-device-width will go with the device size and not change based on expanding a browser. min-width will achieve that.
Here's some futher information based on another StackOverflow question:
CSS media queries min-width and min-device-width conflicting?
Related
I have this weird problem and I can't figure out a solution.
My html file loads three stylesheets.
<meta content="width=device-width, initial-scale=1" name="viewport">
<link type="text/css" rel="stylesheet" href="/static/css/common.css">
<link type="text/css" rel="stylesheet" href="/static/css/admin.css">
<link type="text/css" rel="stylesheet" href="/static/css/navbar.css">
and I have the exact same #media query in both admin.css and navbar.css
admin.css
#media screen and (max-width: 768px)
{
html {display: none;} /*<-- Just for testing purposes*/
}
navbar.css
#media screen and (max-width: 768px)
{
body
{
overflow-x: hidden;
}
.navlinks
{
margin-left: 0;
margin-right: 0;
position: absolute;
left: 0;
height: 40vh;
width: 100vw;
top: 7vh;
display: flex;
flex-direction: column;
z-index: 99;
background-color: var(--background);
padding: 0.75em;
align-items: center;
transform: translate(-100%);
transition: transform 0.25s ease-in;
}
.navlinks a
{
font-size: 2.25em;
}
.burger
{
display: block;
position: absolute;
left: 0;
margin-left: 3vh;
}
.show
{
transform: translate(0%);
}
}
The #media query in navbar.css works but the one in admin.css doesn't.
I have tried just loading admin.css (did not fix it)
I also tried different media querys, they worked in navbar.css but not in admin.css.
It looks like you have two separate media queries set to the same width "768px"
if your "navbar" media query is below the "admin" media query then specificity will apply and i believe the "admin" media query will just get ignored. why not put html {display: none;} /<-- Just for testing purposes/ in with the same "768p" breakpoint? you can also try to add !important at the end of the html {display: none !important;}
Hi my website width doesn't show up normally in mobile, so the website looks too small. The normal width is supposed to be 375, but it become 980. I have no idea why? since I only use materialize and my SCSS doesn't hard code any width. I don't have any clue to get start. Wish to get some help. Thank you.
.brand-logo {
margin: 0 10px 0 10px;
}
.YellowtailLogo {
font-family: 'Yellowtail', cursive;
}
.brand-logo img{
height: 28px;
position: relative;
margin-right: 10px;
top: 3px;
}
.h1Landing {
font-family: 'Yellowtail', cursive;
color: #ee6e73;
}
.msg_page_container {
height: 100%;
position: fixed;
width: 100%;
overflow: hidden;
left: 0px;
padding: 0 10% 0 10%;
.collection {
overflow: scroll;
height: 40%;
}
.msg_input_div{
}
}
use media query to change content-width to width of mobile screen:
#media screen and(max-width:375px){
html,body{width:100%;
box-sizing:border-box;
}
}
and include
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in CSS
I'm a visual designer struggling to code, to cut to the chase, below is the problem:
What I'm trying to achieve:
Goal 1 and Goal 2 screenshots, including my current dilemma, I've placed a link below (as I'm not allowed to include screenshots yet as I am a newbie:
https://www.dropbox.com/s/libc4wp970xz3ms/Screenshot.png?dl=0
What I was hoping to achieve was to have the navigation bar centered all the time. I made it wide (1300px), my white container will be smaller, anything outside of it will be set to hidden.
Below is my code:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div class ="main-container">
<div class = "banner-container">
<div class="cyan-banner"></div>
<div class="green-banner"></div>
<div class="magenta-banner"></div>
<div class="orange-banner"></div>
</div><!--end of .banner-container-->
</div><!--end of .main-container-->
</body>
</html>
#import 'normalize';
#import 'susy';
#import 'compass';
$susy : (
columns: 12,
debug: (image: show),
output: overlay
);
.main-container {
#include clearfix;
#include container(1200px);
height: 100vh; // Forces wrap to full height.
// Mobile
#media (max-width: 419px) {
#include show-grid(1);
}
// Changing to a 4 column grid
#media (min-width: 420px) {
#include show-grid(4);
}
// Changing to a 8 column grid
#media (min-width: 841px) {
#include show-grid(8);
}
// Changing to a 12 column grid
#media (min-width: 1200px) {
#include show-grid(12);
}
}
// Color Theme
$cyan: #148ec3; $magenta: #c9197a; $orange: #de8826; $green: #008a52; $gray: #a1a1a0;
body {
background: #d2d2d2;
}
.main-container {
background: white;
}
.banner-container {
#include clearfix;
}
.banner-container > div {
width: 1300px;
position: fixed;
top: 50px;
}
.cyan-banner {
height: 60px;
background: $cyan;
z-index: 5;
}
.green-banner {
height: 60px;
background: $green;
z-index: 4;
#include transform(rotate(2deg));
}
.magenta-banner {
height: 60px;
background: $magenta;
z-index: 3;
#include transform(rotate(4deg));
}
.orange-banner {
height: 60px;
background: $orange;
z-index: 2;
#include transform(rotate(-2deg));
}
Any help or suggestions would be greatly appreciated.
I've been scouring the forums for answers and leads but I can't seem to find one that has a similar problem as mine.
Thank you again.
Anthony
With one nav and a couple of rotated and translated (and suitably positioned) pseudo elements.
html,
body {
height: 100%;
}
.container {
width: 80%;
height: 100%;
overflow: hidden;
margin: 0 auto;
border: 1px solid black;
}
nav {
height: 75px;
background: steelblue;
margin-top: 75px;
position: relative;
}
nav:before {
content: '';
position: absolute;
width: 150%;
height: 100%;
background: orange;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)rotate(-2deg);
z-index: -1;
}
nav:after {
content: '';
position: absolute;
width: 150%;
height: 100%;
background-image: linear-gradient(to bottom, magenta 0, magenta 25%, green 25%, green, 75%, magenta 75%, magenta);
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(3deg);
z-index: -1;
}
<div class="container">
<nav></nav>
</div>
Note that at the moment the 'green' area is only visible at larger screen sizes but media queries could increase the rotation. Alternatively, we may be able to do something with a more refined gradient.
I'm working on a responsive picture gallery and I'm looking to modify some code I found. I've made a jsFiddle to show you what I'm working with.
jsFiddle
I want to be able to have a couple buttons below each image in the gallery. As you notice, if there is an image underneath an image the image above has its text cut off. I've thought about adding a margin bottom to .box as such:
.box {
float: left;
position: relative;
width: 14.28%;
padding-bottom: 14.28%;
margin-bottom: 30px;
}
jsFiddle with margin-bottom
I'm wondering if there is a better way to approach this. It seems if you re-size the window too small the text overlaps the images.
You just need to make the bottom padding on .box-container 30px:
.box_container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px 10px 30px 10px;
margin-bottom: -35px;
margin-left: 5px;
margin-right: 5px;
}
http://jsfiddle.net/jFwYU/3/
body {
margin: 0;
padding: 0;
background: #EEE;
font: 10px/13px'Lucida Sans', sans-serif;
}
.box {
float: left;
position: relative;
width: 14.28%;
padding-bottom: 10px;
}
.boxInner img {
width: 100%;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 0;
}
#media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
.box {
width: 100%;
padding-bottom: 10px;
}
}
#media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
.box {
width: 50%;
padding-bottom: 10px;
}
}
#media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 33.3%;
padding-bottom: 10px;
}
}
#media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 25%;
padding-bottom: 10px;
}
}
#media only screen and (max-width : 1590px) and (min-width : 1291px) {
/* Large desktop: 5 tiles */
.box {
width: 20%;
padding-bottom: 10px;
}
}
#media only screen and (max-width : 1920px) and (min-width : 1591px) {
/* Extra large desktop: 6 tiles */
.box {
width: 16.6%;
padding-bottom: 10px;
}
}
1) Removed position:absolute; for boxInner and box_container
2) Avoid using floats and position:absolute; together
3) Only horizontal dimensions should be defined in percentage, not the vertical ones(padding-bottom:33% is not good)
It seems that perhaps the simplest solution for this problem would be to modify the css for the box:
.box {
float: left;
position: relative;
width: 14.28%;
height: 14.28%;
margin-bottom: 40px;
}
height is a much more semantic way than padding-bottom to get what you are looking for, and to make sure the text displays properly (which probably shouldn't be absolutely positioned, but minor issue), add a margin-bottom.
You could also have the margin-bottom as a percent to have it be a percent of the size of the box, say, 20% or so, but px might be a good idea if you're not worried about teeny tiny boxes being an issue (whole gallery less than 50px)
Hope that helps!
I created something to help a college student get started. I adapted your images to the attached code. There are some features that the student needed that you did not ask for, but you can easily remove them.
I believe it meets the intent of preserving the space between images and allows text for each picture. The text is locked to its picture.
The code is not optimized and can certainly be improved, but it will hopefully put you a little closer to what you wanted,
Updated: Example Photo Gallery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Photo Viewer</title>
<style>
html {
border: 0 none transparent;
}
body {
padding: 0;
margin: 0;
font-family: arial, tahoma, sans-serif;
font-weight: 400;
font-size: 15px;
background: #FEFADA;
color: #2C2218;
width: 100%;
height: 100%;
border: none;
text-align: center;
font-style: normal;
font-weight: normal;
font-variant: normal;
cursor: pointer;
}
.picture {
/*Add venfor specific property*/
-webkit-column-count: 4;
/*Set the default to 4 columns*/
column-count: 4;
/*Set text line height*/
line-height: 1.5;
/*Add venfor specific property*/
-webkit-column-gap: 15px;
column-gap: 15px;
/*Outer margin for picture container*/
margin: auto 10px;
}
/*Switch to three columns at this display width*/
#media (max-width: 1024px) {
.picture {
/*Add venfor specific property*/
-webkit-column-count: 3;
column-count: 3;
}
}
/*Switch to two columns at this display width*/
#media (max-width: 764px) {
.picture {
/*Add venfor specific property*/
-webkit-column-count: 2;
column-count: 2;
}
}
/*Switch to one columns at this display width*/
#media (max-width: 480px) {
.picture {
/*Add venfor specific property*/
-webkit-column-count: 1;
column-count: 1;
}
}
.hide {
display: none;
}
.img, .selected-img {
width: 100%;
margin: 8px auto;
white-space: nowrap;
}
.selected-img {
max-width: 1024px;
}
.selected {
position: fixed;
margin: 5px auto;
left: 0;
right: 0;
z-index: 10;
display: block;
}
.closeme {
-webkit-align-content: center;
left: 0;
right: 0;
width: auto;
margin: auto;
display: block;
}
.disable {
background: rgba(0, 0, 0, .3);
width: 100% !important;
height: 100% !important;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 5;
position: fixed;
}
.btn {
border: 1px;
border-color: transparent #D1C89D transparent #D1C89D;
background: #EBE6C1;
height: 40px;
margin: auto 0;
width: 100%;
}
.picture-text {
margin: auto;
padding: 10px 3px;
display: table-cell;
white-space: normal;
}
.inline-block {
display: inline-block;
white-space: nowrap;
}
</style>
</head>
<body>
<div>
<!-- Hide the selected image window until its needed with the hide class -->
<div id="selectedWindow" class="hide">
<button class="closeme btn" onclick="closeWindow()">Click this Button or on the Selected Image to close window.</button>
<!-- Load the selected image here -->
<img id="selectedImage" class="selected-img" onclick="closeWindow()" />
</div>
<button class="btn" onclick="loadImages()">Load Images</button>
<div id="imageContainer" class="picture" onclick="loadSelectedPicture(event)"></div>
<div id="disableMask"></div>
</div>
<script type="application/javascript">
function loadImages() {
// For DEBUG if you need it: alert("Made it to the function");
var element = document.getElementById("imageContainer");
var imageArray = ["http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg"];
var picture = "";
for (var i = 0; i < imageArray.length; i++) {
// Create an id for each image and add its class.
picture += "<div><img id=\"i" + i + "\" class=\"img\" src=\"" + imageArray[i] + "\"><div class=\"inline-block\"><div class=\"picture-text\">Here is some text for each image. How long can this text be before we have some issues.</div></div></div>";
// For DEBUG if you need it: console.log(picture);
}
element.innerHTML = picture;
}
function loadSelectedPicture(event) {
var target = event.target || event.srcElement;
this.stopEventPropagation(event);
var selectedElement = document.getElementById(target.id);
var imageElement = document.getElementById("selectedImage");
if (!selectedElement.src)
return;
imageElement.src = selectedElement.src;
document.getElementById("selectedWindow").className = "selected";
document.getElementById("disableMask").className = "disable";
}
function stopEventPropagation(event) {
if (!event)
event = window.event;
//IE9 & Other Browsers
if (event.stopPropagation) {
event.stopPropagation();
}
//IE8 and Lower
else {
event.cancelBubble = true;
}
}
function closeWindow() {
document.getElementById("selectedWindow").className = "hide";
document.getElementById("disableMask").className = "";
}
</script>
</body>
</html>
I will try to update this post with a working jsFiddle when I have some free time.
I am making a web for desktop, tablet and mobile screens. For this I am using css media queries. When I test my website on desktop browser and when I scale my web bowser down then it does change its layout when it reaches to max-width 740px as mentioned in css. But the problem is when I test this on my mobile then it does not change its layout to fit mobile screens.
I am using 12 columns layout system and using less css. Please help me why it does not change its layout on mobile phones to fit mobile screens.
Here is my css or less css to be precise
html, body {
height: 100%;
//overflow: hidden;
}
body {
min-width: 360px;
background-color: #ffffff;
#page {
width: 100%;
height: 100%;
overflow: auto;
}
.right {
position: relative;
right: 0;
}
// Extend column system (from defaults/layout.css)
.row {
clear: both;
> .container {
max-width: 1024px;
margin: 0 auto;
padding: 0 2% 0 2%;
.container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
&.one {
width: 8%;
}
&.two {
width: 16%;
}
&.three {
width: 25%;
}
&.four {
width: 33%;
}
&.five {
width: 41%;
}
&.six {
width: 50%;
}
&.seven {
width: 58%;
}
&.eight {
width: 66%;
}
&.nine {
width: 75%;
}
&.ten {
width: 83%;
}
&.eleven {
width: 91%;
}
&.twelve {
width: 100%;
}
}
}
}
}
/*Collapse columns*/
#media only screen and (max-width: 740px) {
.column, .column.one, .column.two, .column.three, .column.four, .column.five, .column.six, .column.eight, .column.nine, .column.ten, .column.eleven, .column.twelve,
.column.close-right, .column.one.close-right, .column.two.close-right, .column.three.close-right, .column.four.close-right, .column.five.close-right, .column.six.close-right, .column.eight.close-right, .column.nine.close-right, .column.ten.close-right, .column.eleven.close-right, .column.twelve.close-right {
//width: auto;
//float: none;
//clear: both;
margin-right: 0;
}
.column.third {
display: none;
}
.column.second {
width: 77%;
}
.column.first {
//min-width: 180px;
}
}
Try adding this to the top of your HTML page:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
That should let the mobile browser know that the page you be rendered at the size of your device/browser, instead of faking the screen size of a desktop computer (and thus confusing your media queries).
http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/