CODEWITHSUNDEEP
htmlcssmedia-queries
Carl
Carl

Reputation: 241

How to make an image slide down

I would like to make the image in the center of the navigation bar slide down when the width of the page decreases.

This is how it looks like on a desktop:

enter image description here

Whereas on a smartphone the navigation bar should look like this:

enter image description here

As you can see, I would like the nav bar to remain as it is, except for the image to slide down the first row.

body {
  background-color: gray;
  color: white;
  font-family: Helvetica Neue;
}


/* Header */

header {
  background-color: black;
  background-image: url("images/spiaggia.jpg");
  background-size: 100%;
  background-position: center;
  padding: 2px;
  color: white;
  height: 200px;
  background-repeat: no-repeat
}

section {
  background-color: white;
  color: gray;
  padding: 20px;
  display: flex;
  flex-direction: row;
}

div {
  background-color: black;
  display: inline-block;
  width: 100px;
  margin: auto;
  color: white;
}

header ul {
  margin: 0px;
  padding: 0px;
}

header li {
  text-decoration: none;
  display: inline-block;
  margin-right: 20px;
}

header .mobile {
  display: none;
}

a {
  color: white;
  text-decoration: none;
}

.logo {
  background-image: url("images/città.jpg");
  background-size: 100px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 50px;
  position: relative;
  text-indent: -999999px;
  top: 0px;
  width: 100px;
  border: solid lightblue;
}


/* Features */

.features {
  background: white;
  color: gray;
  padding: 20px;
  display: flex;
  flex-direction: row;
}

.features figure {
  margin: auto;
  text-align: center;
  text-transform: uppercase;
  width: 200px;
}

.features figure img {
  border: 1px solid white;
  border-radius: 10%;
  box-shadow: gray 0 0 10px;
  width: 200px;
}


/* Footer */

footer {
  background: black;
  padding: 10px 20px;
  color: gray;
  font-size: 12px;
  padding: 20px 20px;
  text-align: center;
}

@media (max-width: 600px) {
  .mobile {
    display: inline-block;
  }
  .desktop {
    display: none;
  }
}
<header>

  <ul>
    <li><a href="Home.html">Home</a></li>
    <li><a href="website/Menu.html">Menu</a></li>
    <li><a class="logo" href="Home.html">Cadice_foto</a></li>

    <li class="mobile"><a href="website/Locations.html">Locations</a></li>
    <li class="mobile"><a href="website/Contacts.html">Contacts</a></li>


    <li class="desktop"><a href="website/Locations.html">Locations</a></li>
    <li class="desktop"><a href="website/Contacts.html">Contacts</a></li>
  </ul>

</header>
<section class="features">
  <figure>
    <img src="images/porticciolo.jpg" alt="porticciolo Cadice">
    <figcaption>Porticciolo Cadice</figcaption>
  </figure>

  <figure>
    <img src="images/palme.jpg" alt="palme Cadice">
    <figcaption>palme Cadice</figcaption>
  </figure>

  <figure>
    <img src="images/sera.jpg" alt="sera Cadice">
    <figcaption>sera Cadice</figcaption>
  </figure>


</section>
<section>lower-section</section>
<footer>Via Condotti, Roma IT - numero: 02.123456 - [email protected]</footer>

Upvotes: 1

Views: 400

Answers (3)

Lars
Lars

Reputation: 3573

This can be done with a css flex-box, and re-ordering the flex elements when your mobile view media query activates.

.menu-container {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
}

.menu-container>* {
  padding: 10px;
  flex: 1 20%;
}

@media all and (min-width: 600px) {
  .menu-container>* {
    flex: 1;
    counter-increment: menulink;
    order: counter(menulink);
  }
  .menu-left {
    order: 1
  }
 .menu-right {
    order: 3
  }
  .logo-menu {
    order: 2;
 }
}


body {
  background-color: gray;
  color: white;
  font-family: Helvetica Neue;
}

/* Header */

header {
  background-color: black;
  background-image: url("https://doggyholder.netlify.app/1000/500");
  background-size: 100%;
  background-position: center;
  padding: 2px;
  color: white;
  height: 200px;
  background-repeat: no-repeat
}

section {
  background-color: white;
  color: gray;
  padding: 20px;
  display: flex;
  flex-direction: row;
}

a {
  color: white;
  text-decoration: none;
}

.logo {
  background-image: url("https://doggyholder.netlify.app/200/100");
  background-size: 100px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 50px;
  position: relative;
  text-indent: -999999px;
  top: 0px;
  width: 100px;
  border: solid lightblue;
}

/* Features */

.features {
  background: white;
  color: gray;
  padding: 20px;
  display: flex;
  flex-direction: row;
}

.features figure {
  margin: auto;
  text-align: center;
  text-transform: uppercase;
  width: 200px;
}

.features figure img {
  border: 1px solid white;
  border-radius: 10%;
  box-shadow: gray 0 0 10px;
  width: 200px;
}

/* Footer */

footer {
  background: black;
  padding: 10px 20px;
  color: gray;
  font-size: 12px;
  padding: 20px 20px;
  text-align: center;
}

.menu-container {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
}

.menu-container>* {
  padding: 10px;
  flex: 1 20%;
}

