I'm working with my first responsive website and I'm completely at a halt, I cannot for the life of me figure out how to use these media queries and what not...
Here's what I have...
<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Responsive Layout Test</title>
<!-- Media Query 1 -->
<link href="mobile.css" rel="stylesheet" type="text/css" media="screen (max-width:480px)" />
</head>
<body>
<!-- Container -->
<div id="container">
<!-- End Container -->
<!-- Header -->
<div id="header">
<!-- Logo -->
<div id="logo">
<img src="images/TalonLogo.png" alt="TalonLogo" />
</div>
<!-- Nav bar -->
<div id="nav">
<ul>
<li>
Test
</li>
<li>
Test
</li>
<li>
test
</li>
</ul>
</div>
</div>
<!-- End header -->
<div id="info">w
</div>
</div>
And the CSS:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
body {
width: 100%
margin: 0;
padding: 0;
}
#container {
width: 480px;
margin-left: auto;
margin-right: auto;
}
#logo {
max-width: 100%;
text-align: center;
}
#nav {
margin-top: 10.6%;
margin-left: 4.6%;
}
Now, I do have a main style sheet obviously, and here's a problem, the whole document (no matter what size) changes the background color... Example:
Main style sheet
body {
background: #fff;
}
but, if i go into my mobile.css
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
body {
background: #000;
}
It all turns black...isn't it meant to be if the screen size is at 480px it will change over?
I'm pretty sure you're missing the viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Related
was wondering if the following is possible using grid or flexbox.
I got a 3-column layout that I want to make responsive. Now, on the one hand I can use a media query to lets say make all 3 columns full width on <640px screens, but what if I want the first 2 to be 50/50 and the third one full width?
A possible solution could be to use a combination of a media query and :last-child, but I wonder if this can be done without the use of media queries?
Desktop
Mobile <641
<!DOCTYPE html>
<html>
<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">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
body,
html {
padding: 0;
margin: 0;
}
.bg-color {
background-color: #ccc;
}
.bg-color1 {
background: #817e7e;
}
/* This is for three box Wrapper */
.my-row {
display: flex;
flex-flow: row wrap;
}
/* This is for three box */
.my-col {
flex: 0 0 33.333%;
width: 33.333%;
}
#media (max-width: 641px) {
.my-col {
flex: 0 0 100%;
width: 100%;
}
}
</style>
</head>
<body>
<div class="my-row">
<div class="my-col bg-color">
<h1>Col 1</h1>
</div>
<div class="my-col bg-color1">
<h1>Col 2</h1>
</div>
<div class="my-col bg-color">
<h1>Col 3</h1>
</div>
</div>
</body>
</html>
Why is my text not being centered when i am using the margin to center it(IT WORKS WHEN I USE - text-align : center) :
here is the code and the screenshot :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Angad's website</title>
<link rel="stylesheet" href="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<img src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/cloud.png" alt="cloud-image">
<h1>I'm Angad</h1>
<p>a student </p>
<img src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/cloud.png" alt="cloud-image">
<img src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/mountain.png" alt="mountain-image">
</body>
</html>
CSS TO THIS :
h1{
background-color: #ffe3fe;
margin: 0 auto;
}
RESULT :
You need to set a width as well. In the browser's mind, this is already centered. Here is an example:
h1{
background-color: #ffe3fe;
margin: auto;
width: 8em;
}
I found a post about modifying text size specifically for mobile in a specific div, like this:
#media only screen and (max-width: 480px) {
.news {
font-size: 5px;
}
}
I can't get that to work however for the site I'm messing with. I'd like the font size to be smaller when opened on mobile. While I wonder if I have to set a viewport meta in the html, every time I do this A, it doesn't fix it, B, it totally destroys the balance of my site, clipping tons of information, which I really don't like. So, the only way I'm going to be able to use a viewport right now, is if it doesn't mess with the zoom factor at all. Not sure if that's the issue though.
Really appreciate any help on this. Full code:
css:
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
font-size: 100%;
font-weight: 1;
font-family: 'rationale';
background:black;
}
#newsusa {
position: absolute; /*makes it relative to the html element, (the first
positioned element).*/
width: 100%; /*makes the element 100%, to center it. */
left: 0px;
top: 200px;
}
.news {
color: white;
font-size: 18px;
}
li {
list-style-type: none;
}
#media only screen and (max-width: 480px) {
.news {
font-size: 0.8em;!important;
}
}
#media only screen and (max-width: 280px) {
.news {
font-size: 0.8em;!important;
}
}
xhtml:
<?php include 'global.php';?>
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mobiletest.css">
<link href='//fonts.googleapis.com
/css?family=Iceland|Rationale|Quantico|VT323|Dorsa' rel='stylesheet'
type='text/css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3
/jquery.min.js'></script>
<div id="newsusa">
<h1 class="appear-later">News</h1>
<div class="spacer1">
</div>
<div class="news">
<ul><?php outputValueFromCache('usnews', 'ignore'); ?></ul>
</div>
<div class="spacer2">
</div>
<h1 class="appear-later">Tech</h1>
<div class="spacer1">
</div>
<div class="news">
<ul><?php outputValueFromCache('usatechnews', 'ignore'); ?></ul>
</div>
<div class="spacer2">
</div>
<h1>Business</h1>
<div class="spacer1">
</div>
<div class="news">
<ul><?php outputValueFromCache('usamoneynews', 'ignore'); ?></ul>
</div>
</div>
</html>
You're going to need to add the
<meta name="viewport" content="width=device-width, initial-scale=1">
to your header. If you consider the following code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.page-header{
font-size: 16px;
color: red;
}
#media (max-width: 430px) {
.page-header{
font-size:100px;
color: green;
}
}
</style>
</head>
<body>
<h1 class="page-header">Hello</h1>
</body>
</html>
The media query only works once you have the viewport meta tag defined. I know that's probably not what you want to hear, but I think that's your solution.
I have a situation in which I want to change an HREF in an unordered list in HTML when a CSS media query is true. Specifically I want to change an HREF from
calendar.html to calendar2.html in the following page. Is this even possible?
Here is the code.
<!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"><!-- InstanceBegin template="/Templates/cliffsteele.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11;IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<style>
#media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
.header {
display:none;
}
.maincontent{
text-align:left;
}
.content {
width: 100%;
}
.footer {
display:none;
}
.sidebar1 {
float:none;
display:none;
}
.maincontent div {
text-align:left;
}
.calendar {
width=550%;
}
}
</style>
<title>Untitled Document</title>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Cliff's Show Schedule</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
-->
</style>
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />
<link href="cliff.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<script type="text/javascript" src="p7pm3/p7PM3scripts.js"></script>
<link href="p7pm3/p7PM3-01.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="container">
<div class="header"><img src="Pictures/logo.gif" alt="Logo" name="Insert_logo" width="81" height="63" id="Insert_logo" style="background: #8090AB; display:block;" />
<!-- end .header --></div>
<div class="content">
<div id="p7PM3_1" class="p7PM3-01 p7PM3 p7PM3noscript horiz menu-centered rounded auto-subs sub-left">
<ul>
<li>Home</li>
<li>Resort
<ul>
<li>Our Facility</li>
<li>Boarding & Daycare</li>
<li>Grooming</li>
<li>Rates</li>
<li>Our Guests</li>
</ul>
</li>
<li>Show Handling
<ul>
<li>Info</li>
<li>Rates</li>
<li>Schedule</li>
</ul>
</li>
<li>Photo Gallery</li>
<li>About Me</li>
<li>Contact Me</li>
</ul>
<script type="text/javascript">P7_PM3op('p7PM3_1',1,8,-5,-5,0,1,0,1,0,1,1,1,0,900,1,0)</script>
</div>
<br />
<!-- InstanceBeginEditable name="heading" -->
<h1 style="margin: 10px; clear: both; text-align:center; font-size: xx-large; font-family: Georgia, 'Times New Roman', Times, serif; padding-top:20px;">Cliff's Show Schedule</h1>
<!-- InstanceEndEditable -->
<div class="maincontent"><!-- InstanceBeginEditable name="content" -->
<iframe class="calendar" src="https://www.keepandshare.com/calendar28/show.php?i=2585375&ifr=y&colorreset=y&nw=y&vw=week28&themeChoice=0&md=30&nopopup=n&fsz=11&noviewmenu=y&noname=y&nobreak=y&noprint=y&norequest=n&nosearch=n&norss=y&noovl=y¬z=y&fd=n&sa=y&exedit=n&nonav=n&scroll=y" width="700" height="600" scrolling="Yes" frameborder="1"></iframe><p align="center">View a Mobile Version of this Calendar</p><!-- For help on embedding calendars go to http://support.keepandshare.com/support/solutions/97807 -->
</iframe>
<!-- InstanceEndEditable --></div>
<!-- end .content --></div>
<div class="sidebar1"><!-- InstanceBeginEditable name="sidebar" -->
<p style="font-size:larger; font-family:'Comic Sans MS', cursive"> </p><p style="font-size:16pt; font-family:'Comic Sans MS', cursive"> Most shows close two weeks prior to show date on Wednesday.</p>
<p style="font-size:16pt; font-family:'Comic Sans MS', cursive"> Call early if you would like me to handle your dog.</p>
<p><a style="font-size: small;" href="http://www.infodog.com/showinfo/showCal.htm" title="Infodog" target="_new">Enter a show via Infodog</a
></p>
<!-- InstanceEndEditable -->
<!-- end .sidebar --></div>
<div class="footer">
<div style="float:right">
<p> <a href="MAILTO:rickzipser#hotmail.com" >Site Designed by Fredric M. Zipser</a><br />
</p>
</div>
<div class="clearfloatleft">
<p>Clifford W. Steele Professional Handler <br />
1395 Rt. 6<br />
Carmel, NY 10512-1627<br />
United States<br />
ph:(845) 225-2463<br />
Cell:(845) 661-0010<br />
<a href="MAILTO:happydayskennelinc#hotmail.com" >happydayskennelinc#hotmail.com</a></p>
</div>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
<!-- InstanceEnd --></html>
</body>
I think it will easy if you create both link in html
<li id="schedule_link_mobile">
<a href="calendar2.html" >Schedule</a>
</li>
<li id="schedule_link_pc">
<a href="calendar.html" >Schedule</a>
</li>
and then use the css to hide the one that you don't want to show
#schedule_link_mobile{
display: none;
}
#schedule_link_pc{
display: inline-block;
}
#media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
#schedule_link_mobile{
display: inline-block;
}
#schedule_link_pc{
display: none;
}
}
I don't think CSS can alter HTML attributes
you can just "hide" it, and display the other one
#media only screen and (...) {
.your-default-calendar {
display: none;
}
.your-calender2 {
display: inline-block;
}
}
but why not just use JavaScript? you can change a attribute easily in JavaScript.
if (window.matchMedia("your media queries").matches) {
// ...
}
On a related note... You can manipulate HTML using CSS content ...
The following taken from Chris Coyier at CSS-tricks.com
.email-address:before {
content: "Email address: "; }
<ul>
<li class="email-address">chriscoyier#gmail.com</li>
</ul>
And the output would be like:
• Email address: chriscoyier#gmail.com
The question to ask is: How will the hidden content be used.
The display CSS property hides HTML that is already built. If you have mobile, tablet, and desktop HTML, the application can be building HTML and applying CSS 3x while only displaying once.
If it will be turned on and off, display works. If it will use either a mobile or a tablet or a desktop display and never use the others, using Javascript to add the content is better.
Note that AngularJS has ngIf and ngSwitch directives that accomplish that only using HTML attributes.
I'm building a website with the latest version of Bootstrap, mostly going fine besides a few small gripes.
The major one being my lists. I have two lists which work fine down to 768px wide. After that, they stack even where there is plenty of space for them to appear inline.
It's just an annoying little thing that I want sorted.
Code for my lists:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</body>
By stacking up do you mean the text is overlapping? If that's the case, you could use media queries to change the size of the typography as the screen size changes.
See the fiddle below and resize (make smaller) the bottom right pane to see the font size change.
Sample code:
#media only screen and (min-width: 1100px) {
body { font-size:120%;}
.wrap {max-width:770px;}
}
#media only screen and (max-width: 800px) {
body { font-size:100%;}
}
#media only screen and (max-width: 400px) {
body { font-size:75%;}
}
Fiddle.