My experiment with responsive web development
I’m working with some nice guys. It’s a small team (startup company indeed). I’m responsible for frontend development. I’m the most junior member (based on experience) of my team. Generally I do work with HTML & CSS (psd to html). I know how to start writting code. But I had no knowledge about photoshop. Honestly said I hate this stuff at my university life. I made some trolls img to make fun for my friends. Take a look on my photoshop knowledge. Actually, I watched some videos from youtube to make those at that time. :D
So I have no knowledge how to slice images…how to know font family & size from psd etc. But somehow I gathered those experiences with the help of our lead dev & designer. I’m working on my second project (maybe). I’ve coded everything (even finished stuffs of media query). I mean coded for responsive too. I’ve followed my lead dev. He said don’t do everything first. Make a tiny portion & make it responsive. I followed his instruction. I added those stuffs with my scss file.
// Below 34em (544px)
@include media(“<sm”) {
}
// Between 34em (544px) and 48em (768px)
@include media(“>sm”, “<md”) {
}
// Between 48em (768px) and 62em (992px)
@include media(“>md”, “<lg”) {
}
But suddenly I saw that it’s responsive for every device except iPad (landscape is ok but potrait view was looking horrible). But when I coded for potrait view, it was changing for other view. I was searching google, but failed. Suddenly I found a link of stackoverflow (http://stackoverflow.com/questions/13076371/media-query-for-ipad-and-desktop-max-width). I wrote this-
/* iPad Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* CSS */
}
Then I realized sometimes we should use device-width with max/min width. Problem solved. It’s really awesome.
Then I tried to know further about responsive development. I realized we should not do everything with media query. It’s sometimes bad practice I think. We should follow proper HTML stucture & tricks of css.
Sometimes we should avoid media query & replace those efforts with latest css statements. Take a look on the video https://vimeo.com/181175981
Then I found another disturbing things with images. I’ve used ‘img-responsive’ class. But it made images smaller than the real image (which I took from the psd). It made me worried. What’s wrong with this? ugh…. Then suddenly I discovered (!) an idea. I’ve remove ‘img-responsive’ class from my html. I saw it’s looking like psd. But it’s not responsive img for smaller screen. It’s only looking nice for desktop. So, I inserted those codes written in bootstrap’s img-responsive class only in media query.
max-width:100%;
height:auto;
display:block;
Wow!!! It’s working nice. Those techniques save hundreds line of codes. Take a look on a portion of our project (commented code was before applying those techniques)-
#merchant-catalogue {
background-image: url(../img/customer/cataloguebg.png);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
//padding-top: 5rem;
.fp-tableCell {
display: block;
}
.header-text {
padding-top: 7rem;
// Below 48em (768px)
@include media("<md") {
padding-top: 4rem;
}
h1 {
@include header-text-h1;
line-height: 1.05;
color: #fff;
padding-bottom: 2rem;
padding-top: 5rem;
// Below 34em (544px)
@include media("<sm") {
padding-top: 0;
}
}
p {
@include header-para;
font-size: 26px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.385;
padding-right: 10%;
padding-left: 10%;
padding-bottom: 17vh;
// Below 34em (544px)
@include media("<md") {
padding-right: 0;
padding-left: 0;
}
// Below 34em (544px)
@include media("<sm") {
padding-bottom: 4rem;
}
// Between 62em (992px) and 75em (1200px)
@include media(">lg", "<xl") {
padding-bottom: 5rem;
}
}
}
img {
// Below 48em (768px)
@include media("<md") {
display: block;
max-width: 100%;
height: auto;
}
}
/* .vid {
//max-width: 35rem;
border: 2px solid #eee;
border-radius: 20px;
padding: 130px 70px;
background-color: #fff;
&:after {
content: '';
display: block;
width: 7px;
height: 7px;
float: left;
margin: 0 auto;
background: #bbbdbf;
border-radius: 50%;
top: 45%;
position: absolute;
left: 7%;
}
&:before {
content: '';
display: block;
width: 30px;
height: 30px;
float: right;
margin: 0 auto;
border: 1px solid #bbbdbf;
border-radius: 50%;
top: 45%;
position: absolute;
right: 5.5%;
}
.inner {
color: #fff;
margin: 50px;
padding: 15px;
position: relative;
}
.inner:before {
position: absolute;
top: -155px;
right: -55px;
bottom: -155px;
left: -61px;
content: "";
border: 2px solid #eee;
}
} */
}
/*============= Media Query ==============*/
@media screen and (min-width:315px) and (max-width:480px) {
#merchant-catalogue {
//padding-top: 1rem;
/* .header-text {
padding-top: 1rem;
h1 {
padding-bottom: 1rem;
}
p {
line-height: 1;
padding-right: 0;
padding-left: 0;
padding-bottom: 1.5rem;
}
} */
/* .vid {
padding: 5rem 3rem;
.inner:before {
position: absolute;
top: -6rem;
right: -33px!important;
bottom: -6rem;
left: -47px;
content: "";
border: 2px solid #eee;
}
} */
}
}
@media screen and (min-width:481px) and (max-width:1024px) {
#merchant-catalogue {
//padding-top: 3rem;
/* .header-text {
padding-top: 3rem;
h1 {
padding-bottom: 1.5rem;
}
p {
line-height: 1;
padding-right: 0;
padding-left: 0;
padding-bottom: 5rem;
}
} */
/* .vid {
//padding: 5rem 3rem;
&:after {
content: '';
display: block;
width: 7px;
height: 7px;
float: left;
margin: 0 auto;
background: #bbbdbf;
border-radius: 50%;
top: 45%;
position: absolute;
left: 6%;
}
&:before {
content: '';
display: block;
width: 30px;
height: 30px;
float: right;
margin: 0 auto;
border: 1px solid #bbbdbf;
border-radius: 50%;
top: 45%;
position: absolute;
right: 4.3% !important;
}
.inner:before {
position: absolute;
top: -6rem;
right: -2.5rem !important;
bottom: -6.5rem;
left: -61px;
content: "";
border: 2px solid #eee;
}
} */
/* .ipad-wrapper {
position: relative;
height: 300px;
width: 300px;
img {
position: absolute;
left: 0;
bottom: 0;
}
} */
}
}
/* @media screen and (min-width:768px) and (max-height:1280px) {
.vid {
padding: 7rem 17rem !important;
&:after {
content: '';
display: block;
width: 7px;
height: 7px;
float: left;
margin: 0 auto;
background: #bbbdbf;
border-radius: 50%;
top: 45%;
position: absolute;
left: 6%;
}
&:before {
content: '';
display: block;
width: 30px;
height: 30px;
float: right;
margin: 0 auto;
border: 1px solid #bbbdbf;
border-radius: 50%;
top: 45%;
position: absolute;
right: -7rem !important;
}
.inner:before {
position: absolute;
top: -9rem !important;
right: -7rem !important;
bottom: -6.5rem;
left: -17rem !important;
content: "";
border: 2px solid #eee;
}
}
} */
/* @media screen and (min-width:768px) and (max-width:1024px) {
#merchant-catalogue {
padding-top: 3rem;
.header-text {
padding-top: 3rem;
h1 {
padding-bottom: 1.5rem;
}
p {
line-height: 1;
padding-right: 0;
padding-left: 0;
padding-bottom: 5rem;
}
}
.vid {
padding: 7rem 15rem;
&:after {
content: '';
display: block;
width: 7px;
height: 7px;
float: left;
margin: 0 auto;
background: #bbbdbf;
border-radius: 50%;
top: 45%;
position: absolute;
left: 10%;
}
&:before {
content: '';
display: block;
width: 30px;
height: 30px;
float: right;
margin: 0 auto;
border: 1px solid #bbbdbf;
border-radius: 50%;
top: 45%;
position: absolute;
right: -29%;
}
.inner:before {
position: absolute;
top: -8rem;
right: -97px;
bottom: -7.5rem;
left: -240px;
content: "";
border: 2px solid #eee;
}
}
}
} */
/* @media screen and (max-width: 1024px) , screen and (max-height: 768px) {
#merchant-catalogue {
padding-top: 3rem;
.header-text {
padding-top: 3rem;
h1 {
padding-bottom: 1.5rem;
}
p {
line-height: 1;
padding-right: 0;
padding-left: 0;
padding-bottom: 5rem;
}
}
.vid {
padding: 7rem 15rem;
&:after {
content: '';
display: block;
width: 7px;
height: 7px;
float: left;
margin: 0 auto;
background: #bbbdbf;
border-radius: 50%;
top: 45%;
position: absolute;
left: 8%;
}
&:before {
content: '';
display: block;
width: 30px;
height: 30px;
float: right;
margin: 0 auto;
border: 1px solid #bbbdbf;
border-radius: 50%;
top: 45%;
position: absolute;
right: 1rem;
}
.inner:before {
position: absolute;
top: -8rem;
right: -97px;
bottom: -7.5rem;
left: -240px;
content: "";
border: 2px solid #eee;
}
}
}
} */
@media screen and (max-width: 1280px) , screen and (max-height: 800px) {
}