The CSS is in a .scss file and being minified with Gulp which works without any issues. I'm testing the responsiveness is Chrome(resizing the webpage). I have added
<meta name="viewport" content="width=device-width, initial-scale=1">
HTML
<div class="container text-center" >
<h1 class="banner-title">Welcome Refugees</h1>
</div>
.SCSS
.banner-title {
margin-top: 275px;
font-size: 700%;
}
#media only screen and (min-width: 400px)
and (max-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
.banner-title {
font-size: 500%;
}
}
Is this a common issue?
I've been using $sm, $md, $lg, $xl as SASS variables to represent different sizes.
$sm = 600; // #media screen queries don't compile correctly
$sm = 600px; // #media screen queries work as expected
Hopefully this helps someone
i found this on a blog
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
profile-pic {
float: left;
width: 250px;
}
#media screen and (max-width: 320px) {
.profile-pic {
width: 100px;
float: none;
}
}
#media screen and (min-width: 1200px) {
.profile-pic {
float: right;
}
}
Related
I'm trying to make my text responsive on my wordpress theme but I'm having problems with the media query
I've looked all over and nothing has been able to help
https://ibb.co/w6bSdJ9
#media (min-width: 320px) and (max-width: 680px) {
h2.h2 {
font-size: 12px;
}
}
#media screen and (max-width: 680px)
{
.heading-text h2 {
font-size: 12px;
}
}
The media querys aren't working for my web page aren't working in IE11.
So I thought I would create a simple test HTML page.
It still fails in IE11 - even though it works in Chrome and Firefox and on Android browsers.
Here is the code:
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'><html>
<head>
<title>Foo</title>
<style type="text/css">
#media (min-width: 640px) {
h1 {font-size:56px;color:#0f0;}
}
#media (max-width: 640px) {
h1 {font-size:9px;color:#00f;}
}
</style>
</head>
<body>
<h1>Test</h1>
</body>
</html>
IE just ignores all styling and inspecting the code it has replaced the style in the inspection window with:
<STYLE type=text/css>
#media Unknown
{
H1 {
FONT-SIZE: 56px; COLOR: #0f0
}
H1 {
FONT-SIZE: 9px; COLOR: #00f
}
}
</STYLE>
I have even tried:
#media all and (min-width: 640px) {
h1 {font-size:56px;color:#0f0;}
}
#media all and (max-width: 640px) {
h1 {font-size:9px;color:#00f;}
}
...and also....
#media all (min-device-width: 640px) {
h1 {font-size:56px;color:#0f0;}
}
#media (max-device-width: 640px) {
h1 {font-size:9px;color:#00f;}
}
...and...
#media all (min-width: 640px) and (max-width:1920) {
h1 {font-size:56px;color:#0f0;}
}
#media all (max-width: 640px) {
h1 {font-size:9px;color:#00f;}
}
The PC I am testing the code on has two screens attached....
is this why IE can't determine the Media??
Very annoying. Can't stand IE.
If anyone can shed some light on why the CSS won't work on IE, I would be very grateful.
Try my code with updated doctype and html tags
<!doctype html>
<html lang="en">
<head>
<title>Foo</title>
<style type="text/css">
#media (min-width: 640px) {
h1 {font-size:56px;color:#0f0;}
}
#media (max-width: 640px) {
h1 {font-size:9px;color:#00f;}
}
</style>
</head>
<body>
<h1>Test</h1>
</body>
</html>
I have several media queries, but there are two that I'm trying to use to style a certain element:
.navbar-default .navbar-nav>li>a
Here is my CSS including previous media queries:
#media (min-width: 1024px) {
.header-column-secondary {
width: 13%;
}
}
#media (min-width: 768px) {
#gatewaylogo {
height: 85px;
padding-left: 0px;
padding-top: 10px;
}
.phone-number {
font-family: 'Oswald', sans-serif;
color: #ffffff;
font-size: 16px;
position: relative;
}
.social-media {
color: #ffffff;
display: table-cell;
padding: 5px 0 5px 5px;
transform: translateY(-7%);
}
}
#media screen and (max-width: 1024px) {
.navbar-default .navbar-nav>li>a
{
font-family: 'Oswald', sans-serif;
color: #1B3764;
text-transform: uppercase;
font-size: 22px;
line-height: 100px;
margin-right: 60px;
padding-left: 0;
padding-right: 0;
}
}
#media screen and (max-width: 768px) {
.navbar-default .navbar-nav>li>a {
font-family: 'Oswald', sans-serif;
color: #1B3764;
text-transform: uppercase;
font-size: 22px;
line-height: 100px;
margin-right: 20px;
padding-left: 0;
padding-right: 0;
}
}
You can see that the media queries that are applying to .navbar-default .navbar-nav>li>a are (max-width: 1024px) and (max-width: 768px)
The idea is that from 1024px - 769px, I want .navbar-default .navbar-nav>li>a to get margin-right: 60px, and at 768px, tablet size, I want .navbar-default .navbar-nav>li>a to get margin-right: 20px. I plan on continuing to add media queries as the browser width gets smaller - 475px, 375px, and 320px.
So why is it that at 768px, the media query doesn't render? It seems that the media query for 1024px is still getting the style and overriding it. I don't want to add !importants, because then I will continue to have to add !importants all the way down to 320px.
A problem is that I like to design from desktop to mobile - not mobile first. Any suggestions? The website is live here: http://nowordpress.gatewaywebdesign.com/
Thanks
Your are missing a viewport meta tag in the head of your page, add something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Good luck!
There are 2 issues in this problem:
viewport definition is missing
both min-width and max-width need to be defined to get media query in this scenario to work.
Here is some detail explanation:
There is no rule_override_based_on_min/max_width in media query. That is, if there are 2 media query rule-set, one is (max-width: 1024px) and another is (max-width: 768px), there is no guarantee that rules inside (max-width: 768px) will override rules inside (max-width: 1024px) -- when conflict happens between 2 rules inside 2 different media query rule-set, the one that appear later in the CSS win. That's why you need both min-width and max-width for media query.
Here is a simple example: although (max-width: 5000px) is a more reasonable rule to take effect, the final background color is pink.
#media (max-width: 5000px) {
.testd {
background: yellow;
}
}
#media (max-width: 100000px) {
.testd {
background: pink;
}
}
<div class="testd">DDD</div>
And David is correct, the viewport definition is missing. Without it, media query is impossible due to pixel ratio.
I think you need a media query like this:
#media (min-width: 768px) and (max-width: 1024px)
this is my first post on this site so I'll try doing things right but sorry if I format things wrong or do anything stupid.
I'm doing an assignment for school due on Thursday June 2nd so I'm really looking for a quick answer as kind of desperate. I need my website to be able to re size for different screen resolutions, I've looked at other answers on this site but most are in reference to making mobile websites. I've read about the media queries rule but everything I read about it is just about making mobile websites, but that looks like a good solution. Really appreciate any help I can get :), here's my code for anyone to look at:
HTML:
<!DOCTYPE html>
<html>
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ann Mockett</title>
<script src="code.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<!__NEEDS DESCRIPTION__>
<meta name="description" content="Description of Site">
<!__NEEDS KEYWORDS__>
<meta name="keywords" content="Selection of Search Terms">
</head>
<body>
<nav>
<ul>
<li><div id="Ann-Nav"><a class="active" href="index.html">Ann Mockett</a></div></li>
<li class="dropdown">
Work
<div class="dropdown-content">
TV
Film
Other
</div></li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
<div class="bodyimg">
<img src="images/placeholder.png">
</div>
<div class="box"><h3>TV Shows</h3><img src="images/placeholder.png"></div>
<div class="box"><h3>Movies</h3><img src="images/placeholder.png"></div>
<div class="box"><h3>Other Projects</h3><img src="images/placeholder.png"></div>
</body>
CSS:
html{
background-color: #fafafa;
}
h3 {
margin: 0;
font-size: 25px;
font-family: font-family: 'Roboto', sans-serif;
}
body{
width: auto;
margin: auto;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #009688;
box-shadow: 0px 3px 9px 0px rgba(0,0,0,0.67);
}
li {
float: left;
}
li a, .dropbtn {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #004D40;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
background-color: #80CBC4;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #4DB6AC;
}
.dropdown:hover .dropdown-content {
display: block;
}
#Ann-Nav {
font-family: 'Raleway', sans-serif;
font-size: 30px;
}
.bodyimg img{
height: 390px;
width: 100%;
display: block;
margin-bottom: 16px;
}
.box {
background-color: #A7FFEB;
height: 230px;
width: 32%;
float: left;
margin-left: 15px;
margin-bottom: 12px;
display: block;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.box img{
height: 175px;
width: 95%;
display: block;
margin: auto;
position: relative;
top: 50%;
transform: translateY(-63%);
}
Thanks for any help.
You might want to use media queries.
#media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
As for this example, when the screen width gets smaller than 480px, the background-color changes to lightgreen. You can find more on W3Schools!
You could also use bootstrap for a responsive design and pre-made CSS. It's less work and a great solution.
Since you have asked a HW question here, I want to reply in a line : use bootstrap
As Nitsan, Tawfiq, and Danooned said, you should look into media queries. They allow you to design certain aspects of your page differently for different device specifications. Here's a link to get you started:
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en
** If your teacher/professor allows you to use bootstrap, I would definitely start there, as it does most of the heavy lifting for you.
I hope this can be an answer for what you need. I use it to create html template on just 20 minutes from zero to about 5 responsive pages.
http://tools.qixstudio.com/reycss.css
example of web : http://www.supersukses.net/, http://microsite.detik.com/display/kabar-dpd/, http://microsite.detik.com/display/preview-telkom/.
It's not a perfect css yet, but hopely can be a shortcut to build your responsive website.
Below are the media queries for all devices. You can use them to make your website responsive.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
/* iPhone 5 (portrait & landscape)----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
/* iPhone 5 (landscape)----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPhone 5 (portrait)----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
Also You can visit https://css-tricks.com/css-media-queries/
I have a HTML site and that has some images that I do not want to be seen on a mobile devices or on desktop.
for example:
HTML Code: (index.html)
<link rel="stylesheet" type="text/css" href="css/style.css" />
//Image for desktop
<img class="desktop" border="0" src="images/logo.png">
//Image for mobile device
<img class="mobile" border="0" src="images/logo-mobile.png">
CSS Code: (style.css)
/* #Desktop
================================================== */
.mobile {
display: none;
}
/* #Mobile
================================================== */
#media only screen and (max-device-width: 480px) {
.desktop {
display: none;
}
}
I use this CSS code but does not work.
Use CSS3 Media Queries
#media (min-width: 1100px) {
h1:after {
content: 'Large screen';
}
}
#media (max-width: 1100px) {
h1:after {
content: 'Medium screen';
}
}
#media (max-width: 480px) {
h1:after {
content: 'Small screen';
}
}
-DEMO-
The answer is in media queries itself...i used this and it seems to work for me
#media screen and (max-device-width:480px)
The problem is that you are not resetting the display: none on the .mobile class on mobile screen, and your .mobile class elements will remain hidden. You have to add the following to your media query in order to make the .mobile class visible:
.mobile {
display: block;
}
Final coode:
/* #Desktop
================================================== */
.mobile {
display: none;
}
/* #Mobile
================================================== */
#media only screen and (max-device-width: 480px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
EDIT
As I can see, you will have problems to detect which device is a mobile device based on resolution, so I will recommend you to detect it by using the User Agent string, it will have bigger success in your case.
Here is what you should do:
1) Include this in a javascript file loaded on the page:
$(document.body).ready(function(){
var isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
if(isMobile) {
$("html").addClass("mobile-device");
} else {
$("html").addClass("desktop-device");
}
});
2) Change your css to:
/* #Desktop
================================================== */
.desktop-device .mobile {
display: none;
}
/* #Mobile
================================================== */
.mobile-device .desktop {
display: none;
}
This should work for most(maybe 99.9%) of the mobile devices that cand be bought. Hope this helps you.
use media-queries-for-standard-devices
use it like this
/* #Desktop
================================================== */
.mobile {
display: none;
}
.desktop {
display: block;
}
/* #Mobile
================================================== */
#media only screen and (max-width: 480px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
For HTC One try
#media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){
}
NOTE Don't forget to add this inside tag
<meta name="viewport" content="width=device-width, initial-scale=1">
css:
#media screen and (max-device-width: 480px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
IT will work. see link http://cssmediaqueries.com/what-are-css-media-queries.html