I've added an image to my front page. It has no width or height defined in the image tag.

When I resize the browser window it is responsive until the window is mobile size and the menu disappears.

Then the image completely disappears and all you see is a white screen beneath the header.

I've tried various things like putting it into a div and applying a style of width 100% and height auto but same issue of having it disappear. Help!

I've tried div.sale img { float: left; max-width: 100%; width: 100%; height: auto; }

and various combinations of this including removing the float, tried display: block;

front page image disappears

  • Add style for image: max-width: 100%; – Dipesh Rangani Nov 22 '16 at 5:03
  • already tried that and it did not work – babywit Nov 22 '16 at 5:27
  • 1
    If you have owl slider on that page then you have to change style for .columns { display: block; } – Dipesh Rangani Nov 22 '16 at 5:45
  • based off of magento blank with no changes to theme except in header and background img. no owl slider. – babywit Nov 22 '16 at 6:36
  • Feeling pretty stupid. Apparently I do have an owl slider. @Dipesh Rangani. '.columns { display: block; }' worked – babywit Nov 22 '16 at 7:33

You tried below?

<div class="col-md-12">
<img src="your img source" style="width:100%"/>
| improve this answer | |
  • 1
    thanks for your help. it was the .columns { display: block; } that i needed. – babywit Nov 22 '16 at 7:34
  • okay, go ahead. – Ram Pratap Singh Gour Nov 22 '16 at 13:23

For me it worked with img { width: 100%; height: auto; } but this is dependent on the parent element, if the parent doesn't have a width set, the image does not have a reference for it's own width

| improve this answer | |

If you have owl slider on that page then you have to change style for .columns

.columns { display: block; }
| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.