@media all and (min-width: 600px) {
  .menu-container>* {
    flex: 1;
    counter-increment: menulink;
    order: counter(menulink);
  }
  .menu-left {
    order: 1
  }
  .menu-right {
    order: 3
  }
  .logo-menu {
    order: 2;
  }
}
<!DOCTYPE html>
<html>

  <head>
    <title></title>
    <link rel="stylesheet" href="11.css" type="text/css" />
  </head>

  <body>
    <header class="menu-container">
      <a class="menu-left" href="Home.html">Home</a>
      <a  class="menu-left" href="website/Menu.html">Menu</a>
      <a  class="menu-right"href="website/Locations.html">Locations</a>
      <a  class="menu-right" href="website/Contacts.html">Contacts</a>
      <div class="logo-menu"><a class="logo" href="Home.html">Cadice_foto</a></div>
    </header>
    <section class="features">
      <figure>
        <img src="https://doggyholder.netlify.app/150/150" alt="porticciolo Cadice">
        <figcaption>Porticciolo Cadice</figcaption>
      </figure>

      <figure>
        <img src="https://doggyholder.netlify.app/150/151" alt="palme Cadice">
        <figcaption>palme Cadice</figcaption>
      </figure>

      <figure>
        <img src="https://doggyholder.netlify.app/150/152" alt="sera Cadice">
        <figcaption>sera Cadice</figcaption>
      </figure>
    </section>
    <section>lower-section</section>
    <footer>Via Lars, somewhere IT - numero: uno!- [email protected]</footer>
  </body>

</html>

Upvotes: 3

Mobarak Ali
Mobarak Ali

Reputation: 760

I have changed your code little bit to achieve what you wanted. Here is the Code

body {
  background-color: gray;
  color: white;
  font-family: Helvetica Neue;
}


/* Header */

header {
  background-color: black;
  background-image: url("https://www.hotelsantamargherita.it/wp-content/uploads/2017/12/caorle-dalla-spiaggia-di-pon-1440x500.jpg");
  background-size: 100%;
  background-position: center;
  padding: 2px;
  color: white;
  height: 200px;
  background-repeat: no-repeat;
}

section {
  background-color: white;
  color: gray;
  padding: 20px;
  display: flex;
  flex-direction: row;
}

div {
  background-color: black;
  display: inline-block;
  width: 100px;
  margin: auto;
  color: white;
}

.navbar {
  margin: 0px;
  padding: 0px;
  text-align: center;
  position: relative;
}

.navbar li {
  text-decoration: none;
  display: inline-block;
  margin-right: 20px;
}

.navbar li a {
  color: white;
  text-decoration: none;
}

.logo a {
  background-image: url("http://www.florenceholidays.com/image/66-05.jpg");
  background-size: 100px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 50px;
  position: relative;
  text-indent: -9999px;
  top: 0px;
  width: 100px;
  border: solid lightblue;
}


/* Features */

.features {
  background: white;
  color: gray;
  padding: 20px;
  display: flex;
  flex-direction: row;
}

.features figure {
  margin: auto;
  text-align: center;
  text-transform: uppercase;
  width: 200px;
}

.features figure img {
  border: 1px solid white;
  border-radius: 10%;
  box-shadow: gray 0 0 10px;
  width: 200px;
}


/* Footer */

footer {
  background: black;
  padding: 10px 20px;
  color: gray;
  font-size: 12px;
  padding: 20px 20px;
  text-align: center;
}

@media (max-width: 600px) {
  .logo {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translatex(-50%)
  }
}
<header>
  <ul class="navbar">
    <li><a href="Home.html">Home</a></li>
    <li><a href="website/Menu.html">Menu</a></li>
    <li class="logo"><a href="Home.html">Cadice_foto</a></li>
    <li><a href="website/Locations.html">Locations</a></li>
    <li><a href="website/Contacts.html">Contacts</a></li>
    <!--     <li class="desktop"><a href="website/Locations.html">Locations</a></li>
    <li class="desktop"><a href="website/Contacts.html">Contacts</a></li> -->
  </ul>
</header>

<section class="features">
  <figure>
    <img src="https://picsum.photos/200/300" alt="porticciolo Cadice">
    <figcaption>Porticciolo Cadice</figcaption>
  </figure>

  <figure>
    <img src="https://picsum.photos/200/300" alt="palme Cadice">
    <figcaption>palme Cadice</figcaption>
  </figure>

  <figure>
    <img src="https://picsum.photos/200/300" alt="sera Cadice">
    <figcaption>sera Cadice</figcaption>
  </figure>

</section>
<section>lower-section</section>
<footer>Via Condotti, Roma IT - numero: 02.123456 - [email protected]</footer>

Upvotes: 1

Laura Taylor
Laura Taylor

Reputation: 51

Add the following in media query below in your CSS:

.logo {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

You may want to know what this code does. The position property specifies the type of positioning used for an element. The top property is the vertical position of a positioned element. The left and the right properties are written to reset positioning (these are "auto" by default), and then margin which is "0 auto" to align element by center. https://www.w3schools.com/css/css_margin.asp

You should probably see some info about media-queries here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

P.S. And remember DRY (Do not Repeat Yourself). Try to avoid writing twice, especially something like this:

            <li class="mobile"><a href="website/Locations.html">Locations</a></li>
            <li class="mobile"><a href="website/Contacts.html">Contacts</a></li>


            <li class="desktop"><a href="website/Locations.html">Locations</a></li>
            <li class="desktop"><a href="website/Contacts.html">Contacts</a></li>

You can set every property for every element in every media-query

Upvotes: 3

Related Questions