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

flex-direction:column-reverse; Not showing Image – Html

I have a 2 column grid which I want to stack and reverse on mobile. But when doing this the image is not showing up anymore. There is just a white space the size of the image. Here just some snippets from the code

HTML

<section class="grid-middle bg-light flex-flip-sm">
    <div class="col-6_sm-12 bg-image img-bar vh-70"></div>
    <div class="col-6_sm-12 padded">
        <h2 class="heading">Title goes here/h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium illum repudiandae doloribus hic blanditiis nesciunt? Perspiciatis asperiores explicabo vero maiores doloribus. Corporis odit iusto, officia expedita voluptas delectus aperiam aspernatur!</p>
    </div>
</section>

CSS

.flex-flip-sm{
    display:flex;
    flex-direction:column-reverse;
}

This is what it looks like, just the white space the size as the image should be.

enter image description here

Tried adding min-height, padding, etc but nothing works.

Tags:

2

Answers


  1. 0

    The background image may not be visible due to how the background-image property is being applied.

    Instead of using the background-image property, you can try using an img tag within the .bg-image container. This way, the image will be part of the HTML content, and it will be easier to control the sizing and positioning.

    HTML

    <section class="grid-middle bg-light flex-flip-sm">
  <div class="col-6_sm-12 bg-image img-bar vh-70">
    <img src="your-image.jpg" alt="your-image">
  </div>
  <div class="col-6_sm-12 padded">
    <h2 class="heading">Title goes here</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium illum repudiandae doloribus hic blanditiis nesciunt? Perspiciatis asperiores explicabo vero maiores doloribus. Corporis odit iusto, officia expedita voluptas delectus aperiam aspernatur!</p>
  </div>
</section>

    CSS

    .bg-image {
  position: relative; /* Make sure the container has a position property */
  overflow: hidden; /* Hide any overflow from the image */
  min-height: 300px; /* Set a minimum height for the container */
}

.bg-image img {
  position: absolute; /* Position the image absolutely within the container */
  top: 50%; /* Center the image vertically */
  left: 50%; /* Center the image horizontally */
  transform: translate(-50%, -50%); /* Center the image precisely */
  width: 100%; /* Set the width of the image to 100% of the container */
  height: auto; /* Set the height of the image to auto to maintain aspect ratio */
}

    This should ensure that the image is displayed properly on mobile devices when the flex container is stacked and reversed.

    Login or Signup to reply.
  2. 0

    You should add a width and height to see your image.
    See the code below :

    .flex-flip-sm{
    display:flex;
    flex-direction:column-reverse;
}

.bg-image {
    background-image: url("https://thumbs.dreamstime.com/z/vector-empty-transparent-background-transparency-grid-seamless-pattern-171149540.jpg");
    background-size: cover;
    min-width: 100px;
    min-height: 200px;
}
    <section class="grid-middle bg-light flex-flip-sm">
    <div class="col-6_sm-12 bg-image img-bar vh-70"></div>
    <div class="col-6_sm-12 padded">
        <h2 class="heading">Title goes here/h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium illum repudiandae doloribus hic blanditiis nesciunt? Perspiciatis asperiores explicabo vero maiores doloribus. Corporis odit iusto, officia expedita voluptas delectus aperiam aspernatur!</p>
    </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search