Question 199740 in Html Question posted in
Some basic documentation can be found here.

Html – How to move left div to the top of website when window size gets smaller?

I wanted to move my image div which is originally on the left side of my webpage to the top of the page when the window resizes reaches to a certain width. Using html css and javascript

.image{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 55vw;
        height: 100vh;
        background: url("signup.jpeg") no-repeat; 
        background-size: cover;
        background-size: 55vw 100vh;

@media screen and (max-width: 768px) {
    .image{
        width: 100%;
        height: auto;
        flex-wrap: wrap;
        width: 90vh;
        background-size: cover;
    
    }
}
Tags:

2

Answers


  1. 0 
    <div class="container">
  <div class="image"></div>
  <div class="content">...</div>
</div>

    css

    .container {
  display: flex;
}

.image {
  order: 1; /* Initial order, displays on the left */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55vw;
  height: 100vh;
  background: url("signup.jpeg") no-repeat;
  background-size: cover;
  background-size: 55vw 100vh;
}

.content {
  order: 2; /* Initial order, displays on the right */
  /* Other styles for the content div */
}

@media screen and (max-width: 768px) {
  .container {
    flex-wrap: wrap;
  }

  .image {
    width: 100%;
    height: auto;
    order: 2; /* Change order to 2, moves to the top */
    background-size: cover;
  }

  .content {
    width: 100%;
    order: 1; /* Change order to 1, moves below the image */
    /* Other styles for the content div in smaller screens */
  }
}

    By using the order property along with flexbox and media queries, you can control the order and layout of elements based on different screen sizes.

    Login or Signup to reply.
  2. 0

    several small problems in your code no closing }, double width…

    as saying Andy, flex is not necessary
    just put the image position absolute in body

    .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 55vw;
  height: 100vh;
  background: url("https://picsum.photos/1920/1080") no-repeat;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .image {
    width: 100vw;
    height: 55vh;
    background-size: cover;
  }
}
    <div class="image"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search