Media queries - Product Landing Page

1

Hey guys,

I want to make my product landing page responsive for all
screens ( mobile first ).
I’ve been reading about media queries to be able to wrap my head around it
and I understand it ( kind of :slight_smile: ). But the thing is, I don’t really know how ro implement it
to my specific codes.
I have tried a few but It doesn’t work.

Here is my project: https://codepen.io/nenna_e/pen/YzzoYJr?editors=1100

I would highly appreciate if someone could take a look at my code and give me ideas for
adding the right media queries.

P.S I might have used the wrong size units on some sections.

2

With mobile first, have your base styles work on phones.

Then jump to tablets, then desktops ect ect. I tend to just use bootstrap or zurbs default viewpoint sizes.

3

I am very new to this so I haven’t come as far as to using
those frameworks yet.

So are you saying that I should be able to make my styles work on phones
by adding the media queries to - for example the flexboxes and background img?

If I’ve used the wrong size units - does that affect how the media queries actually work
on the page or not?

4

Sorry I explained that terribly XD .

So when you do your design for your website, start of creating your styles so they look correct on phones.

Then from there you expand outwards using the queries.

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { … }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { … }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { … }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { … }

/* ##### contents ##### 
imports
general


*/

/* ##### imports ##### */
@import url('https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap');

/* ##### general styles ##### */

main::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background-image:linear-gradient(
      115deg,
      rgba(229,175,78, 0.5),
      rgba(255,222,163, 0.4)
    ),
url(https://static01.nyt.com/images/2016/01/20/dining/20APPEJP4/20APPEJP4-articleLarge-v2.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(40%);
  
}

li {
  list-style: none;
}

a {
  color: #000;
  text-decoration: none;
}

body {
font-family: 'Bebas Neue', cursive;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ##### Header ##### */

#header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding-left: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(186,129,25, 0.8)
   }

header {
    flex-wrap: nowrap;
    width: 100%;
  }
 
#header-img {
  width: 3rem;
  padding-right: 0.7rem;
  postition: relative;
  display: flex;
}
#header-logo {
  width: 3rem;
  padding-left: 0.7rem; 
  position: relative;
  display: flex;
  
}
#baklo-title {
  font-size: 4.5rem;
  position: relative;
  
}

/* ##### Nav ##### */

nav {
    font-size: 1.45rem;
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    
  }

 nav > ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  
}
.nav-link:hover {
  font-size: 115%;
}

nav li {
  padding-left: 70px;
  padding-right: 20px;
  
}



 #info-order {
  text-align: center;
  font-size: 2rem;
  padding-top: 8rem;
  padding-bottom: 1rem;
}
#form {
  text-align: center;
  width: 100%; 
  display: flex;
  justify-content: center;
  padding-bottom: 80px;
  
}
#email {
  width: 250px;
  padding: 8px;
  postition: absolute;
  
}
#submit {
  border: none; 
  height: 36px;
  width: 125px;
  font-size: 1.5em;
  background: rgba(255,192,76, 0.7);
  font-family: 'Bebas Neue', cursive;

 }

  
.grid {  /* this class name could do with a new name grid sounds to generic */
  display: flex;
  }
  
  #who-we-are .icon {
    display: flex;
    justify-content: center;
    height: 100px;
    padding-top: 45px;
    padding-left: 100px;
    font-size: 35px;
    width: 20vw;
    
  }
  
  #who-we-are .info {
    line-height: 30px;
    font-size: 1.30rem;    
    padding: 25px;
    width: 65vw;
  }
 
  #how-we-do-it {  
  margin-top: 60px;
  display: flex;
  justify-content: center;
  }
  
  #how-we-do-it > iframe {
  max-width: 600px;
  width: 100%;
}
 
  #pricing {
  margin-top: 80px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
  .product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: calc(100%  / 3);
  padding: 20px; 
  padding-bottom: 40px;  
  border: 3px solid #000;
  margin: 0 15px;
  background-color:
      rgba(247, 216, 166, 0.5);
     
  
}
 .product > .level {
  padding: 20px 0;
  width: 100%;
  font-size: 2rem; 
   
}
  .level:after
{
    content:' ';
    display:block;
    border:0.3px solid black;
}
  .product > h2 {
  font-size: 2.4rem;
}
  .product > p {
    font-size: 1.3rem;
    margin-top: 15px;
    text-align: center;
    width: 22vw;
  }
  .product > button { 
  margin: 20px;
  padding: 15px 35px;
  border: none;  
  font-size: 1.25em;
  font-family: 'Bebas Neue',cursive;   background-color: rgba(255,192,76, 0.7);
  
     }

@media (hover: hover) {
  #submit:hover {
    background: #F7C430;
    cursor: pointer;
    
    /* added other over query here*/
    
.product > button:hover {
  background-color: #F7C430;
  cursor: pointer;
}
  }
} /*fixed missing bracket*/



/*##### Footer #### */
  
  footer {
  margin-top: 30px;
  padding: 20px;
}
  footer > ul {
    display: flex;
    justify-content: center;
    font-size: 1.25rem;
   }
  footer > ul > li {
  padding: 0 10px;
}
  footer > span {
  margin-top: 5px; 
  display: flex;
  justify-content: center;
  font-size: 1rem;
}


/* Small devices (landscape phones, 576px and up) Hoever with true mobile first this should be your default styling*/
@media (min-width: 576px) { ... }

 /*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { ... }

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
#header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding-left: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: green;
   }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { ... }

I’ve added some stuff to your pen and rearranged things very slightly to make it easier to read.