Fotomatic help!

codecoder94606 · March 1, 2023, 4:47pm

Hi,

I’m doing the Fotomatic project and the main issue I’m coming across is the header. It’s too big, despite having correct padding. I saw in devtools that my code is formatted at 1010x 4956 and the finished product is supposed to be 904x2069.

How to I fix this? I already put in the boilerplate and looked everywhere in the devtools for a way to make the actual page dimensions fit, but I’m clearly missing something

Thanks

mirja_t · March 1, 2023, 5:17pm

We need to see your code. Post it here and make sure it’s properly formatted, please.

codecoder94606 · March 1, 2023, 9:56pm

For sure. I didn’t get much done because I’m so confused about some things. Like, the nav bar is offset, and the sign-up div is offset as well and it’s also smaller compared to the completed version.

I started over, so here is what I have so far.

/* Universal Styles */

html {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  height: 100%;
}
body {
  box-sizing: border-box;
}
.main-content {
  position: relative;
  top: 5.3125rem; /* To offset for fixed header. */
}

.center {
  text-align: center;
}

.button {
  border-radius: 4px;
  background-color: #4a4a4a;
  color: white;
}

.image-container {
  overflow: hidden;
}

.image-container img {
  display: block;
  max-width: 100%;
}

@media only screen and (max-width: 760px) {
  .main-content {
    top: 2.5625rem;
  }
}

/* Header */

header {
  position: fixed;
  width: 100%;
  border-bottom: solid 1px #c6c1c1;
  background-color: white;
  z-index: 1;
  vertical-align: auto;
 
}

header .content {
  display: flex;
  align-items: center;
  padding: 1.875rem;
  margin: 0 auto;
}

header .logo {
  flex: 1;
  text-decoration: none;
  font-size: 1.5rem;
  font-family: "Roboto-Mono-Regular", sans-serif;
}

header nav ul {
  display: flex;
  list-style: none;
}

nav li {
  padding-left: 3.5rem;

}

nav a {
  vertical-align: bottom;
  line-height: 1.6;
  font-size: 1rem;
  color: #4a4a4a;
  text-decoration: none;
}

header .icon {
  width: 1rem;
  padding-left: .75rem;
}

header .mobile {
  display: none;
}

@media only screen and (max-width: 760px) {
  header .desktop {
    display: none;
  }

  header .mobile {
    display: block;
    width: 100%;
  }

  header .content {
    padding: .5rem 0;
  }

  header .mobile ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
  }

  header .mobile li {
    padding: 0;
  }

  header .mobile .button {
    padding: .1875rem .5rem;
    background-color: #9dc20b;
    line-height: 1.6;
    color: white;
  }
}

/* Sign Up Section */

#sign-up-section {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 43.5rem;
 background-image: url("C:/code Academy Projects/capstone_fotomatic_start/F1C1_start/resources/images/banner-landingpage.jpg");
 background-size: 100%;
 background-repeat: no-repeat;
}

#sign-up-cta {
  padding: 0 5rem 2.5rem 5rem;
  border: solid 1px #979797;
  border-radius: 4px;
  background-color: #9dc20b;
  right: 6.25rem;
  position: relative;
  left: 10%;
  top: 10.625rem;
}

#sign-up-cta .content {
  width: 25.625rem;
  margin-top: 2rem;
  font-family: "Roboto", sans-serif;
  font-size: 1.25rem;
  line-height: 1.4;
  color: white;
}

#sign-up-cta h1 {
  font-size: 3.125rem;
}

#sign-up-cta h2 {
  font-size: 2.25rem;
}

#sign-up-cta span strong {
  font-weight: bold;
}

#sign-up-cta .cursive {
  font-family: "Damion", cursive;
}

#sign-up-cta .striking {
  font-family: "Rubik", sans-serif;
  padding-bottom: .75rem;
}

#sign-up-cta .button {
  margin-top: 1.625rem;
  padding: 1.25rem 7.25rem;
}

