How do I make my entire website responsive on mobile? - html
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
Related
grid display not displaying correctly
I'm having trouble getting my grid to display the way i want and i can't see what i've done wrong. Please take a look at this for me.
It was displaying correctly when i was using background-image url() in css but i needed to use image tags because they need to be hyperlinks and i'm pretty sure this was the only way. When i use img tags the pictures were now displaying in their full size and i couldnt get them back to the right scale. and when i wrapped them in anchor tags they stopped displaying in the correct order.
Here's my code
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
p {
margin: 0;
font-size: 1.8rem;
}
body {
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.5;
}
header {
display: flex;
width: 100%;
justify-content: space-between;
background-color: darkgrey;
padding-right: 5%;
}
header h1 {
background-color: blue;
padding: 1px;
min-width: 20%;
color: yellow;
}
nav {
display: flex;
text-decoration: underline darkblue;
width: 60%;
align-items: center;
justify-content: space-around;
}
nav li {
display: inline;
justify-content: flex-end;
padding-left: 8%;
color: yellow;
}
.heroBanner {
background-image: url("../images/02-hero-bg.jpg");
background-size: cover;
height: 200px;
position: relative;
}
#page-section {
width: 100%;
}
#title {
position: absolute;
bottom: 10%;
right: 10%;
background-color: blue;
color: yellow;
}
/* Put my about stuff here */
#about {
display: flex;
padding: 3%;
}
#about p {
align-items: stretch;
color: yellow;
}
#about-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#about-2 {
width: 80%;
padding-left: 3%;
background-image: url(/my-work/images/Portfolio-avatar.png);
background-size:contain;
background-position: center;
}
#work {
height: 1200px;
display: flex;
padding: 3%;
}
#work-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#work-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'one one'
'two three'
'four five'
}
.pics {
position: relative;
}
.pic-title {
position: absolute;
bottom: 15%;
background-color: blue;
color: yellow;
}
#big {
grid-area: one;
object-fit: contain;
margin: 10px;
border: solid 4px darkblue;
}
#pic1 {
grid-area: two;
object-fit: contain;
width: 25%;
margin: 10px;
border: solid 4px darkblue;
}
#pic2 {
grid-area: three;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic3 {
grid-area: four;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic4 {
grid-area: five;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#picture1, #picture2, #picture3, #picture4, #picture5 {
object-fit: cover;
}
#contact {
display: flex;
width: 100%;
display: flex;
padding: 3%;
}
#work-2 {
width: 75%;
}
#contact-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#contact-2 {
width: 80%;
}
#contact-2 ul {
display: flex;
list-style: none;
display: flex;
text-decoration: underline darkblue;
width: 80%;
align-items: center;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lorenzo Francis-Walker // Junior Web Developer</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- main logo / nav -->
<header>
<h1>Lorenzo Francis-Walker</h1>
<nav>
<li>About me</li>
<li>Work</li>
<li>Contact Me</li>
</nav>
</header>
<!-- hero banner -->
<section class="heroBanner">
<h2 id="title">Room4Renzo</h2>
</section>
<main class="page-wrapper">
<!-- about me -->
<section class="page-section" id="about">
<div id="about-1">
<h2>About Me</h2>
</div>
<div id="about-2">
<p>My love for computers comes from a fairly young age and is greater than my current experience. I was given an
old PC by a friend that soon stopped working. He had another one that worked but soon after giving that to me
, it too stopped working. I found a pdf of how to build computers for dummies on my phone and used what i had
learned to combine the two PC's parts into one case, and it worked. I had always been interested in technology
but this is where my love for understanding computers and how they work. Once you learn about different types
of hardware theres not many places to go. ie networking, coding, etc. fortunately for me, the depth of the
limited options are vast, so there is alot left for me to learn and I never want my journey to end.</p>
</div>
</section>
<!-- portfolio container -->
<section class="page-section" id="work">
<div id="work-1">
<h2>Work</h2>
</div>
<div id="work-2">
<a href="" target="_blank">
<div id="big" class="pics">
<img src="./images/02-run-buddy.jpg" id="picture1" alt="" class="grid-column-span-2">
<div class="pic-title">
<h2>Run Buddy</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic1" class="pics">
<img src="./images/02-portfolio-1.jpg" id="picture2" alt="">
<div class="pic-title">
<h2>LED Wall</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic2" class="pics">
<img src="./images/02-portfolio-2.jpg" id="picture3" alt="">
<div class="pic-title">
<h2>Calculator</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic3" class="pics">
<img src="./images/02-portfolio-3.jpg" id="picture4" alt="">
<div class="pic-title">
<h2>Pastel Puzzels</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic4" class="pics">
<img src="./images/02-portfolio-4.jpg" id="picture5" alt="">
<div class="pic-title">
<h2>Surf Report</h2>
<p>Languages Used</p>
</div>
</div>
</a>
</div>
</section>
<!-- contact -->
<section class="page-section contact" id="contact">
<div id="contact-1">
<h2>Contact Me</h2>
</div>
<div id="contact-2">
<ul>
<li>Email: Lorenzo.afw#gmail.com</li>
<li>Github: Room4Renzo </li>
</ul>
</div>
</section>
</main>
</body>
</html>
i tried manually resizing, using object-fit as i saw in another answer, i tried different amount of columns for the grid, same for the rows. i can;t find where my mistake is. appreciate any help. Thanks
Why is my image style's applied to all images when I've specifically styled each?
I need "tumbnail.jpg" , "child.png" and "nanny.png" to be in square shape.
also "tumbnail.jpg" as a thumbnail. (It's already a thumbnail I guess)
other two I need them as just squared images side by side. Please help me with this. I tried to solve this since 4 days but I couldn't.
how should I style those 3 to be squared?
body { background-image: url( "bg.jpg" ); }
h2, p { text-align: center; }
.lulu{font-family:Copperplate, Papyrus, fantasy;
text-align: center;
font-weight: bolder;
}
.parent{ background-color:lightgrey;
width: 80%;
margin-left: auto;
margin-right: auto;
height:200px;}
.column {
float: left;
width: 30%;
padding: 5px;
}
.child-1{
background-color:lightgray;
width:73%;
float:center;
height:900px;
text-align:center;
padding-top:50px;
padding-bottom:50px;
padding-right:50px;
padding-left:50px;
margin-left:130px;
margin-right:150px;
margin-top:80px;
margin-bottom:80px;
}
.child-1 p {
color: white;
padding-left: 10px;
padding-right:10px;
padding-top: 50px;
text-align:center;
width:80%;}
.child-2{
background-color:aliceblue;
width:300px;
float:right;
height:400px;
margin:50px;
text-align:left;
padding-left:10px;}
.child-2 p{
color: black;
padding-left: 10px;
padding-right:10px;
padding-top: 50px;
text-align:left;
width:80%;}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=styles.css>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Daycare Center</title>
</head>
<body>
<div>
<div class="parent">
<header>
<h1 class="lulu"> DAYCARE</h1>
</header>
<style>
img {
border: 1px solid #ddd;
border-radius:2px;
padding: 5px;
max-width:auto;
max-height:auto;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<img src="tumbnail.jpg" alt="kids" style="width:100px" style="height:100px">
</div>
<div>
<div class="child-1">
<h3 style="color:white;">
Child care: Making the best choice
for your family</h3>
<p>.</p>
<div class="row">
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="house.jpg" alt="house" style="width:100px" style="height:100px">
</div>
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="heart.jpg" alt="heart" style="width:100px" style="height:100px">
</div>
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="feet.jpg" alt="feet" style="width:100px" style="height:100px">
</div>
<div class="row">
<div class="column">
<img src="child.png" alt="child" style="width:100%">
</div>
<div class="column">
<img src="nanny.png" alt="nanny" style="width:100%">
</div>
</div>
<div>
<div style="position:relative; right:8px; top:90px;">
<div class="child-2">
<h3>About us:</h3>
<p>.</p>
<h3>Our Service</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<main>
<section>
</section>
</main>
</div>
</body>
</html>
It is not ideal to use several differant styling options on one page.
It is recommened that all styling is maintained seperately from your pages code.
e.g by using a css.
Using the img tag in your css will affect ALL img tags in your code.
If you want to add additional specific changes to certain images then you should add a class e.g
<img class="fill"/>
.fill {
width:100%;
height:100%;
}
SPECIFICITY
If an item in your css is after a conflicting class the subsequent one will take priority as long as the element doesn't have a more dominat identifier.
You can read more about that here: https://www.w3schools.com/css/css_specificity.asp
For this example, having .fill after img will cause this image to be width and height 100% rather than 100px
EXAMPLE
img {
background:#cdf;
width:100px;
height:100px;
}
.fill {
width:100%;
height:100%;
}
<img src="https://i.stack.imgur.com/BxBTo.png">
<img class="fill" src="https://i.stack.imgur.com/BxBTo.png">
I recommend you clear the styling from your html and add it to your css.
body {
background-image: url("bg.jpg");
}
h2,
p {
text-align: center;
}
img {
border: 1px solid #ddd;
border-radius: 2px;
padding: 5px;
height: 100px;
width: 100px;
max-width: auto;
max-height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.lulu {
font-family: Copperplate, Papyrus, fantasy;
text-align: center;
font-weight: bolder;
}
.parent {
background-color: lightgrey;
width: 80%;
margin-left: auto;
margin-right: auto;
height: 200px;
}
.column {
float: left;
width: 30%;
padding: 5px;
}
.child-1 {
background-color: lightgray;
width: 73%;
float: center;
height: 900px;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
padding-right: 50px;
padding-left: 50px;
margin-left: 130px;
margin-right: 150px;
margin-top: 80px;
margin-bottom: 80px;
}
.child-1 p {
color: white;
padding-left: 10px;
padding-right: 10px;
padding-top: 50px;
text-align: center;
width: 80%;
}
.child-2 {
background-color: aliceblue;
width: 300px;
float: right;
height: 400px;
margin: 50px;
text-align: left;
padding-left: 10px;
}
.child-2 p {
color: black;
padding-left: 10px;
padding-right: 10px;
padding-top: 50px;
text-align: left;
width: 80%;
}
<div>
<div class="parent">
<header>
<h1 class="lulu"> DAYCARE</h1>
</header>
<img src="tumbnail.jpg" alt="kids">
</div>
<div>
<div class="child-1">
<h3 style="color:white;">Child care: Making the best choice for your family</h3>
<p>.</p>
<div class="row">
<div class="column">
<img src="house.jpg" alt="house">
</div>
<div class="column">
<img src="heart.jpg" alt="heart">
</div>
<div class="column">
<img src="feet.jpg" alt="feet">
</div>
<div class="row">
<div class="column">
<img src="child.png" alt="child" style="width:100%">
</div>
<div class="column">
<img src="nanny.png" alt="nanny" style="width:100%">
</div>
</div>
<div>
<div>
<div class="child-2">
<h3>About us:</h3>
<p>.</p>
<h3>Our Service</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<main>
<section>
</section>
</main>
</div>
</div>
</div>
</div>
Why is my css not supported on mobile browsers?
Hello to all and to all,
I'm a Junior developer and its going to be almost two weeks long as I struggle on a topic. My code works very well for the desktop version and on all browsers (Chrome, EI, Firefox, Edge).
On the other hand when I want to view my page on mobile everything works well on safari but for se that is Firefox and chrome is the disaster.
I have the impression that there are classes of my CSS that are not supported. On the other hand when I put the style in inline mode in my page html everything works well, weird all its !!!
Hoping that a savior can help me find a solution. I put you below my html code and css.
Good day everyone.
body{
background-image: url('img/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
font-family:Arial,Helvetica,sans-serif;
height: 1500px;
margin: 0px;
}
.verso{
width: 370px;
height:950px ;
margin-bottom: 0px;
}
.carteModeRecto{
text-align: -moz-center;
-webkit-box-align: center;
width: 370px;
text-align: left;
margin:auto;
text-align: -webkit-center;
}
.recto,.verso{
text-align: -webkit-center;
text-align: -moz-center;
text-align: -ms-center;
margin-bottom: 50px;
overflow: hidden;
margin-top: 50px;
background-color: white;
box-shadow: 1px 1px 5px 1px black;
}
#photoprofil{
background-image: url("img/photo_roger.jpg");
width: 238px;
height: 240px;
border-radius: 150px;
margin-top: 11px;
text-align: left;
margin: auto;
margin-top: 11px;
text-align: left;
margin: auto;
}
#photoprofil2{
border: 3px solid #e5e5e5;
width: 260px;
height: 250px;
border-radius: 150px 150px;
text-align: left;
margin: auto;
padding-top: 10px;
text-align: left;
margin: auto;
padding-top: 10px;
height: 250px;
}
.ligneinfo{
display: flex;
margin-top: 7px;
}
.buton,.buton2{
display: flex;
cursor: pointer;
background-color: #ca3439;
text-align: center;
border-radius: 10px;
color: white;
text-align: left;
margin:0 auto;
outline: none;
border: none;
border: 2px solid #cb353b;
}
.buton{
margin-bottom: 30px;
width: 280px;
height: 50px;
}
.buton2{
background-color: white;
color: #2e4158;
text-align: left;
margin:0 auto;
margin-bottom: 30px;
width: 280px;
height: 52px
}
.down{
margin-top: 8px;
}
.partag{
margin-top: 4px;
width: 42px;
height: 43px;
}
.qrcode{
border: 2px solid #cb353b;
border-radius: 10px;
margin-top: 50px;
}
.buttontext2,.buttontext{
color: #2e4158;
margin-top: 15px;
font-size: 1em;
}
.buttontext{
color: white;
}
.imgbutton,.imgbutton2{
margin-left: 20px;
height: 42px;
width: 58px;
margin-right: 20px;
margin-top: 8px;
}
.imgbutton2{
height: 42px;
width: 43px;
margin-top: 5px;
}
.info{
margin-left: 35px;
}
.nom,.statu{
font-size: 1.6em;
color: #2e4158;
margin-top: 40px;
text-align: center
}
.statu{
margin-bottom: 30px;
margin-top: 0px;
}
.texte{
margin-top: 5px;
margin-left: 10px;
color: #2e4158;
font-size: 1.2em;
}
.carte{
text-align: -moz-center;
-webkit-box-align: center;
width: 370px;
text-align: left;
margin:auto;
text-align: -webkit-center;
}
.carte_visite_recto_verso {
-webkit-perspective: 740px;
perspective: 740px;
margin-top: 50px;
}
.carte_visite_recto_verso .carte {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.carte_visite_recto_verso .carte .couche {
margin:0px !important;
-webkit-transition: 1s;
transition: 1s;
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
}
.carte_visite_recto_verso .carte .recto {
position: absolute;
z-index: 1;
}
.carte_visite_recto_verso .carteModeRecto .recto {
-webkit-transform: rotatey(-0deg);
transform: rotatey(-0deg);
}
.carte_visite_recto_verso .carteModeRecto .verso {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.carte_visite_recto_verso .carteModeVerso .recto {
-webkit-transform: rotatey(+180deg);
transform: rotatey(+180deg);
}
.carte_visite_recto_verso .carteModeVerso .verso {
-webkit-transform: rotatey(0deg);
transform: rotatey(0deg);
}
a{
text-decoration: none;
color: #2e4158;
}
.iconinfo{
height: 29px;
width: 25px;
}
.logo{
width: 370px;
padding-top: 30px;
margin-bottom: 20px;
text-align: -webkit-center;
}
.reseaux{
text-align: left;
margin:0 auto;
margin-left:35px;
margin-top: 60px;
padding-bottom: 70px;
}
.qrcode{
text-align: left;
margin:0 auto;
width: 280px;
height: 330px;
}
.imgqr{
text-align: left;
margin:0 auto;
margin-left: 45px;
padding-top: 60px;
}
.imglogo{
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image" content="img/photo_roger.jpg">
<meta name="image" content="img/photo_roger.jpg">
<meta name="description" content="Location d'imprimantes et photocopieurs,
Location et vente de matériel informatique,Téléphonie Voip et débit internet,Solutions de commutation" />
<link rel="stylesheet" media="screen" type="text/css" href="style.css">
<title>Roger Duarte : Directeur Commercial - Axium Solutions </title>
<link rel="shortcut icon" href="img/logo2.jpg" type="image/jpg"/>
<link rel="icon" href="img/logo2.jpg" type="image/jpg"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="carte_visite_recto_verso" >
<div class="carte carteModeRecto" >
<div class="couche recto" > <!--DEBUT DU MODE RECTO-->
<div class="logo">
<img src="img/logo.jpg" alt="" class="imglogo" >
</div>
<div> <!--PHOTO DU CLIENT-->
<div id="photoprofil2">
<div id="photoprofil"></div>
</div>
</div>
<div class="nom" >
Roger Duarte
</div>
<div class="statu" >
Directeur Commercial
</div>
<a href="download/vcard_roger.vcf" download>
<div class="buton2">
<img src="img/ico_download.jpg" alt="" class="imgbutton">
<div class="buttontext2" > Télécharger le contact</div>
</div></a>
<div class="buton"
onclick="$(document).find('.carte').toggleClass('carteModeVerso');
$(document).find('.carte').toggleClass('carteModeRecto');">
<img src="img/ico_partage.jpg" alt="" class="imgbutton2" >
<div class="buttontext" >Partager</div>
</div>
<div class="info">
<div class="ligneinfo" >
<img src="img/ico_mobile.jpg" alt="" class="iconinfo">
<div class="texte">01 84 00 86 21</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_phone.jpg" alt="" class="iconinfo">
<div class="texte">06 62 68 25 03</div> <!--ZONE INFORMATION-->
</div>
<div class="ligneinfo" >
<img src="img/ico_sms.jpg" alt="" class="iconinfo">
<div class="texte">SMS</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_mail.jpg" alt="" class="iconinfo">
<div class="texte" >Roger.duarte#axiumsolutions.fr</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_web.jpg" alt="" class="iconinfo">
<div class="texte">www.axiumsolutions.fr</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_adresse.jpg" alt="" class="iconinfo" >
<a href="https://goo.gl/maps/HdY48H9MVqRsX3KR9"><div class="texte" style="text-align: left;" >Immeuble Point Cardinal <br>
31 Avenue Pierre Brossolette <br>
91380 CHILLY MAZARIN</a>
</div>
</div>
</div>
<div class="reseaux" >
<div class="ligneinfo" >
<img src="img/ico_linkedin.jpg" alt="" class="iconinfo">
<div class="texte">Linkedin</div>
</div>
<div class="ligneinfo" > <!--ZONE RESEAUX SOCIAUX-->
<img src="img/ico_fb.jpg" alt="" class="iconinfo">
<div class="texte">Facebook</div>
</div>
</div> <!--FIN MODE RECTO-->
</div>
<div class="couche verso" > <!--DEBUT MODE VERSO-->
<div class="logo" >
<img src="img/logo.jpg" alt="" class="imglogo" >
</div>
<a href="vcard_roger.vcf" download>
<div class="buton2" >
<img src="img/ico_download.jpg" alt="" class="imgbutton" >
<div class="buttontext2" >Télécharger le contact</div>
</div></a>
<div class="buton2">
<img src="img/ico_mail2.jpg" alt="" class="imgbutton">
<div class="buttontext2" >Partager Par Mail</div> <!--ZONE DE PARTAGE-->
</div>
<div class="buton2" >
<img src="img/ico_whatsapp.jpg" alt="" class="imgbutton" >
<div class="buttontext2">Partager par Whatsapp</div>
</div>
<div class="buton2" >
<img src="img/ico_copier.jpg" alt="" class="imgbutton">
<div class="buttontext2" >Copier le lien</div>
</div>
<div class="buton"
onclick="$(document).find('.carte').toggleClass('carteModeVerso');
$(document).find('.carte').toggleClass('carteModeRecto');">
<img src="img/ico_retour.jpg" alt="" class="imgbutton2">
<div class="buttontext" >Retour</div>
</div>
<div class="qrcode" >
<img src="img/qr_code.jpg" alt="" class="imgqr" >
</div> <!--FIN DU MODE VERSO-->
</div>
</div>
</body>
</html>
try to use max-width instead of width. Max-width help to change size based on device size.
Example:
.verso{
width:100%;
max-width: 370px;
margin-bottom: 0px;
}
thank you for your help, unfortunately its not changing anything. I can post an image of itself that its gives on my mobile with firefox and chrome. Mobile version on firefox and chrome Mobile version on safari
i spend sometimes for searching about this and i found something , i hope it helpful : checkout the link : https://dev.to/neshaz/how-to-make-all-browsers-understand-your-css-2a4e
Mobile and Tablet responsiveness with HTML5
I am trying to get my webpage to be responsive. It is a 3 column layout, and every time I check it in a mobile and tablet emulator it just looks horrible. I am new to html5 so I am not sure what I am doing and I have been trying to figure this out for a while now and have come to a brick wall. Any suggestions would be amazing!
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
color: #000000;
background-color: #969696;
margin: 0;
}
/* STRUCTURE */
.wrapper {
max-width: 1240px;
width: 100%;
margin: 0px auto;
}
header {
background-color: #000000;
text-align: right;
color: #FFFFFF;
height: 120px;
padding: 10px;
border-bottom: 2px solid;
}
.columns {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5px 0;
}
.column {
flex: 1;
margin: 0px;
padding: 20px;
background-color: #FFFFFF;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
footer {
padding: 0 15px;
}
#navigation {
height: 60px;
font-size: 20px;
font-family: Verdana;
font-weight: bold;
text-align: center;
background-color: #000000;
}
#navigation ul {
height: auto;
padding: 9px 0px;
margin: 0px;
}
#navigation li {
display: inline;
padding: 16px;
}
#navigation a {
text-decoration: none;
color: #FFFFFF;
}
#rose {
overflow: hidden;
}
#newDiv {
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
margin-left: 80px;
margin-right: 80px;
}
#media screen and (max-width: 980px) {
.columns .column {
margin-bottom: 5px;
flex-basis: 40%;
&:nth-last-child(2) {
margin-right: 0;
}
&:last-child {
flex-basis: 100%;
margin: 0;
}
}
}
#media screen and (max-width: 680px) {
.columns .column {
flex-basis: 100%;
margin: 0 0 5px 0;
}
}
<!DOCTYPE html >
<html lang="en">
<head>
<title>St. Pete Flower Market</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new3.css">
<!-- [if it IE 9]>
<script src="html5shiv.js>
</script>
<![endif]-->
</head>
<div class="wrapper">
<header> <img src="logo.jpg" alt="flower logo" style="float:left;" height="105" ;>
<h1>St. Pete Flower Market</h1>
</header>
<nav>
<div id="navigation">
<ul>
<li><a class="navigation" href="index.html">Home</a></li>
<li><a class="navigation" href="contact.html">Contact Us</a></li>
<li><a class="navigation" href="occasions.html">Occasions</a></li>
<li><a class="navigation" href="flowers.html">Flowers</a></li>
<li><a class="navigation" href="giftbaskets.html">Gift Baskets</a></li>
<li><a class="navigation" href="deals.html">Deals</a></li>
<li><a class="navigation" href="aboutus.html">About Us</a></li>
</ul>
</div>
</nav>
<section class="columns">
<div class="column">
<h2>1st Content Area</h2>
</div>
<div class="column">
<div id="rose">
<img src="roses.jpg" alt="roses" height="300">
</div>
<div id="newDiv">
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" alt="sunflowers" height="300" width="300">
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" alt="flowerdeals" height="300" width="300">
<p>This is image 2</p>
</div>
</div>
<div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" alt="sunflowers" height="300" width="300">
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" alt="flowerdeals" height="300" width="300">
<p>This is image 2</p>
</div>
</div>
</div>
</div>
<div class="column">
<h2>3rd Content Area</h2>
</div>
</section>
<footer>
<h3>Footer</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</footer>
</div>
</html>
Why can't I get the buttons to move?
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.