I know I'm not very good at html5 but I am actively learning.I've been having trouble to make my website responsive on mobile browser. I was able to make it responsive on web browser on a computer.
Can anyone tell me how can I made it responsive and explain to me how that function works?
Thank you so much!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cayla.</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="CSS/main.css" />
</head>
<body>
<div class="img1">
<div class="one">
<div style="width:60%;background-color:#D8D8D8;margin-bottom:3%;">
<!-- <svg version="1.1" id="sign" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="792px" height="612px" viewBox="0 0 792 612" style="" xml:space="preserve">-->
<svg version="1.1" id="sign" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 792 612" style="" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FDFDFD;}
.st1{fill:none;stroke:#12100B;stroke-width:0.75;}
</style>
<path class="st1 GIfDAJwL_0" d="M864,204"></path>
<path class="st0 GIfDAJwL_1" d="M426.357,291.773c-0.041-12.345-1.707-22.665-4.352-34.209c-8.392,4.478-13.649,40.339-13.631,49.989
c0.034,17.964-1.063,41.607,6.963,56.455c8.124,15.025,19.178,4.285,24.85-7.853c5.971-12.777,7.685-22.798,7.881-37.559
c-1.444,5.259-5.496,8.714-3.049,12.917c1.016-4.619,3.755-6.121,3.922-10.898c-0.027,4.104,0.264,7.119,2.795,9.768
c1.506-5.469,3.623-13.664,3.172-17.732c-0.113,3.707-0.037,7.516,0.22,11.143c3.36-6.947,4.348-16.811,6.454-24.181
c3.606,53.796,0.22,113.64,0.22,166.148c1.091-17.07-3.938-34.533-3.938-51.979c-0.004-25.875,1.787-50.906,3.004-76.584
c1.389-29.324,11.799-55.735,15.406-85.365c3.484-28.619,3.25-56.957,3.25-85.942c0,20.127-3.17,40.157-3.85,60.265
c-0.672,19.88-0.455,43.321,10.324,60.186c4.844,7.576,9.213,12.045,16.535,5.148c3.479-3.277,4.025-6.196,4.052-11.49
c-0.541,3.818-2.303,8.03-1.189,11.883c0.229-3.271-0.647-7.569,1.188-10.189c0.972,3.261,0.131,11.245,5.246,6.779
c3.205-2.798,8.143-3.789,12.846-2.784c2.629,0.561,16.42,6.282,18.992,7.717c13.344,7.443,38.292-0.675,52.428-1.938
c19.37-1.731,18.325-3.814,37.57-6.666"></path>
<style>.GIfDAJwL_0{stroke-dasharray:0 2;stroke-dashoffset:1;animation:GIfDAJwL_draw_0 7100ms linear 0ms infinite,GIfDAJwL_fade 7100ms linear 0ms infinite;}.GIfDAJwL_1{stroke-dasharray:1094 1096;stroke-dashoffset:1095;animation:GIfDAJwL_draw_1 7100ms linear 0ms infinite,GIfDAJwL_fade 7100ms linear 0ms infinite;}#keyframes GIfDAJwL_draw{100%{stroke-dashoffset:0;}}#keyframes GIfDAJwL_fade{0%{stroke-opacity:1;}95.77464788732394%{stroke-opacity:1;}100%{stroke-opacity:0;}}#keyframes GIfDAJwL_draw_0{7.042253521126761%{stroke-dashoffset: 1}36.15023474178404%{ stroke-dashoffset: 0;}100%{ stroke-dashoffset: 0;}}#keyframes GIfDAJwL_draw_1{21.596244131455396%{stroke-dashoffset: 1095}50.70422535211267%{ stroke-dashoffset: 0;}100%{ stroke-dashoffset: 0;}}
</style></svg>
<span class="border">
</span>
</div>
</div>
<section class="section sec1">
<h1>About Me</h1>
<hr size="1" color="#666" align="center" >
<p>
Lorem ipsum dolor sit amet, enim accumsan vim ut, unum noluisse phaedrum ea duo, ne quo voluptaria argumentum. Mel volumus adipisci ne. Eu eos dolorem salutandi euripidis. Vix perfecto deseruisse ex, option scriptorem an ius.
</p>
</section>
<div class="img2">
<div class="txt">
<span class="border trans">
</span>
</div>
</div>
<section class="section sec2">
<h2>Portfolio</h2>
<hr size="1" color="#FFFFFF" align="center">
<div class="row">
<div class="column">
<img src="aki0.png" alt="aki">
</div>
<div class="column">
<video controls>
<source src="OpenVertices.mp4" type="video/mp4">
</video>
</div>
<div class="column">
<img src="Lancer.png" alt="Lancer">
</div>
<div class="column">
<img src="Naturalthinker.jpg" alt="NT">
</div>
<div class="column">
<video controls>
<source src="Circleoflife.mp4" type="video/mp4">
</video>
</div>
<div class="column">
<img src="Essentiel.png" alt="Es">
</div>
<div class="column">
<img src="Japan.png" alt="Es">
</div>
<div class="column">
<img src="black.jpg" alt="Es">
</div>
<div class="column">
<img src="content.jpg" alt="Es">
</div>
<div class="column">
<img src="icons.jpg" alt="Es">
</div>
<div class="column">
<img src="ss15.png" alt="Es">
</div>
<div class="column">
<img src="mens.jpg" alt="Es">
</div>
</section>
<div class="img3">
</div>
</div>
<section class="section sec3">
<h1> Contact Me</h1>
<hr size="1" color="#666" align="center">
<ul class="fa-ul">
<li><i class="far fa-envelope fa-2x"></i>
<div>info#hello.com</div>
</li>
<li><i class="fas fa-mobile-alt fa-2x"></i>
<div>514.123.4567</div>
</li>
<li><i class="fas fa-map-marker-alt fa-2x"></i></i>
<div>Montreal, Canada.</div>
</li>
</ul>
</section>
<section class="section sec4">
<h3>
Copyright #2017.
</h3>
</section>
</body>
</html>
body, html
{
height: 100%;
margin: 0;
color: #666;
}
.img1,.img2,.img3
{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.img1
{
/*background-image: url('../Images/background.jpg');*/
background-color: #D8D8D8;
min-height:100%;
}
svg.sign {
align-items: center;
margin-top: 50%;
margin-left: 50%;
margin-right:200%;
margin-bottom: 50%;
}
.img2
{
background-image: url('../color.jpg');
min-height:400px;
opacity:0.70;
}
.img3
{
background-image: url('../me.jpg');
min-height:400px;
opacity:0.70;
}
.section
{
text-align: center;
padding: 50px 80px;
}
.sec1
{
background-color: #f4f4f4;
color: #666;
min-height:200px;
min-width: 300px;
align-content: center;
margin-left: auto;
margin-right: auto;
}
.sec2
{
background-color: #282e34;
color: #ddd;
min-height:2250px;
}
.sec3{
background-color: #f4f4f4;
color: #666;
min-height:200px;
align-content: center;
}
.sec4{
background-color: #f4f4f4;
color: #666;
min-height:20px;
align-content: center;
}
h1{
text-transform: uppercase;
font-family:futurastf;
font-size:1.25em;
font-family:sans-serif;
letter-spacing: 3px;
color:#666;
text-align: center;
}
h2{
text-transform: uppercase;
font-family:futurastf;
font-size:18px;
font-family:sans-serif;
letter-spacing: 3px;
color:#FFFFFF;
text-align: center;
}
h3{
font-size:13px;
font-family:sans-serif;
font-family:futurastf;
letter-spacing:2px;
color:#666;
align-content: center;
margin-right: auto;
margin-left:auto;
text-align: center;
}
p{
overflow:auto;
font-size:13px;
font-family:sans-serif;
font-family:futurastf;
letter-spacing:2px;
color:#666;
line-height: 30px;
text-align:center;
margin-right: auto;
margin-left:auto;
}
.txt
{
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #000;
font-size: 27px;
letter-spacing: 8px;
text-transform:uppercase;
}
.txt .border
{
background-color: #111;
color: #fff;
padding: 20px;
}
.txt .border.trans{
background-color: transparent;
}
/* Three image containers (use 25% for four, and 50% for two, etc)*/
.column {
display:inline-block;
float: center;
width: 48%;
padding: 5px;
}
/* NEW */
.column img{
max-width:100%;
height:auto;
}
/* NEW */
.column video{
max-width:100%;
height:auto;
}
hr{
width: 40%;
}
.fa-ul{
list-style-type: none;
padding-left: 0;
margin-left:0;
}
/* NEW */
#media only screen and (max-width: 900px) {
.column {
display:inline-block;
float: center;
width: 100%;
padding: 5px;
}
hr{
width: 100%;
}
.sec2
{
background-color: #282e34;
color: #ddd;
min-height:900px;
}
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
.img-wrapper {
width: 49.75%;
}
.img-wrapper2 {
margin-left:.5%;
}
.img-wrapper3 {
margin-top:.5%;
}
.img-wrapper4 {
margin-top:.5%;
margin-left:.5%;
}
.img-wrapper5 {
width: 49.75%;
}
.img-wrapper6 {
width: 49.75%;
}
.img-wrapper7 {
width: 49.75%;
}
ul {
list-style-type: none;
color: #666;
margin-left: auto;
margin-right: auto;
align-content: center;
}
li {
clear:both;
}
li i{
font-size:40px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
li div{
float:center;
margin-left: auto;
margin-right: auto;
line-height: 60px;
text-align: center;
}
My recommendation is, use the css framework like bootstrap.
https://getbootstrap.com/docs/4.1/getting-started/introduction/
or
If you do not want to use framework, can use media queries.
/* Mobiles - 320x480px */
#media screen and (max-width: 480px) {
h1{
color: blue;
}
}
/* Tablets - 768x1024px */
#media screen and (max-width: 1024px) {
h1{
color: red;
}
}
And try to check responsive view using
http://ami.responsivedesign.is/
You can use two things to make website responsive.
Bootstrap Framework to make it responsive for all big and small
devices. See their documentation Link
Media Queries Link
You can make the website responsive by using screen Media queries and add meta tag in the head of the html document.
media queries works like this: you add the screen size and then the styles inside of it
#media only screen and (max-width: **your screen size here**) {
div {
color: green;
}
}
you can read more about it here:
Responsive Design
Using Media Queries
some Screen sizes
website :https://wells-demo.squarespace.com/
Need logo in center of page section excluding left sidebar(header) in squarespace WELLS template on all format mobile,desktop etc.I am trying to figure out but no result.following is my code
$(document).ready(function(){
$('#headerWrapper #header ').after('<div id="logo1" data-content-field="site-title"><h1 class="logo image" data-shrink-original-size="23" style="letter-spacing: 0.0869565em;"><img src="//static1.squarespace.com/static/5adfd10929711421a9b29d21/t/5adfdbac562fa79909bad158/1524908392416/?format=750w" alt="L ETO BRIDAL" width="130" height=50"></h1></div>');
});
#logo{display:none;}
#headerWrapper{top:4px!important}
#logo1 h1 a img {
height:70px!important;
}
#logo1 {
left: 300%;
position: absolute;
text-align: center !important;
top: 10px !important;
transform: translateX(-50%);
Based on your current CSS, this should do it:
#logo {
width: 100%;
text-align: center;
}
#media (min-width: 801px) {
#logo {
position: fixed;
width: calc(100% - 340px);
top: 0;
margin-left: 240px;
box-sizing: border-box;
background-color: #ffffff85;
padding: .5rem 0;
border-bottom: 1px solid #fff;
}
}
Note: in current form, your question is not really useful to future visitors.
You can read the structure i made below using w3.css from w3schools. I have given a border colour to every div so you can see the boundary of that div and it will make it easy to learn for you.
.outer
{
border:1px solid red;
min-height:100px;
width:100%;
}
.inner-left
{
border:1px solid green;
}
.inner-right
{
border:1px solid blue;
}
.centetr
{
text-align:center;
}
.photo
{
width:95%;
margin:0px auto;
height:40px;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container outer">
<!--left side-->
<div class="w3-quarter inner-left">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div class="w3-rest inner-right">
<div class="w3-container w3-margin-bottom centetr">
NAME
</div>
<div class="w3-container">
<div class="w3-half">
<img src="" class="photo">
</div>
<div class="w3-half">
<img src="" class="photo">
</div>
<div class="w3-half">
<img src="" class="photo">
</div>
<div class="w3-half">
<img src="" class="photo">
</div>
</div>
</div>
</div>
I am trying to make the basic HTML5/CSS3 framework for a Minesweeper Web Game thing. But for some reason I can't get my buttons to move out of their static positions. What did I do wrong? Here is my code (Note: I am using the NetBeans 8.1 IDE)
HTML:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Minesweeper Web App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="http://old.no/icon/entertainment/mini-mine.gif" />
<link rel="stylesheet" href="classes.css" type="text/css"/>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
</head>
<body>
<div class="header">
<h1>Minesweeper!!!!</h1>
<p>Made by Desmond</p>
</div>
<div class="sub-header">
<div class="img-box" id="left">
<img src="#" id="smile" alt="this game is broken!"/>
</div>
<div class="img-box" id="right">
<img src="#" id="flag" alt="This game is broken!"/>
</div>
<p id="score">Score: </p>
</div>
<div class="body">
<div class="grid-box">
<div class="button" id="5x5">
<p>Easy (5x5)</p>
</div>
<div class="button" id="8x8">
<p>Medium (8x8)</p>
</div>
<div class="button" id="10x10">
<p>Hard (10x10)</p>
</div>
</div>
</div>
</body>
</html>
css:
`
.header {
width:100%;
height:20%;
border-bottom:2px solid #efefef;
border-radius:5px;
background:#80ffff;
text-align:center;
font-family:"Comic Sans MS", cursive;
}
.sub-header {
width:100%;
height:10%;
border-bottom:2px solid #efefef;
border-radius:5px;
background:#e5ffff;
}
.img-box {
display:inline-block;
position:relative;
width:50px;
height:50px;
background:radial-gradient(#cccccc 20%, #999999 80%);
border:2px solid #cccccc;
border-radius:2px;
align-content:center
}
.img-box img {
vertical-align:middle;
}
.button {
position: relative;
background-color: #efefef;
height: 30px;
width: 100px;
border: 2px #999999 solid;
border-radius:8px;
font-family:"Modern No. 20";
font-weight:bold;
margin-left: 100px;
}
.button p {
position: absolute;
top: -8px;
}
.header p {
text-shadow: 2px 2px gray;
right: 1px;
}
.sub-header {
text-align:center;
margin-top:0px;
}
.body {
background:#d9d9d9;
height:1000px;
width:100%;
}
#8x8 {
left: 500px;
}
#10x10 {
left:1000px;
}
.grid-box {}
You can't move the buttons because the div ids are numeric. They should have at least one character. I changed the id's and now its working.
HTML
<div class="header">
<h1>Minesweeper!!!!</h1>
<p>Made by Desmond</p>
</div>
<div class="sub-header">
<div class="img-box" id="left">
<img src="#" id="smile" alt="this game is broken!" />
</div>
<div class="img-box" id="right">
<img src="#" id="flag" alt="This game is broken!" />
</div>
<p id="score">Score: </p>
</div>
<div class="body">
<div class="grid-box">
<div class="button" id="5x5">
<p>Easy (5x5)</p>
</div>
<div class="button" id="eight">
<p>Medium (8x8)</p>
</div>
<div class="button" id="ten">
<p>Hard (10x10)</p>
</div>
</div>
</div>
CSS:
.header {
width: 100%;
height: 20%;
border-bottom: 2px solid #efefef;
border-radius: 5px;
background: #80ffff;
text-align: center;
font-family: "Comic Sans MS", cursive;
}
.sub-header {
width: 100%;
height: 10%;
border-bottom: 2px solid #efefef;
border-radius: 5px;
background: #e5ffff;
}
.img-box {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
background: radial-gradient(#cccccc 20%, #999999 80%);
border: 2px solid #cccccc;
border-radius: 2px;
align-content: center
}
.img-box img {
vertical-align: middle;
}
.button {
position: relative;
background-color: #efefef;
height: 30px;
width: 100px;
border: 2px #999999 solid;
border-radius: 8px;
font-family: "Modern No. 20";
font-weight: bold;
margin-left: 100px;
}
.button p {
position: absolute;
top: -8px;
}
.header p {
text-shadow: 2px 2px gray;
right: 1px;
}
.sub-header {
text-align: center;
margin-top: 0px;
}
.body {
background: #d9d9d9;
height: 1000px;
width: 100%;
}
#eight {
left: 200px;
}
#ten {
left: 1000px;
}
.grid-box {}
Here's a fiddle with the solution. For more info, read this.
Under "School" the second image isnt the same size as any of the other images on my website. How do i resize the image?
JSFIDDLE: http://jsfiddle.net/54k90fof/
(ignore the messed up banner at the top. It looks different in my browser but it looks bad in JSfiddle)
HTML
<!DOCTYPE>
<HTML>
<head>
<meta charset="UTF-8">
<title> My Home Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="banner">
<h1> Welcome!<span style="color:#FF009D" class="dot">•</span><span style="color:#12E00B" class="dot">•</span><span style="color:#FF9D00" class="dot">•</span>
</h1>
<div class="Navi">
<nav>
<ul>
<li>About me! </li>
<li>Email me </li>
<li>Photography</li>
</ul>
</nav>
</div>
</div>
<p> Favorite Websites</p>
<div class="wrap">
<div class="wrap-in">
<div class="item">
<a href="https://www.youtube.com/user/maxxchewning">
<img src="http://i.ytimg.com/vi/HrkZQ3EOmFQ/hqdefault.jpg"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.youtube.com/user/Christianguzmanfitne">
<img src="http://i.ytimg.com/vi/zsD_7hkfEwY/hqdefault.jpg"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.youtube.com/user/PhysiquesOfGreatness">
<img src="http://v017o.popscreen.com/VzFBeVBjMHhpRWMx_o_new-physiques-of-greatness-intro-25.jpg"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.reddit.com">
<img src="https://pbs.twimg.com/profile_images/459083822470946816/VGv0AGio.png"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.ebay.com">
<img src="https://pbs.twimg.com/profile_images/471350614132129793/NCDCFXva.jpeg"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.facebook.com">
<img src="https://pbs.twimg.com/profile_images/3513354941/24aaffa670e634a7da9a087bfa83abe6_400x400.png"/>
<div class="button"></div>
</a>
</div>
</div>
</div>
<p> School </p>
<div class="wrap">
<div class="wrap-in">
<div class="item">
<a href="https://www.howdy.tamu.edu">
<img src="http://www.ourgeeks.com/wp-content/uploads/2014/02/howdy.tamu_.edu_.jpg"/>
<div class="button"></div>
</a>
</div>
<div class="item">
<a href="https://www.ecampus.edu">
<img src="http://hdc.tamu.edu/files/150_199/191/002_login.jpg"/>
<div class="button"></div>
</a>
</div>
</div>
</div>
<div class="footer"></footer>
</body>
</HTML>
CSS
body {
margin-top:-3px;
min-width:1000px;
}
p {
font-family: Futura;
font-size:20px;
margin-left:10px;
}
nav ul li {
display:inline-block;
font-size:10px;
float:left;
height:200px;
width:100px;
}
.item{
width: 156px;
}
.wrap{
overflow: hidden;
overflow-x: scroll;
width: 960px;
}
.wrap-in{
width: 2500px;
}
.banner {
width:100%;
height:200px;
background-color: rgba(64, 201, 255, 1);
margin-left:-10px;
}
.Navi {
position: absolute; top: 0px; right: 90px;
background-color:rgba(64, 201, 255, 1);
height: 150px;
font-family: Futura;
font-size:10;
}
.Navi ul li a {
text-decoration:none;
color: white;
}
h1 {
font-size:80px;
margin-left:30px;
font-family:Futura;
line-height:120px;
color:rgba(255, 255, 255, 1);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
width:100%;
letter-spacing:1px;
padding-top:30px;
}
h1:hover {
font-size:80px;
font-family:Futura;
color: rgba(64, 201, 255,.8);
text-shadow: 2px 2px 3px rgba(255, 255, 255,0.9);
width:100%;
padding-top:30px;
}
.wrap{
margin-top:20px;
width: 100%;
background-color: rgba(255, 190, 77, 1);
height:200px;
margin-left:-10px;
overflow:auto;
}
.item {
float:left;
padding:0px;
margin-left: 40px;
margin-top: 20px;
}
.item img {
width:100%;
padding-top:10px;
max-height:100px;
opacity:1;
}
.item img:hover {
opacity:.4;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
.button {
background-color:rgba(64, 201, 255,1);
height:50px;
width:100%;
border-bottom-right-radius:.5em;
border-bottom-left-radius:.5em;
transition: background-color 0.3s linear;
}
.item:hover .button{
background-color: rgba(255, 0, 157, 1);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
change max-height:100px to simply height:100px. or else upload the images all in the same width to height ratio, however you are already stretching the image ratio with width:100% soo...
.item img {
width: 100%;
padding-top: 10px;
height: 100px;
opacity: 1;
}
The best way if you want to keep the original image ratio, you should use some server side technology to crop or fill the image to the same ratio. eg, nginx has an image module can do this, and there're a lot libraries in php.
Otherwise, you can add a fixed height and black background-color wrapper div out of the image tag, set the images' vertical align to middle.
I asked this question before, but it was too confusing and I couldn't clarify it as well. I fixed my website and now doing test to make my responsive site work on different mobile platform. However, when open the site on Android mobile, everything is fall apart.
For responsive design, I am using external file and linking it to html like this.
here is the website http://www.sfu.ca/~nnabeel use mobile to open the site.
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:786px)" href="medium-style.css" /> <!--Tablet-->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="small-style.css" /> <!--Mobile-->
I am using meta-tag to make the site scale able to different platforms.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimun-scale=1.0, initial-scale=1.0"/>
Here is my HTML/CSS code for responsive design.
HTML:
<body>
<div id="controls">
Home
Work
About
</div>
<div id="pagewrap">
<div id="home">
<article>
<img src="images/Logo.png" width="150" height="150" alt="Logo"/>
<p>My name is Nabeel Muhammad and I change innovative ideas into design </p>
<div id="socialmedia">
<img src="images/twitter.jpg" height="40" width="40" alt="Twitter Logo"/>
<img src="images/linkedin.jpg" height="40" width="40" alt="Linkedin Logo"/>
</div> <!--Social Media Ends-->
</article>
<div id="skillslevel"><p>Skills Level</p></div>
<section>
<div id="psskills"> <img src="images/photoshop.png" width="40" height="40" alt="Adobe PhotoShop" /> </div>
<div id="psrating"> </div>
<div id="aiskills"> <img src="images/illustrator.png" width="40" height="40" alt="Adobe Illustrator" /> </div>
<div id="airating" > </div>
<div id="inskills"> <img src="images/indesign.png" width="40" height="40" alt="Adobe InDesign" /> </div>
<div id="inrating"0> </div>
<div id="dwskills"> <img src="images/dremweaver.png" width="40" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="dwrating"> </div>
<div id="prskills"> <img src="images/premier.png" width="40" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="prrating"> </div>
<div id="htmlskills"> <img src="images/html.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="htmlrating"> </div>
<div id="cssskills"> <img src="images/css.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="cssrating"> </div>
<div id="jsskills"> <img src="images/javascript.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="jsrating"> </div>
<div id="jqskills"> <img src="images/jquery.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="jqrating"> </div>
</section>
<div id="scale"> <img src="images/linebar.png" width="330" alt="Scale"/> </div>
<div id="ratingnumber">
<ul>
<li>1</li>
<li>5</li>
<li>10</li>
</ul>
</div>
</div> <!--Home Ends-->
</div>
CSS for mobile
#pagewrap {
width: 480px;
margin: 0 0 0 -0.6em;
position:relative;
}
#controls {
margin:-0.3em auto 0 -0.3em;
text-align: center;
width:480px;
font-family: 'Bebas';
font-size:1.87em;
background-color: #b0d8a3;
line-height:1.3em;
}
#controls a {
display: inline-block;
width: 480px;
margin: 0 auto;
background: #5cc3c1;
color: #fff;
text-decoration: none;
border-radius: 5px;
line-height: 32px;
}
#home article img {
position:relative;
left:3em;
top:4em;
}
#home article p {
font-size:2.5em;
font-family: 'Bebas';
text-align:left;
position:relative;
width:10em;
left:1em;
top:1em;
line-height:1.1em;
padding: 0 0;
}
#socialmedia {
position: relative;
top:-1.8em;
left:-0.5em;
margin-right:1em;
}
#socialmedia img {
position:absolute;
left:8em;
top: 2.5em;
}
/*Skills*/
#skillslevel {
position:absolute;
top:25em;
left:2.5em;
}
#skillslevel p {
font-size:1.5em;
font-family: 'Cabin';
}
section {
position: relative;
bottom:22.5em;
}
section #psskills {
position: absolute;
left:2.5em;
top:27em;
}
section #psrating {
width: 20.3em;
height: 2.3em;
background: #bfddc3;
position: absolute;
left:5.5em;
top:27em;
}
section #aiskills {
position: absolute;
left:2.5em;
top:30em;
}
section #airating {
width:18.6em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:30em;
}
section #inskills {
position:absolute;
left:2.5em;
top:33em;
}
section #inrating {
width:19.3em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:33em;
}
section #dwskills {
position:absolute;
left:2.5em;
top:36em;
}
section #dwrating {
width:19.8em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:36em;
}
section #prskills {
position:absolute;
left:2.5em;
top:39em;
}
section #prrating {
width:19.3em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:39em;
}
section #htmlskills {
position:absolute;
left:2.5em;
top:42em;
}
section #htmlrating {
width:20.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:42em;
}
section #cssskills {
position:absolute;
left:2.5em;
top:45em;
}
section #cssrating {
width:20.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:45em;
}
section #jsskills {
position:absolute;
left:2.5em;
top:48em;
}
section #jsrating {
width:14.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:48em;
}
section #jqskills {
position:absolute;
left:2.5em;
top:51em;
}
section #jqrating {
width:12.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:51em;
}
#scale {
position:absolute;
top:48.5em;
left:5.2em;
}
#ratingnumber ul{
position:absolute;
top:57em;
left:-6em;
list-style:none;
}
#ratingnumber ul li{
display:inline-block;
margin-left:9em;
font-family: 'Cabin';
font-size:16px;
}
I know its alot of CSS, some of you might find some of the things useless, but that is how I approach the problem.
So when I open the website in tablet, it works fine, but as soon as I open it in mobile, the design fell apart.
Thanks for the help.
I've noticed in your viewport you've spelt minimum in minimum-scale incorrectly.
This will break the scaling.