@media only screen and (max-width: 760px) {
  #sign-up-section {
    align-items: center;
    justify-content: center;
    height: 28rem;
  }

  #sign-up-cta {
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    border: none;
  }

  #sign-up-cta .content {
    margin-top: 0;
  }

  #sign-up-cta .email {
    display: none;
  }

  #sign-up-cta h1 {
    font-size: 3.125rem;
  }

  #sign-up-cta h2 {
    font-size: 2.25rem;
  }
}

@media only screen and (max-width: 450px) {
  #sign-up-section {
    height: 20rem;
  }

  #sign-up-cta h1 {
    font-size: 2.25rem;
  }

  #sign-up-cta h2 {
    font-size: 2rem;
  }
}

/* Features Section */

#features-section {
  display: flex;
  justify-content: space-between;
  padding: 4rem 5%;
  background-color: #f3f3f3;
}

.feature {
  flex: 1;
  padding: 2rem;
  margin: 0px 1.25rem;
  background-color: white;
  float: left;
}

.feature .image-container {
  width: 90%;
  height: 65%;
  margin: 0 auto;
  float: left;
  
}

.feature h2 {
  padding-bottom: .5rem;
  font-size: 2.25rem;
  font-weight: bold;
  color: #4a4a4a;
}

.feature h3 {
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 300;
  color: #4a4a4a;
}

@media only screen and (max-width: 890px) {
  .feature h2 {
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: normal;
  }

  .feature h3 {
    font-size: .875rem;
    line-height: 1.4;
  }
}

@media only screen and (max-width: 760px) {
  #features-section {
    flex-flow: column;
    padding: 0;
  }

  .feature {
    margin: 0;
    padding: 1.25rem 1rem 0 1rem;
  }
}

/* Filters Section */

#filters-section {
  padding: 4rem 0;
  background-color: #4a4a4a;
}

#filters-section .content {
  padding: 0 .625rem;
  margin-bottom: 5rem;
}

#filters-section .content h2 {
  font-size: 2.25rem;
  font-weight: bold;
  color: white;
}

#filters-section .content h3 {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 300;
  color: white;
}

#filters-section .images-container {
  max-width: 100%;
  padding: 0 1%;
}

@media only screen and (max-width: 760px) {
  #filters-section {
    padding: 1.5rem 0 0 0;
  }

  #filters-section .content {
    margin-bottom: 1rem;
  }

  #filters-section .content h2 {
    padding-bottom: .625rem;
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: normal;
  }

  #filters-section .content h3 {
    font-size: .875rem;
    line-height: 1.4;
  }

  #filters-section .images-container {
    padding: 0;
  }

  #filters-section .extra {
    display: none;
  }
}

/* Quotes Section */

#quotes-section {
  background-color: #f3f3f3;
}

#quotes-section content {
  padding: 5rem 0;
}

#quotes-section quote {
  padding-right: 1.875rem;
  font-family: "Palatino", serif;
  font-size: 1.875rem;
  line-height: 1.1;
  font-style: italic;
  color: #4a4a4a;
}

#quotes-section quote-citation {
  height: 1.875rem;
}

@media only screen and (max-width: 760px) {
  #quotes-section content {
    padding: 1.875rem .625rem;
  }

  #quotes-section quote {
    font-size: 1.5rem;
    line-height: 1.4;
  }

  #quotes-section quote-citation {
    display: block;
    padding-top: 1rem;
    margin: auto;
  }
}

/* Footer */

footer {
  background-color: #9b9b9b;
  padding: 1.5rem 2rem;
}

footer .content {
  color: white;
  display: flex;
  font-size: .75rem;
}

footer .copyright {
  flex-grow: 1;
}

@media only screen and (min-width: 760px) {
  footer .content {
    font-size: .625rem;
  }
}

codecoder94606 · March 1, 2023, 10:51pm

Basically, the main issue I’m having right now is that the nav bar is huge despite having the correct padding. And the main content starts into the nav bar.

kirativewd · March 1, 2023, 11:34pm

Hi there!

When you say that “the nav bar is huge”, what exactly do you mean?

I am asking for context, because the only issue I see is with the font being different compared to the spec?

