Fotomatic help!

codecoder94606 · March 2, 2023, 6:18am

Thank you again for your time and patience. You were so helpful

codecoder94606 · March 3, 2023, 5:02pm

Hey, I formated the desktop page. However the roadblock I’m going through right now is formatting through @media queries. And I’m confused because the tablet format has not been given any specs over Specs sheet here . So I’m pretty confused…

Anyway, I’ll share my updated code here. Thanks.

/* 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;
  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: 1.875rem;
}

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

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

nav li {
  padding-left: 3.5rem;
}

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

header .icon {
  width: 1rem;
  margin-left: 0.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.688rem;
}

#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;
  font-family: "Roboto";
  padding-top: 2.5rem;
  line-height: 1.2;
}

.feature h3 {
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 300;
  color: #4a4a4a;
  font-family: "Roboto";
  padding-bottom: 2.5rem;
}

@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;
  font-family: "Roboto", sans-serif;
}

#filters-section .content h3 {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 300;
  color: white;
  font-family: "Roboto", sans-serif;
  
}

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

@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;
  padding: 5rem;
  font-size: 1.875rem;
  font-family: "Palatino", serif;
  line-height: 1.1;
  font-style: italic;
  color: #4a4a4a;
}

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

}

#quotes-section quote {
  padding-right: 1.875rem;
 
}

#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;

  
}

footer .content {
  color: white;
  display: flex;
padding: 1.5rem 2rem;
  
}

footer .copyright {
  flex-grow: 1;
  font-family: "Roboto", sans-serif;
  font-size: .75rem;
}

footer .location {
  
  font-family: "Roboto", sans-serif;
  font-size: .75rem;

}

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

kirativewd · March 3, 2023, 5:18pm

Well, let’s take a look at the CSS for the media queries for the tablet size.

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

@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;
  }
}

@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: 760px) {
  #features-section {
    flex-flow: column;
    padding: 0;
  }

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

@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;
  }
}

@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;
  }
}

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

Taking a look at that, there’s 7 different media queries? This can be very confusing, so what I would recommend for all of the media queries that use the same break-point, is to condense them into one and move them to bottom of your CSS page. Then you can just comment where each section starts and ends.

@media only screen and (max-width: 760px) {

  /* UNIVERSAL STYLES START */

  .main-content {
    top: 2.5625rem;
  }

  /* UNIVERSAL STYLES END */

  /* HEADER STYLES START */

  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;
  }

  /* HEADER STYLES END */

  /* SIGN-UP STYLES START */

  #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;
  }

  /* SIGN-UP STYLES END */

  /* FEATURES STYLES START */

  #features-section {
    flex-flow: column;
    padding: 0;
  }

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

  /* FEATURES STYLES END */

  /* FILTER STYLES START */

  #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;
  }

  /* FILTERS STYLES END */

  /* QUOTES STYLES START */

  #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;
  }

  /* QUOTES STYLES END */

  /* FOOTER STYLES */

  footer .content {
    font-size: .625rem;
  }
}

That way it is easy just to see all the media queries in one section. From here, as there are no reference points from the spec, look at the design and adjust each section to fit as closely as possible to the spec.

codecoder94606 · March 3, 2023, 5:23pm

That’s a great point, thanks. I’ll do that instead.

Is it just me or, why is the mobile formatting under max-width: 760? Shouldn’t it be max-width: 480? I’d assume. But maybe I’m wrong

kirativewd · March 3, 2023, 5:28pm

You will see under the sign-up section that there is another media query for 450px, which I assume to be the size for the mobile media query.

The basis for this project is to just gain a general knowledge on how all of these things work and have changed, and to modernize the media queries as needed.

You will learn later in other lessons (at least I think? I cannot remember, lol) that it is quite easier to begin working on projects from a mobile-first perspective and to use fluid design which will cut down on the amount of changes needed via media queries.

codecoder94606 · March 5, 2023, 6:13pm

Hey, so I’m messing around with media queries and I’m running across which might be some very basic errors… this spec sheet for example, the logo in the desktop header disappears completely even though it’s not within the desktop header (fixed that by changing the class of the logo itself). Also, the header itself is big again and contents aren’t centered, but I’m figuring that one out

