I’ve spent weeks researching, using trial and error and even created a site that was completely fitted to the mobile view and it worked when testing. The problem was, once I put that code into media queries in my original project, it didn’t work, everything looked terrible. My question is, what do I need to change in my original code to make it more responsive? Am I missing anything? Do I simply need to adjust the media queries? Also, what is the best template or way to start projects so that it’s easier to make things responsive?
Your code so far
Here’s a link to my code below:
The media query code is below (for the iphone5):
@media only screen and (max-width: 640px) {
* {
text-align: center;
text-decoration: none;
background-color: #e1ecf2;
font-family: "Lato", sans-serif;
list-style: none;
}
}
@media only screen and (max-width: 640px) {
.header,
#header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
}
@media only screen and (max-width: 640px) {
#logo {
font-size: 14px;
}
}
@media only screen and (max-width: 640px) {
ul {
font-size: 12px;
}
}
@media only screen and (max-width: 640px) {
#first {
font-size: 12px;
}
}
@media only screen and (max-width: 640px) {
#form {
display: flex;
flex-direction: column;
padding-bottom: 40px;
justify-content: center;
align-content: center;
align-items: center;
}
}
@media only screen and (max-width: 640px) {
#email {
padding: 5px;
border: 1px solid;
background-color: white;
}
}
@media only screen and (max-width: 640px) {
#submit {
margin-top: 10px;
padding: 10px;
background-color: #42b0f5;
}
}
@media only screen and (max-width: 640px) {
.feat-container {
font-size: 12px;
}
}
@media only screen and (max-width: 640px) {
.video {
display: none;
}
}
@media only screen and (max-width: 640px) {
#prod-pricing {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
font-size: 12px;
padding: 10px;
}
}
@media only screen and (max-width: 640px) {
.product {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
border: 1px solid black;
padding: 10px;
margin: 5px;
}
}
@media only screen and (max-width: 640px) {
.text {
margin-right: 25px;
}
}
@media only screen and (max-width: 640px) {
.button, strong {
background-color: #42b0f5;
padding: 10px;
}
}
@media only screen and (max-width: 640px) {
footer > ul > li > a {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
padding-right: 40px;
}
}
@media only screen and (max-width: 640px) {
footer > span {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
font-size: 12px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36.
Challenge: Build a Product Landing Page
Link to the challenge:
I appreciate the assistance, I am very discouraged at this point.