codecoder94606 · March 2, 2023, 3:59am

Thanks for replying
What I meant to say that is that when I inspect the nav bar with devtools, I see that even though I used the correct measurements, it dips into the main content div. And when I compare it to the finished product, I see that the padding even looks thicker

kirativewd · March 2, 2023, 4:10am

Is there a chance you could provide a screenshot of the problem? I am seeing no overflowing when I post your CSS into my file.

Something I will recommend though, is that on the body selector there is:

body {
  box-sizing: border-box;
}

Instead of using body, use the * selector.

* {
  box-sizing: border-box;
}

codecoder94606 · March 2, 2023, 4:33am

For sure. Do You see how part of the div is covered by the nav bar?

kirativewd · March 2, 2023, 4:42am

When I look at the dev tools, this is what I see:

There is an ever-so slight overlap with the box-sizing on the * selector caused by something else, but I do not have the same issue. Is the CSS you posted above current to what you’re working with?

Edit: Now that I think about it, is your header’s height currently 85px? If not, and your header is taller than 85px, the reason your banner is going under the header is because of the .main-content selector:

.main-content {
  position: relative;
  top: 5.3125rem; /* To offset for fixed header. */
}

Because the header is fixed, it is removed from the flow of the document, which is why the main-content needs to be offset to adjust. If the header is taller than 85px (which it should not be), then the top style would need to be adjusted to the correct value.

(If not, then ignore this and post any updated CSS, please )

codecoder94606 · March 2, 2023, 5:17am

Oh, wow. That is so strange, I wonder why yours looks so normal compared to mine. I only barely changed anything, but just in case I’m uploading any changes here so far. My I didn’t set a specific height for the header, but only kept the

.main-content at top: 5.3125rem;

If I set the header to 5.3125rem however, it becomes too small. Which is interesting

/* Universal Styles */

 
html {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  height: 100%;
}

* {
  box-sizing: border-box;
}

.main-content {
  position: relative;
  top: 5.3125rem; /* To offset for fixed header. */
 align-items: center;
}

.center {
  text-align: center;
}

.button {
  border-radius: 4px;
  background-color: #4a4a4a;
  color: white;
}

.image-container {
  overflow: hidden;
 
}

.image-container img {
  display: block;
  max-width: 100%;
}

@media only screen and (max-width: 760px) {
  .main-content {
    top: 2.5625rem;
  }
}

/* Header */

header {
  position: fixed;
  width: 100%;
  border-bottom: solid 1px #c6c1c1;
  background-color: white;
  z-index: 1;
  vertical-align: auto;
  top: 0;
  left: 0;
 
}

header .content {
  display: flex;
  align-items: center;
  padding: 1.875rem;
  margin: 0 auto;
  
}

header .logo {
  flex: 1;
  text-decoration: none;
  font-size: 1.5rem;
  font-family: "Roboto";
}

header nav ul {
  display: flex;
  list-style: none;
}

nav li {
  padding-left: 3.5rem;
 
}

nav a {
  vertical-align: bottom;
  line-height: 1.6;
  font-size: 1rem;
  color: #4a4a4a;
  text-decoration: none;
 font-size: 1rem;
  line-height: 1.6;
}

header .icon {
  width: 1rem;
  padding-left: .75rem;
}

header .mobile {
  display: none;
}

@media only screen and (max-width: 760px) {
  header .desktop {
    display: none;
  }

  header .mobile {
    display: block;
    width: 100%;
  }

  header .content {
    padding: .5rem 0;
  }

  header .mobile ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
  }

  header .mobile li {
    padding: 0;
  }

  header .mobile .button {
    padding: .1875rem .5rem;
    background-color: #9dc20b;
    line-height: 1.6;
    color: white;
  }
}

/* Sign Up Section */

#sign-up-section {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 43.5rem;
 background-image: url("C:/code Academy Projects/capstone_fotomatic_start/F1C1_start/resources/images/banner-landingpage.jpg");
 background-position: bottom;
 background-size: cover;
 background-repeat: no-repeat;


}

