css code.
/* media query for tablet */
#media only screen and (max-width: 768px) {
.cta {
font-size: 2.5rem;
padding: 20px 60px;
}
h1 .section-title {
font-size: 6rem;
}
/* hero section */
#hero h1 {
font-size: 7rem;
}
/* end of hero section */
/* service section */
#services .service-bottom .services-item {
flex-basis: 45%;
margin: 2.5%;
}
/* end of service section */
}
/* end of media query for tablet */
/* media query for desktop */
#media only screen and (min-width: 1500px) {
/* header */
#header .hamburger {
display: none;
}
/* end of header */
}
/* end of media query for desktop */
html code
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>My Website</title>
</head>
<body>
<!-- header section -->
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#hero">
<h1>HOME OF TECHNOLOGY.</h1>
</a>
</div>
<div class="nav-list">
<div class="hamburger"><div class="bar"></div></div>
<ul>
<li>Home</li>
<li>Services</li>
<li>Projects</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</section>
<!-- end of header section -->
My media query for tablet and desktop is not responding though I have no code errors in vscode. I designed phone version first, then media query for tablet and lastly media query for desktop and both are not responding. My media query is below the keyframes.
Please take a look for these sizes
https://getbootstrap.com/docs/4.1/layout/overview/
Try this:
#media screen and (max-width: 768px){
}
Related
really new user, hope I'm posting this right.
I'm trying to get responsive HTML to work on my phone, but I'm running into really strange problems. The responsive html on my page doesn't seem to be working. Even stranger, I copied the page and the issues on that page are different, even though the code should be identical.
I am working on
http://www.nokillshelter.net/final.html
http://www.nokillshelter.net/finalfinal.html
Both should be the same code but both are not picking up the responsive CSS properly. I'd post code, but its very long at this point. Any help would be greatly appreciated.
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8">
<title>NoKillShelter Music</title>
<meta name="description"
content="NoKillShelter Music">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ================4avicons ================== -->
<!-- Standard -->
<link rel="shortcut icon" href="img/favicon.png">
<!-- Retina iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="144x144" href="img/favicon-retina-ipad.png">
<!-- Retina iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="114x114" href="img/favicon-retina-iphone.png">
<!-- Standard iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="72x72" href="img/favicon-standard-ipad.png">
<!-- Standard iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="57x57" href="img/favicon-standard-iphone.png">
<!-- ============== Resources style ============== -->
<link rel="stylesheet" type="text/css" href="css/style-multi-scrollnew.css"/>
</head>
<body>
<div id="thelist">
<h5>NoKillShelter Releases</h5>
<br><img id="movinglogo" src="/img/LogoNKS-Imma.gif">
<div id="songs">
<a id="Longshot" href="https://awal.lnk.to/vmjynlm">
<span>Longshot</span>
</a>
<br><a id="Sweetheart" href="https://awal.lnk.to/NoKillShelter-Sweetheart"><span>Sweetheart</span>
</a>
<br><a id="FairyQuing" href="https://awal.ffm.to/mxnkqxq">
<span>FairyQuing</span>
</a>
<br><a id="JustSeeTheCoast" href="https://awal.lnk.to/JustSeetheCoast">
<span>Just See The Coast</span>
</a>
<br><a id="BalancedLove" href="https://awal.lnk.to/BalancedLove">
<span>Balanced Love</span></a>
</div>
CSS
/* Small Devices, Tablets #media only screen and (max-width: 768px) */
#media only screen and (max-width: 768px) {
h1 {
font-size: 5.5rem;
}
#thelist {
top: 69px;
font-size: 20px;
}
h5 {
font-size: 2.5rem;
}
#movinglogo {
max-width: 17%;
top: 55px;
left: -5px;
position: absolute;
}
button {
white-space: nowrap
}
.album {
margin-left: 0%;
}
#info .content {
padding: 0 5%;
}
.block-team img.team-member {
width: 100%;
}
}
/* Extra Small Devices, Phones #media only screen and (max-width: 480px) */
#media only screen and (max-width: 480px) {
.album {
margin-left: 0%;
}
h1 {
font-size: 5.5rem;
}
#thelist {
top: 69px;
font-size: 20px;
}
#thelist button {
whitespace: inherit;
button-width: 200px;
font-size: 12px;
}
#movinglogo {
max-width: 17%;
top: 55px;
left: -5px;
position: absolute;
}
I created a website and I used 2 divs, 1 has all the code for the desktop layout and one has all the code for mobile, I did this and would like to keep it this way for future changes,
On both divs display is default and on the media queries I have it set as this:
/* DESKTOP AND MOBILE VEIWPORT TOGGLE */
#media screen and (max-width: 1024px) {
.desktop {
display: none;
}
#media screen and (max-width: 100vw) {
.mobile {
display: none;
}
}
}
HTML
<div class="desktop">
<p>desktop</p>
</div>
<--- MOBILE DIV --->
<div class="mobile">
<p>mobile</p>
</div>
Also, all of my code can be found here with the html
https://codesandbox.io/s/soph2?file=/css/index.css:244-451
Also sorry if this was a stupid question, I'm 13 and I've only been coding for a year now.
When I go to a mobile device, the desktop view does not show but neither does any of my mobile code, please help me, thank you very much!
Also, I just noticed when on the desktop mode, the mobile div shows up too for some reason under the footer.
Media queries never go in media queries. Each one is basically a separate bit of css for a specific screen. In addition, 100vw should never be used in media queries, since it will always match. Also, please try to properly format your code. Makes it much more readable
#media screen and (max-width: 400px) {
.mobile {
display: none;
}
}
#media screen and (max-width: 1024px) {
.desktop {
display: none;
}
}
Add this in the head section :
<meta name="viewport" content="width=device-width, initial-scale=1">
#media screen and (max-width: 1023px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
#media screen and (min-width: 1024px) {
.mobile {
display: none;
}
.desktop {
display: block;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="desktop">
<p>desktop</p>
</div>
<div class="mobile">
<p>mobile</p>
</div>
</body>
</html>
This a homework assignment. I need to take the existing code for a website I already made, and make it compatible with mobile device viewing. They want me to do this by adding responsive design elements. Currently, the desktop website is a two-column format. For mobile display, the website is supposed to be converted into a single-column format. When I open my website my phone, the website is still displayed as a two-column layout.
I've checked everything with CSS and HTML validators. No errors were detected. I followed the book instructions step by step, and have to include everything they tell me to include, but for some reason, it is still not showing up correctly on mobile devices. (I also tested to see if the issue was and iPhone or android problem only. Both devices don't display the website properly).
The first sample of code is the code for the HTML to show I did use a meta tag in the head. And the second sample of code is my external CSS that has the media queries.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Fish Creek Animal Clinic </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="fishcreek.css">
</head>
<body>
<div id="wrapper">
<header>
<h1> Fish Creek Animal Clinic </h1>
</header>
<nav>
<ul>
<li> Home</li>
<li> Services</li>
<li> Ask The Vet</li>
<li> Contact</li>
</ul>
</nav>
<main>
<dl>
<dt>Full Service Facility</dt>
<dd>Doctors and staff are on duty 24 hours a day, 7 days a week.<dd>
<dt>Years of Experience</dt>
<dd>Fish Creek Veterinarians have provided quality, dependable care for your beloved animals since 1984.</dd>
<dt>Open Door Policy</dt>
<dd>Our professionals welcome owners to stay with their pets during any medical procedure.</dd>
</dl>
<div>
<a id="mobile" href="tel:800-555-5555">800-555-5555</a><br>
<span id="desktop">800-555-5555</span><br>
1242 Grassy Lane<br>
Fish Creek, WI 55534<br><br>
</div>
</main>
<footer>
Copyright © 2018 Fish Creek Animal Clinic. All Rights Reserved.<br>
jescobedo3#saddleback.edu
</footer>
</div>
</body>
</html>
#media only screen and (max-width: 1024px) {
body {margin: 0;
padding: 0;
background-color: white;
background-image: none;
}
#wrapper {
width: auto;
min-width: 0;
margin: 0;
}
h1 {
margin: 0;
font-size: 1.8em;
line-height: 200%;
}
nav {
float: none;
padding: 0;
width: auto;
}
nav li {display: inline-block;}
nav a {
padding: 1em;
font-size: 1.2em;
}
nav ul {
text-align: center;
padding: 0;
margin: 0;
}
main {
font-size: 90%;
margin: 0;
padding-left: 2em;
}
footer {margin: 0;}
}
#media only screen and (max-width: 768px) {
header {background-image: url(lilfish.gif)}
h1 {
font-size: 1.5em;
line-height: 120%;
}
nav a {
display: block;
padding: 0.2em;
font-size: 1em;
border-bottom: 1px solid #330000;
}
nav li {display: block;}
nav ul {text-align: left;}
main {padding-left: 1em;}
.category {text-shadow: none;}
#mobile {display: inline;}
#desktop {display: none;}
}
I think you can use media queries for different sizes and also according to devices orientation also.
<style>
/* For Device Size */
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {
/* Your CSS Code for this device size */
}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {
/* Your CSS Code for this device size */
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
/* Your CSS Code for this device size */
}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {
/* Your CSS Code for this device size */
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {
/* Your CSS Code for this device size */
}
/* For Device Orientation */
/* According to Mobile Orientation */
#media only screen and (orientation: landscape) {
/* Your CSS Code for this device orientation */
}
</style>
I'm trying to use/ mock media queries in IE8 using respond.js
I have the attached code all set-up to run under localhost in IIS (just a plain and simple static site). Everything works on Chrome, FF, Safari but not IE (I'm using version 8)
I'm new to front end development and I cannot seem to work out what it is I am doing wrong. Please can somebody take a look and give me any pointers?
Thank you for your time,
Barry.
HTML File;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Media Query Test</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div class="wrapper one">This box will turn to pink if the viewing area is less than 600px</div>
<div class="wrapper two">This box will turn to orange if the viewing area is greater than 900px</div>
<div class="wrapper three">This box will turn to blue if the viewing area is between 600px and 900px</div>
<div class="wrapper iphone">This box will only apply to devices with max-device-width: 480px (ie. iPhone)</div>
<p class="viewing-area">
<strong>Your current viewing area is:</strong>
<span class="lt600">less than 600px</span>
<span class="bt600-900">between 600 - 900px</span>
<span class="gt900">greater than 900px</span>
</p>
<script src="/js/respond.min.js"></script>
</body>
</html>
CSS File;
.wrapper {
border: solid 1px #666;
padding: 5px 10px;
margin: 40px;
}
.viewing-area span {
color: #666;
display: none;
}
/* max-width */
#media screen and (max-width: 600px) {
.one {
background: #F9C;
}
span.lt600 {
display: inline-block;
}
}
/* min-width */
#media screen and (min-width: 900px) {
.two {
background: #F90;
}
span.gt900 {
display: inline-block;
}
}
/* min-width & max-width */
#media screen and (min-width: 600px) and (max-width: 900px) {
.three {
background: #9CF;
}
span.bt600-900 {
display: inline-block;
}
}
/* max device width */
#media screen and (max-device-width: 480px) {
.iphone {
background: #ccc;
}
}
Link to respond.js I am using (local version of; https://github.com/scottjehl/Respond/blob/master/dest/respond.min.js)
<script src="/js/respond.min.js"></script>
Should have been
<script src="js/respond.min.js"></script>
Note I have removed the preceeding "/"
I am now "fist pumping" the air as I have media queries in IE 8.
Thanks for your time. I hope this helps!
I am trying out the responsive nav plugin (responsive-nav.com) with the basic Skeleton grid system, and for some reason without editing the js and general css for the responsive nav plugin, I am running into issues with the navigation when minimized to area where navicon appears. For some reason the links drop down automatically and the navicon does not appear. Does it have to do with the container? I tried without the container div and still ran into the issue See images for example:
Here is the HTML:
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Your Page Title Here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<script src="js/responsive-nav.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<!-- Primary Page Layout
================================================== -->
<div class="band-nav">
<div class="container">
<div class="sixteen columns">
<nav class="nav-collapse">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Blog</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="band-content">
<div class="container">
<div class="sixteen columns">
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
<h5>Version 1.2</h5>
<hr />
</div>
<div class="one-third column">
<h3>About Skeleton?</h3>
<p>Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
</div>
</div>
</div>
<script>
var navigation = responsiveNav(".nav-collapse", {
animate: true, // Boolean: Use CSS3 transitions, true or false
transition: 250, // Integer: Speed of the transition, in milliseconds
label: "Menu", // String: Label for the navigation toggle
insert: "after", // String: Insert the toggle before or after the navigation
customToggle: "", // Selector: Specify the ID of a custom toggle
openPos: "relative", // String: Position of the opened nav, relative or static
jsClass: "js", // String: 'JS enabled' class which is added to <html> el
init: function(){}, // Function: Init callback
open: function(){}, // Function: Open callback
close: function(){} // Function: Close callback
});
</script>
<!-- End Document
================================================== -->
</body>
</html>
CSS:
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================
#Site Styles
#Page Styles
#Media Queries
#Font-Face */
/* #Site Styles
================================================== */
/*! responsive-nav.js 1.0.25 by #viljamis */
.nav-collapse,
.nav-collapse * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.nav-collapse,
.nav-collapse ul {
list-style: none;
width: 100%;
float: left;
}
.nav-collapse li {
float: left;
width: 100%;
}
#media screen and (min-width: 40em) {
.nav-collapse li {
width: 25%;
*width: 24.9%; /* IE7 Hack */
_width: 19%; /* IE6 Hack */
}
}
.nav-collapse a {
color: #fff;
text-decoration: none;
width: 100%;
background: #000;
border-bottom: 1px solid white;
padding: 0.7em 1em;
float: left;
}
#media screen and (min-width: 40em) {
.nav-collapse a {
margin: 0;
padding: 1em;
float: left;
text-align: center;
border-bottom: 0;
border-right: 1px solid white;
}
}
.nav-collapse ul ul a {
background: #ececec;
padding-left: 2em;
}
#media screen and (min-width: 40em) {
.nav-collapse ul ul a {
display: none;
}
}
.nav-toggle {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 70px;
height: 55px;
float: right;
text-indent: -9999px;
overflow: hidden;
background: #f4421a url("hamburger.gif") no-repeat 50% 33%;
}
#media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.nav-toggle {
background-image: url("hamburger-retina.gif");
-webkit-background-size: 100px 100px;
-moz-background-size: 100px 100px;
-o-background-size: 100px 100px;
background-size: 100px 100px;
}
}
/* #Page Styles
================================================== */
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
/* #Font-Face
================================================== */
/* This is the proper syntax for an #font-face file
Just create a "fonts" folder at the root,
copy your FontName into code below and remove
comment brackets */
/* #font-face {
font-family: 'FontName';
src: url('../fonts/FontName.eot');
src: url('../fonts/FontName.eot?iefix') format('eot'),
url('../fonts/FontName.woff') format('woff'),
url('../fonts/FontName.ttf') format('truetype'),
url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
font-weight: normal;
font-style: normal; }
*/
i think you forgot to link to the jquery library. You are only linking to the jquery of the responsive nav, but you need the Main jquery library to work.
put this before the link to the responsive-nav.js:
I was getting the responsive nav error with this refference:
<script src='https://cdnjs.cloudflare.com/ajax/libs/responsive-nav.js/1.0.32/responsive-nav.min.js'></script>
So I had to download it and host it on my local resources:
<script src="/js/responsive-nav.min.js" type="text/javascript"></script>
Problem solved for me.