Fotomatic project

Hey everyone !
I’ve tried to use chrome developer tools for this project and when I try to use mobile view by picking any device from the list , it doesn’t work, maybe anyone has the same problem?

Hi @text3514535778 could you post your code so that we can have a look to see what might be the issue ?

I think the problem is not in my code cause I’ve tried to use it on solution page and if I go on dev tools and pick iphone x for example it doesn’t show the mobile version it shows me the normal one.

Ok well it’s hard to tell when I don’t have any code in front of me but if you’re saying that its not showing you the mobile version then you might want to double check your media queries, that is probably the source of the problem.

So when i shrink browsers window it does work but not on chrome dev tool

This is my code:

/* Universal Styles */

html {

font-family: “Roboto”, sans-serif;

font-size: 16px;

}

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

}

@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: 10;

}

header .content {

display: flex;

align-items: center;

padding: 1.875rem;

}

header .logo {

flex: 1;

}

header nav ul {

display: flex;

}

nav li {

padding-left: 3.5rem;

}

nav a {

vertical-align: bottom;

line-height: 1.6;

font-size: 1rem;

color: #4a4a4a;

}

header .icon {

width: 1rem;

padding-left: .75rem;

}

header .mobile .button {

display: block;

padding: .1875rem .5rem;

background-color: #9dc20b;

line-height: 1.6;

color: white;

}

header .mobile {

display: none;

}

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

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(…/images/banner-landingpage.jpg);

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

#sign-up-cta {

position: relative;

margin-left: 10%;

margin-top: 170px;

padding: 0 5rem 2.5rem 5rem;

border: solid 1px #979797;

border-radius: 4px;

background-color: #9dc20b;

}

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

}

.image-container img {

display: block;

max-width: 100%;

}

.feature h2 {

padding-bottom: .5rem;

padding-top: 2.5rem;

font-size: 2.25rem;

font-weight: bold;

color: #4a4a4a;

}

.feature h3 {

padding: 0 2rem 2rem 2rem;

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 {

background-color:#979797;

flex-flow: row;

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

display: flex;

}

@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-top: 80px;

padding-bottom: 80px;

}

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

}

footer .copyright {

flex-grow: 1;

font-size: .75rem;

}

footer .location {

font-size: .75rem;

}

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

footer .content {

font-size: .625rem;

}

}

Hello, I see. Would you mind posting your html code as well ? And try to format your code to improve readability please. Format code in posts

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700" rel="stylesheet">
  <link rel="stylesheet" href="./resources/css/style.css">
  <link rel="stylesheet" href="./resources/css/reset.css">
  <meta charset="UTF-8">
</head>
<body>
  <!-- Header -->
  <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>
          <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>
  <!-- Main Content -->
  <div class="main-content">

    <!-- Sign Up Section -->
    <div id="sign-up-section" class="banner">
      <div id="sign-up-cta">
        <div class="content center">
          <div class="header">
            <h2 class="cursive">Instant</h2>
            <h1 class="striking">FORMAT CAMERA</h1>
          </div>
          <div class="email">
            <span>
              Email us to request a demo and be in our waiting list for the <strong>Febuary 2017</strong> release!
            </span>
            <div class="button">Join the waiting list</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Features Section -->
    <div id="features-section">
      <div class="feature">
        <div class="center">
          <div class="image-container">
            <img src="resources/images/feature-1.png" >
          </div>
          <div class="content">
            <h2>Advanced, automatic, instant</h2>
            <h3>Shutter speed, apperture and flash output adjust automatically</h3>
          </div>
        </div>
      </div>
      <div class="feature">
        <div class="center">
          <div class="image-container">
            <img src="resources/images/feature-2.png" />
          </div>
          <div class="content">
            <h2>Beautifully crafted inside-out</h2>
            <h3>From the paint outside to the tiny screw inside, Fotomatic is crafted with love and 20-year of expertise</h3>
          </div>
        </div>
      </div>
    </div>

    <!-- Filters Section -->
    <div id="filters-section">
      <div class="content center">
        <h2>Over 20+ filters to choose from</h2>
        <h3>Feed your creativity with 20 different filter designed by our eclectic in-house photographers!</h3>
      </div>
      <div class="images-container">
        <div class="image-container">
          <img src="./resources/images/filter-1.png" />
        </div>
        <div class="image-container">
          <img src="./resources/images/filter-2.png" />
        </div>
        <div class="image-container">
          <img src="./resources/images/filter-3.png" />
        </div>
        <div class="image-container extra">
          <img src="./resources/images/filter-4.png" />
        </div>
      </div>
    </div>

    <!Quotes Section>
    <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>

    <!-- Footer -->
    <footer>
      <div class="content">
        <span class="copyright">© 2016  Fotomatic, All Rights Reserved</span>
        <span class="location">Designed in NYC</span>
      </div>
    </footer>

  </div>
</body>
</html>

Okay it is weird most of your code seems right but they your media queries just wont get activated whenever I resize the viewport in the developer tools…Even for the live version of the Fotomatic result.
I still found a few things though :
These codes are for your ul, button and also for your #features-section :

ul {
        list-style: none;
    }

Your list items were still showing those dots.

Also add a flex-direction to your #features-section in your media query :

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

And finally this is for your join us button should only appear when your viewport hits the tablet size.
Well despite the developer tools not really working for this project if you just resize your browser your code still works !

1 Like

Solution:
Added the following code into my header and the media queries in chrome dev device mode worked.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"></head>

1 Like

Awesome! I had the same problem and you just saved me a lot of time researching it !! :slight_smile:

1 Like