#sign-up-cta {
  padding: 0 5rem 2.5rem 5rem;
  border: solid 1px #979797;
  border-radius: 4px;
  background-color: #9dc20b;
  right: 6.25rem;
  position: relative;
  left: 10%;
  top: 10.625rem;
}

#sign-up-cta .content {
  width: 25.625rem;
  margin-top: 2rem;
  font-family: "Roboto", sans-serif;
  font-size: 1.25rem;
  line-height: 1.4;
  color: white;
}

#sign-up-cta h1 {
  font-size: 3.125rem;
}

#sign-up-cta h2 {
  font-size: 2.25rem;

}

#sign-up-cta span strong {
  font-weight: bold;
}

#sign-up-cta .cursive {
  font-family: "Damion", cursive;
}

#sign-up-cta .striking {
  font-family: "Rubik", sans-serif;
  padding-bottom: .75rem;
}

#sign-up-cta .button {
  margin-top: 1.625rem;
  padding: 1.25rem 7.25rem;
}

@media only screen and (max-width: 760px) {
  #sign-up-section {
    align-items: center;
    justify-content: center;
    height: 28rem;
  }

  #sign-up-cta {
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    border: none;
  }

  #sign-up-cta .content {
    margin-top: 0;
  }

  #sign-up-cta .email {
    display: none;
  }

  #sign-up-cta h1 {
    font-size: 3.125rem;
  }

  #sign-up-cta h2 {
    font-size: 2.25rem;
  }
}

@media only screen and (max-width: 450px) {
  #sign-up-section {
    height: 20rem;
  }

  #sign-up-cta h1 {
    font-size: 2.25rem;
  }

  #sign-up-cta h2 {
    font-size: 2rem;
  }
}

/* Features Section */

#features-section {
  display: flex;
  justify-content: space-between;
  padding: 4rem 5%;
  background-color: #f3f3f3;
}

.feature {
  flex: 1;
  padding: 2rem;
  margin: 0px 1.25rem;
  background-color: white;
  
}

.feature .image-container {
  width: 90%;
  height: 65%;
  margin: 0 auto;
 
  
}

.feature h2 {
  padding-bottom: .5rem;
  font-size: 2.25rem;
  font-weight: bold;
  color: #4a4a4a;
}

.feature h3 {
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 300;
  color: #4a4a4a;
}

@media only screen and (max-width: 890px) {
  .feature h2 {
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: normal;
  }

  .feature h3 {
    font-size: .875rem;
    line-height: 1.4;
  }
}

@media only screen and (max-width: 760px) {
  #features-section {
    flex-flow: column;
    padding: 0;
  }

  .feature {
    margin: 0;
    padding: 1.25rem 1rem 0 1rem;
  }
}

/* Filters Section */

#filters-section {
  padding: 4rem 0;
  background-color: #4a4a4a;
 display: block;
}

#filters-section .content {
  padding: 0 .625rem;
  margin-bottom: 5rem;
}

#filters-section .content h2 {
  font-size: 2.25rem;
  font-weight: bold;
  color: white;
}

#filters-section .content h3 {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 300;
  color: white;
}

#filters-section .images-container {
  max-width: 100%;
  padding: 0 1%;
 
}

@media only screen and (max-width: 760px) {
  #filters-section {
    padding: 1.5rem 0 0 0;
  }

  #filters-section .content {
    margin-bottom: 1rem;
  }

  #filters-section .content h2 {
    padding-bottom: .625rem;
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: normal;
  }

  #filters-section .content h3 {
    font-size: .875rem;
    line-height: 1.4;
  }

  #filters-section .images-container {
    padding: 0;
  }

  #filters-section .extra {
    display: none;
  }
}

/* Quotes Section */

#quotes-section {
  background-color: #f3f3f3;
}

#quotes-section content {
  padding: 5rem 0;
}

#quotes-section quote {
  padding-right: 1.875rem;
  font-family: "Palatino", serif;
  font-size: 1.875rem;
  line-height: 1.1;
  font-style: italic;
  color: #4a4a4a;
}

