CODEWITHSUNDEEP
htmlcss
Dkroster
Dkroster

Reputation: 21

On the desktop images are being displayed but in Phone Browsers images are not showing up

The weblink is escreva.in , on the phone browser it dose not load images, but the desktop version has no issue in loading the images. Any suggestion??

Upvotes: 0

Views: 44

Answers (1)

sheriffderek
sheriffderek

Reputation: 9053

Daksh.

The Image is a 'background-image' - and the a (link) that has the background image - has no 'shape' - and so, there's nothing to be the background image of (when it's a smaller screen).

When it hits a break-point then the parent is given display:flex - and that just happens to force the link to have a shape that allows for the background image. It's a fluke.

There are many ways to do this differently - but I'm not sure what to suggest for you.

enter image description here

I suggest you write it differently and ditch that framework:

/* global */
img {
  display: block;
  width: 100%;
  height: auto;
}

picture {
  display: block;/* inline by default */
}


/* module */
.example-parent {
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) {
  .example-parent {
    flex-direction: row;
    align-items: center;
  }
  .text {
    padding-left: 30px;
  }
}
<section class="example-parent">
  
  <picture>
    <img src="https://placehold.it/1200">
  </picture>
  
  <div class="text">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa vero iste quisquam illo autem harum labore, quia maxime quo suscipit natus delectus deleniti impedit ad ipsum ipsam perspiciatis magni corrupti.</p>
  </div>
  
</section>

Example that you can stretch and see in action: https://jsfiddle.net/sheriffderek/6w3s8vg0/

Upvotes: 1

Related Questions