First website help pt. 2

#1

Hi all,

Posting my site back on here to try to get some more help with it. I have fixed all the layout issues I was having before. Now I am down to adding media queries to make this site responsive for different screen sizes. To be honest I am lost with this part, I have read alot online and don’t understand where to begin. Am I to add media queries and asign them to the whole body of the page, do I need to do item by item, section by section?

I also am trying to get the form to email me without another screen popping up to go into an email application. I have read that I need to use PHP, I tried to copy and paste some script into mine to get it to work but with no luck so I took it out. This is my first time trying this as well.

Edit: for some reason the “Our customers are seeing big results” is shifting to the left when resizing the screen smaller.

https://cdpn.io/JBuddie/debug/PoPvVLz/xnrabZRpEdbA

Any and all help is appreciated!
Thank you

#2

Hi @jamesbuddie1,

Media queries are added at the end of the CSS file.
You have to write for each Class inside each media query.

example:-

.class1 {
width: 100px;
}

.class2 {
... some properties...
}

@media (min-width: 500px) {    // you are telling that when the minimum screen is atleast 501px then apply these stylings else the one at the top..

.class1 {
width: 200px;
.....
}

.class2 {
some other properties....
}

}

you can also write media queries for different display sizes

example :

@media (min-width: 750px) and (max-width: 1039px) {
  .class1{
    .......
  }
}

@media (min-width: 1040px) and (max-width: 1400px) {
  .class1{
........
  }
  .class2{
.......
  }
}

You can find a lot of resources at this link --> https://www.w3schools.com/css/css_rwd_mediaqueries.asp

hope this helps,
Abhishek