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

Html – i am doing media query on mysite. i want to set first image and the my text and buttons. but it's not working

Here is original size card.enter image description here
And I want this contents like this if width is 464px (media query)
enter image description here
When i tried different approaches it not working.

Here is my code:

Bring the world closer with Bing Wallpaper
Download the free app and enjoy breathtaking views with a new background each day.

Get Bing Wallpaper

`I tried using flex: column and content even margin etc…`

Tags:

2

Answers


  1. 0

    It looks like you forgot to include your code, but based on your description, you can achieve the layout in the second image by adding the following CSS.

    @media only screen and (max-width: 464px){
    .container {
        display: flex;
        flex-direction: column;
        gap: 30px; /* Adds space between items */
    }
    .text-container {
        order: 1; /* Moves this element to appear after the image */
    }
}

    This should get you closer to your desired layout. Let me know if you need further adjustments

    Login or Signup to reply.
  2. 0

    You can achieve your desired design implementation by following this approach.

    HTML:

    <div class="container">
  <div class="text-container">
    <p>Bring the world clo.....</p>
    <button>Get Bing Wallpaper</button>
  </div>
  <div class="image-container">
    <img src="laptop-image.png" alt="laptop-image">
  </div>
</div>

    CSS:

    .container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.text-container, .image-container {
  width: 50%;
}

.text-container {
  padding-right: 20px;
}

@media (max-width: 464px) {
  .container {
    flex-direction: column;
  }
  
  .text-container, .image-container {
    width: 100%;
  }

  .text-container {
    padding-right: 0;
    padding-top: 20px; 
    background-color: #F2F2F2;
  }

  .image-container {
    order: -1; /* This moves the image to the top above the text */
    background-color: #fff;
  }

  .image-container img {
    width: 100%; 
    height: auto;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search