Thank you for taking the time to look at this post.
I am currently working on gaining experience with html, CSS, and JavaScript in hopes of entering the Front End Developer field. Today, I encountered a few issues while working on this adaptive design. Here are the problems I am facing:
The main issue is that I cannot get the right DIV to stay on the same line as the left DIV when resizing the screen. In the future, I will be adding media rules to enhance responsiveness for phone and tablet users.
body {
margin: 0px;
color: #fff;
font: 600 14px/24px"Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.container {
width: 100%;
}
.contentcontainer {
width: 100%;
}
#header,
#nav {
border-radius: 23px;
}
#header h1 {
text-align: center;
color: white;
padding-top: 35px;
}
#header {
background: #2db34a;
height: 100px;
margin: 15px 10px 0px 10px;
}
#nav {
background: #008e7b;
height: 50px;
margin: 10px 10px 0px 10px;
}
...
</body>Additionally, there are some repetitive and unnecessary items in my code. Any tips on how to optimize it for better performance and faster loading times would be greatly appreciated!
Thank you! :) -Neiko Anglin