<header>
    <div class="content">
      <a href="index.html" class="desktop logo">Fotomatic</a>
      <nav class="desktop">
        <ul>
          <li><a href="#">Product detail</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="https://www.instagram.com/">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
        </ul>
      </nav>
      <nav class="tablet">
        <ul>
          <li><a href="#">Product detail</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="https://www.instagram.com/">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
          <li><a href="#" class="button">Join us</a></li>
        </ul>
      </nav>
      <nav class="mobile">
        <ul>
          <li><a href="#"><img src="./resources/images/ic-logo.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-product-detail.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-about-us.svg"></a></li>
          <li><a href="#" class="button">Join us</a></li>
        </ul>
      </nav>
    </div>
  </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: 1.875rem;
}

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

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

nav li {
  padding-left: 3.5rem;
}

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

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

header .mobile {
  display: none;
}

header .tablet {

  display: none;
}


@media only screen and (max-width: 760px) {

  /* UNIVERSAL STYLES START */

  .main-content {
    top: 2.5625rem;
  }

  /* UNIVERSAL STYLES END */

  /* HEADER STYLES START */

  header .desktop {
    display: none;
  }

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

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

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

  header .tablet li {
    padding: 0;
  }

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

this is what I mean by the header. when I go into devtools the parent itself is highlighted, not the header .content which what I think the issue is.

kirativewd · March 6, 2023, 3:40am

I’m sorry, I don’t know if I’m too tired to understand what you’re asking, lol, but is it alignment you’re having trouble with? Or something else?

codecoder94606 · March 6, 2023, 4:07am

Lol sorry, it’s alright. I just meant that the issue I’m facing with responsive design is that the header won’t resize to a smaller height. Instead, the content get’s smaller and the header div stays large. When I used devtools to inspect what’s going on, I saw the div is targetted, not the . So it’s just odd. I’m not really sure what’s going on. I’ve been looking around everywhere for understanding about this

jameskeezer · March 6, 2023, 5:35am

@codecoder94606 Perhaps it’s that the header height is set fixed for all screen sizes. I used my a media query (max-width: 660px) to set the header height to 3em when the nav links get too big for the screen.

You can see my code here: GitHub - Jamesllllllllll/fotomatic: Project for Codecademy

And results here: https://jamesllllllllll.github.io/fotomatic/

kirativewd · March 6, 2023, 3:00pm

Now that I am awake, I understand.

Take a look at the logo:

And the media query used to hide the header navigation:

This CSS selector is saying that within the header element, all children within the desktop class needs to be hidden at 760px. Do you see the classes of the logo?

But if you look at the spec, you can see that the logo disappears at the mobile view, and you should understand what you need to change.

Does that make sense?

codecoder94606 · March 8, 2023, 5:20am

Hey! I think I sorted everything. This is my first github haha so… yeah. But I kinda had to look around and loosely look at other examples without “cheating” too much. I was really stuck, but once I understood a lot of it, it made things a lot easier. Curious what you’d think

[GitHub - Nutellism/Fotomatic: My Fotomatic Solution](https://My Fotomatic Solution)

kirativewd · March 8, 2023, 3:29pm

Congratulations on finishing the project! For your HTML, you’ve got a lot of <div>s going on where some semantic elements could make more sense.

For instance,

<div class="main-content">

Is used to move and style the entire page below the header, but “main” is a semantic element used to detail the main parts of the page content (which does not include the footer)

So, what I would do instead is perhaps use a class name like:

<div class="content_wrapper">

Or something like that, and then wrap the other sections (again, excluding the footer) in the <main> element.

And speaking of each section, this would be a good time to use the <section> element as well.

Instead of this:

<div id="quotes-section">
  <div class="content center">
    <span class="quote">“It’s truly something that could create a brand new photography Renaissance”</span>
    <img class="quote-citation" src="./resources/images/photography-logo.png" />
  </div>
</div>
<!-- IT WOULD BE -->
<section id="quotes-section">
  <div class="content center">
    <span class="quote">“It’s truly something that could create a brand new photography Renaissance”</span>
    <img class="quote-citation" src="./resources/images/photography-logo.png" />
  </div>
</section>

And of course there are places where <article> can be used as well, but that’s the basics of it. When writing code, it’s a good idea to practice proper use of semantics because it’s easier to maintain, helps with SEO, and most importantly assists in accessibility.

I could not look at your CSS as there appears to have been some problems with uploading to GitHub. Sometimes I will go long periods of time without updating or adding anything to GitHub and I’ll forget how to use it myself, lol. I encourage you to look back the GitHub lesson or just search on YouTube for some HowTo videos!

codecoder94606 · March 8, 2023, 10:16pm

Thanks the html code actually was pre written by that from codeacademy- funny you say that. But yeah, it’s a lot of elements to deal with. I didn’t get to sections and content wrappers just yet.

system · April 19, 2023, 2:17pm

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.