#quotes-section quote-citation {
  height: 1.875rem;
}

@media only screen and (max-width: 760px) {
  #quotes-section content {
    padding: 1.875rem .625rem;
  }

  #quotes-section quote {
    font-size: 1.5rem;
    line-height: 1.4;
  }

  #quotes-section quote-citation {
    display: block;
    padding-top: 1rem;
    margin: auto;
  }
}

/* Footer */

footer {
  background-color: #9b9b9b;
  padding: 1.5rem 2rem;
}

footer .content {
  color: white;
  display: flex;
  font-size: .75rem;
}

footer .copyright {
  flex-grow: 1;
}

@media only screen and (min-width: 760px) {
  footer .content {
    font-size: .625rem;
  }
}

kirativewd · March 2, 2023, 5:21am

I still have the same display as before, so I am not sure as to why you are seeing the overlap.

Could you use this CSS to see if it does anything?

/* Header */

header {
  position: fixed;
  display: flex;
  height: 5.313rem;
  width: 100%;
  border-bottom: solid 1px #c6c1c1;
  background-color: white;
  z-index: 1;
}

header .content {
  display: flex;
  width: 100%;
  place-content: space-between;
  place-items: center;
  padding-inline: 1.875rem;
}

header .logo {
  text-decoration: none;
  font-size: 1.5rem;
  font-family: "Roboto Mono", monospace;
}

header nav ul {
  display: flex;
  list-style: none;
}

nav li {
  padding-left: 3.5rem;
}

nav a {
  line-height: 1.6;
  font-size: 1rem;
  color: #4a4a4a;
  text-decoration: none;
}

header .icon {
  width: 1rem;
  margin-left: 0.75rem;
}

codecoder94606 · March 2, 2023, 5:41am

That actually helped a LOT. Thank you!

And I think I know what caused the issue also separate from this…

I took out the * {
box-sizing: border-box;
}
and for some reason, the nav bar is completely offset from the top even if I experiment with top or bottom CSS inputs. I think the border-box for some reason messed with the alignment of the nav bar. And without it it’s offset. Is that odd?

edit:
I put a red border around everything to see the spacing and you can see that there is a gap around the body itself on the side of the body itself and you can see it as it passes through the nav bar as well. Do you see that?

kirativewd · March 2, 2023, 5:50am

A question, do you have the reset css linked?

codecoder94606 · March 2, 2023, 5:52am

Oh… no, I don’t. After I changed it from reset.css to style.css, I didn’t add it it. I’ll add it now, actually.

kirativewd · March 2, 2023, 5:54am

You may notice some changes after doing so, as the reset changes the default of browser stylings. (The padding and margin being set to 0 is the important part)

codecoder94606 · March 2, 2023, 5:57am

Thank you for being patient with me, I appreciate it. It definitely made some changes which was very needed. Although, it interacted with the nav bar, which I think you’re right in terms of padding and margin, actually.

Also, what exactly is the point of the reset file if the CSS stylesheet is meant to cover over that?

codecoder94606 · March 2, 2023, 5:59am

yeah, changing the padding, it fixed it… wow that was a real learning experience. Thank you for that.

kirativewd · March 2, 2023, 6:00am

The main point of a CSS reset stylesheet is to remove inconsistencies between different browsers (and to maybe just apply auto-settings you find annoying to readjust overtime )

Your main stylesheet is the specific stylings used to style the webpage.

If you inspect any number of web pages, you will notice that they, too, use reset styles.

For instance, Codecademy does!

codecoder94606 · March 2, 2023, 6:04am

Are reset stylesheets standardized in that case?

Wow this is a rough learning process lol. But it’s a good feeling after all these hours of scratching my head LOL. Geez

kirativewd · March 2, 2023, 6:07am

Mmm, I would say they are popularly used, but their use-case depends on the project.

And the learning process can be a rough ride! Sometimes you will be scratching your head while also wanting to bang it against your desk. Just give yourself a little bit of patience and use the resources at your disposal.

But I am off to bed for the night, if you come across anymore problems I (and many others) will be glad to help you!