I'm developing a mobile version of my website. I have this code, tested on Galaxy S3, there is no scroll and the site displays okay.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="css/mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="css/desktop.css" />
</head>
On the iPhone 4 however, I get this. The image is a bit too large, and the top bar does not extend to the phone's full width. I assume that this is because iPhone's width is 480px, but how can I target the device and its width, ideally without creating another CSS file for it?
The top bar is set here, as border-top:
body { background-color:#F5F5F5; width: 100%; font-family:Verdana, Geneva, sans-serif; font-size:14px; margin: 0px auto; border-top: 15px solid #003663; line-height: 14px; }
This can go in your primary stylesheet:
/*Target iPhone's screen width*/
#media screen and (max-device-width: 480px){
/*Do not set fixed widths, use %*/
body{
-webkit-text-size-adjust:none;
font-family:Helvetica, Arial, Verdana, sans-serif;
padding:5px;
}
/*Set widths to 100%*/
div{
clear:both!important;
display:block!important;
width:100%!important;
float:none!important;
margin:0!important;
padding:0!important;
}
/*Create vertical navigation menu*/
#nav,#nav li{
float:none!important;
clear:both!important;
margin:0 0 20px 0!important;
display:block;
padding:0;
text-align:left!important;
width:100%;
}
#nav{
border:1px solid #ccc;
padding:5px;
border-radius:5px;
}
#nav li{
margin:0!important;
}
#nav li a{
display:block;
}
}
Related
I need to center div's element for mobile devices. This is my website: http://transporttest.cba.pl/
On mobile devices description div goes to the left.I try to use media queries but it didnt works. What I'm doing wrong? On PC everything is ok. This is fragment of my code:
HTML:
<div id="opis">
<h2>
<p style="line-height: 3cm; ">
♦ Od 1991 roku w branży. <br/>
♦ 9 zestawów (ciągnik+ naczepa firanka, colimulde). <br/>
♦ Uprawnienia ADR u każdego kierowcy.<br/>
♦ Warsztat obsługujący auta ciężarowe.<br/>
</p>
</div>
CSS:
#opis
{
font-size: 25px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #F2F3F7;
height: auto;
width:72%;
display:inline-block;
text-align:center;
}
#container
{
text-align: center;
width:100%;
}
#media all and (max-width: 768px) {
#container{
wiidth:100%;
}
#opis,#opis_onas,#opis_dok,#opis_praca,#oskup,#opis_warsztat,#okredyt
{
left:25%;
top:25%;
position:absolute;
width:50%;
text-align:center;
}
#menudol{
text-align:center;
display: block;
margin: 0 auto;
}
}
#media all and (max-width:640px){
#container{
wiidth:100%;
}
#opis,#opis_onas,#opis_dok,#opis_praca,#oskup,#opis_warsztat,#okredyt
{
width:72%;
height:auto;
display:inline-block;
text-align:center;
margin: 0 auto;
}
#menudol{
text-align:center;
display: block;
margin: 0 auto;
}
}
For media queries to work, you need to include:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Between the tags.
https://www.w3schools.com/css/css_rwd_viewport.asp
Firstly, use <meta name="viewport" content="width=device-width, initial scale= 1.0">
As it will automatically fit you webpage to the width of the Device.
Secondly, you should use margin-left=auto;
margin-right=auto;
This will make the contents if your webpage to the center of the screen of the device.
You can also use text-align="center"
if that works for you.
P.S. The <meta name=viewport> should be definitely used in webpages as it helps the designer to format the webpage automatically to the screen width.
I'm trying to use a media query to make a div responsive on a site (using IE11).
This is my CSS:
#media screen and (max-width: 400px) { // Tried with "only screen" also
.divStyle {
background-image:none;
background-color:red;
background-position:right;
color:#fff!important;
height:140px;
position:relative;
top:-6px;
}
}
.divStyle {
background-image:url('/images/image.jpg');
background-position:right;
color:#fff!important;
padding:20px;
height:190px;
position:relative;
top:-6px;
}
I've also added the metatag in the Head section.
<meta name="viewport" content="width=device-width, initial-scale=1" />
But it still doesn't respond when I'm resizing the window.
In your case the rule without the media query follows after the one with the media query. So it overwrites the rule.
Change their order to this.
.divStyle {
background-image:url('/images/image.jpg');
background-position:right;
color:#fff!important;
padding:20px;
height:190px;
position:relative;
top:-6px;
}
#media screen and (max-width: 400px) {
.divStyle {
background-image:none;
background-color:red;
background-position:right;
color:#fff!important;
height:140px;
position:relative;
top:-6px;
}
}
Please consider that I am a newbie in CSS!
I am trying to build a simple webpage having some CSS properties, but the problem is that my webpage is alright in fully maximized window but the design breaks down when I try to re-size the browser window.
Webpage source :
<html>
<head>
<title>Registration From</title>
<style type="text/css">
body
{
background-color:#d2d2ff;
margin:0;
padding:0;
width:100%;
}
header
{
margin:0px;
padding:0px;
height:90px;
background-color:#a0b7e0;
box-shadow:0px 0px 90px #00000f;
}
footer
{
margin-top:40%;
height:40px;
background-color:#a0b7e0;
box-shadow:0px 0px 30px #00000f;
position:relative;
}
.text_h
{
text-align:center;
color:white;
font-size:65px;
text-shadow:2px 2px 1px #555555;
}
.text_f
{
text-align:center;
color:#ffffff;
font-size:15px;
text-shadow:2px 2px 1px #555555;
padding-top:0.7%;
}
cont1
{
height:43%;
width:12%;
border:1px solid black;
background-color:#c9c9c9;
float:left;
margin-top:2%;
margin-left:1%;
border-radius:7px;
box-shadow:0px 2px 15px #00000f;
}
cont2
{
height:73%;
width:84%;
border:1px solid black;
background-color:#e2e2e2;
float:left;
margin-top:2%;
margin-left:2%;
border-radius:7px;
box-shadow:0px 2px 15px #00000f;
vertical-align: top;
}
.ql
{
text-align:left;
color:#829fd7;
font-size:20px;
font-weight:bold;
text-shadow:0px 0px 1px #ffffff;
padding-left:4%;
}
.list
{
color:#1f1f1f;
font-size:18px;
text-shadow:0px 1px 1px #555555;
list-style-type: circle;
}
a
{
text-decoration:none;
}
a:hover
{
color:white;
font-weight:bold;
padding-left:4%;
}
</style>
</head>
<body>
<header>
<div class="text_h">Basic Homepage</div>
</header>
<cont1>
<p class="ql">Quick Links</p>
<ul class="list">
<li>Homepage</li><br>
<li>Contact Us</li><br>
<li>About Us</li><br>
<li>Message</li><br>
<li>Registration</li>
</ul>
</cont1>
<cont2></cont2>
<footer>
<div class="text_f">© 2014 Neeraj Singh</div>
</footer>
</body>
</html>
Can anyone please suggest me the right way to do it?
So I see a couple issues with your code that I would definitely go ahead and fix:
1) <cont1> and <cont2> are not valid HTML tags. If you want to differentiate between two of the same tags, use classes or ids.
2) The top of your document is missing some key items which make a page render correctly. Replace <html> with <!DOCTYPE html> and add the following meta tags before your <title> tag:
<meta charset='utf-8' />
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
As for your question, it depends on your definition of when a design 'breaks down.' If you're talking about the word wrap of the header, you can apply a mid-width to your css, which will force the page to be scrollable when the screen becomes too small. To avoid future issues with this, you could put the min-width on the html and body elements of the page. Like:html, body { min-width:800px;}. Hope that helps to get you started!
What you will need to do is use CSS Media Queries to apply styling at specific screen size breakpoints. The should look like this:
#media screen and (min-width:###px ) and (max-width: ###px ) {
/* enter styles that appliy here */
}
Use these for diferent screen sizes. I use one for mobile phones and one for tablets. These can go either at the top or bottom of your stylesheet. But for readability keep the together.
I am making a very simple website countdown website with one image and 2 lines of text(including the countdown). I want to make it responsible to the device width. When someone sees this website on mobile or tablet I want the fonts to be smaller. I have used media query. When I want to test it in my PC browser (by resizing the browser window) It is not working. Can anyone tell me what could be wrong?
HTML:
<head>
<meta name="viewport" content="width=width, initial-scale=1.0;">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Countdown</title>
<link rel="stylesheet" type="text/css" media="all" href="css/main.css" />
<script type='text/javascript'src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript">
// countdown script
</script>
</head>
<body>
<div id="content">
<div id="zasuvka"></div> //here is my image
<p id="ele">TITLE</p> // here is the title
<div id="odpocet" >
<div id="prichadza">Remains: </div> <div id="countdown"></div> //here is shown the countdown
</div>
<div id="show" style="display:none"> // div that will show after the countdown
LINK
</div>
</div>
</body>
CSS:
#media screen and (max-width: 480px) {
#prichadza {
font-size:24px;
float:left;
text-align:center;
font-family:"sans";
color:#ffffff;
padding-top:10px;
}
#countdown{
padding-left:10px;
font-size:24px;
font-family:"sans";
color:#a54d14;
}
}
body{
background: -webkit-linear-gradient(#e4cf8e, #fdf7e5); /* For Safari */
background: -o-linear-gradient(#e4cf8e, #fdf7e5); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#e4cf8e, #fdf7e5); /* For Firefox 3.6 to 15 */
background: linear-gradient(#e4cf8e, #fdf7e5); /* Standard syntax (must be last) */
}
#font-face
{
font-family: sans;
src: url(../fonts/OpenSans-Bold.ttf);
}
#content{
width:100%;
text-align:center;
}
#zasuvka {
width:318px;
height:303px;
background:url('../img/zasuvka.png')no-repeat;
margin:auto;
margin-top:120px;
}
#countdown{
padding-left:10px;
font-size:44px;
float:left;
font-family:"sans";
color:#a54d14;
}
#ele {
font-family:"sans";
font-size: 48px;
color:#a54d14;
margin:0px;
padding-top:30px;
}
#prichadza {
font-size:34px;
float:left;
text-align:center;
font-family:"sans";
color:#a54d14;
padding-top:10px;
}
#odpocet {
width:600px;
padding-left:95px;
margin:auto;
}
#show a {
font-size:44px;
text-align:center;
font-family:"sans";
color:#a54d14;
}
Any suggestions? Thank you.
Move "#media screen and (max-width: 480px)" at the end of the css document!
So it would look like:
body{
background: -webkit-linear-gradient(#e4cf8e, #fdf7e5); /* For Safari */
background: -o-linear-gradient(#e4cf8e, #fdf7e5); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#e4cf8e, #fdf7e5); /* For Firefox 3.6 to 15 */
background: linear-gradient(#e4cf8e, #fdf7e5); /* Standard syntax (must be last) */
}
#font-face
{
font-family: sans;
src: url(../fonts/OpenSans-Bold.ttf);
}
#content{
width:100%;
text-align:center;
}
#zasuvka {
width:318px;
height:303px;
background:url('../img/zasuvka.png')no-repeat;
margin:auto;
margin-top:120px;
}
#countdown{
padding-left:10px;
font-size:44px;
float:left;
font-family:"sans";
color:#a54d14;
}
#ele {
font-family:"sans";
font-size: 48px;
color:#a54d14;
margin:0px;
padding-top:30px;
}
#prichadza {
font-size:34px;
float:left;
text-align:center;
font-family:"sans";
color:#a54d14;
padding-top:10px;
}
#odpocet {
width:600px;
padding-left:95px;
margin:auto;
}
#show a {
font-size:44px;
text-align:center;
font-family:"sans";
color:#a54d14;
}
#media screen and (max-width: 480px) {
#prichadza {
font-size:24px;
float:left;
text-align:center;
font-family:"sans";
color:#green;
padding-top:10px;
}
#countdown{
padding-left:10px;
font-size:24px;
font-family:"sans";
color:#a54d14;
}
}
i see that in your css you have a media query for screen less or equal to 480px
...inside it you define #prichadza and #countdown ....but then you define these two again - this time "outside" of the media query with different values to the same properties. It will not work like that - you need to add !important in your rules inside media query or you need to specify another media query screen and (min-width:481px) and define here the rules for screen bigger than 480 instead of that rules you placed "outside".
for first solution you just need something like this.:
#media screen and (max-width: 480px) {
#prichadza {
font-size:24px !important;
}
}
...and your #prichadza font-size will do change now.
I am having the weirdest issue with media queries. In my desktop browser, they work fine when it is resized. When I test on my iPhone (5C), the media queries are completely ignored.
EDIT
If I change max-width to something absurd like 3000px, the styles get applied just fine..
The media queries are the last items in my stylesheet, fyi. Here is the media query specific block:
#media only screen and (max-width:930px){
html{ font-size:46.875%; }
.arrowdown, .arrowup{ border-width:20px;}
#about .abouttext{
width:90%;
font-size: 1.8rem;
line-height:2.7rem;
padding-bottom:40px;
}
#quotebox{background-color:green;}
#quotebox h3{ width:65%; }
#quotebox div{ width:40%;}
#contact ul li{
font-size:1.6rem;
width:90%;
}
.socialbox img{ opacity:1; }
.socialbox a{ margin: 0 20px;}
.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
visibility: hidden;
opacity:0;
}
.hint:after, [data-hint]:after {
content: "-";
width:0;
height:0;
}
}
Anyone got any ideas?
Try adding: max-device-width to your media query along with this following snippet to the head of your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no">
So your media queries should look like:
#media only screen and (max-width: 930px), only screen and (max-device-width: 930px){
html{ font-size:46.875%; }
.arrowdown, .arrowup{ border-width:20px;}
#about .abouttext {
width:90%;
font-size: 1.8rem;
line-height:2.7rem;
padding-bottom:40px;
}
}