0

I've looked at many other threads concerning this question but none of the solutions seem to be working. For example, max-width: 100% and height: auto does not make the images responsive. They look great on IE, FF and Chrome on desktop. The problem is they won't scale for mobile devices, including chrome for Andriod 10 and Safari running iOS 13. The extent of my knowledge runs out here so I need help. 

<div class="image">
    <img src="images/last-supper.png" alt="The Last Supper by Leonardo da Vinci">
</div>

.image {
    padding-top: 2.5em;
    width: 100%;
    max-width: 600px;
    height: auto;
}

This is the code before I tried width:100% height:auto and max-width: 600px and also I tried removing shrink-to-fit=no from the <meta> I tried both on my external CSS stylesheet and inline HTML, and none of it worked. Could y'all please help walk me through this and figure out what's wrong?

GitHub repo for full code: https://github.com/ErichMB/the-christian-gallery

Gh-pages deployment: https://erichmb.github.io/the-christian-gallery/

isherwood
  • 58,414
  • 16
  • 114
  • 157
ErichMB
  • 1
  • 5
  • A few observations. In your provided CSS, you don't implement the samples that you tried and in your img tag you have the size inline which supersedes CSS. – imvain2 May 15 '20 at 18:16
  • Sorry, I thought it would be more useful to show the code before my attempts. I will edit now – ErichMB May 15 '20 at 18:18
  • What I would try is max-width:100% instead of 600px and just wrapping it in a div that has a width of 600px. That will allow the image to resize as well as allow you to use the code at a later point. And NOT using inline width on the img tag itself. – imvain2 May 15 '20 at 18:25
  • Your repo has Git conflict markers. You should really show a simplified demo here, though, in a code snippet. We don't need to see your entire page. Just the image styles. – isherwood May 15 '20 at 18:29
  • You're putting your styles on the wrapper div. They belong on the image. https://jsfiddle.net/isherwood/Lf7bd58w – isherwood May 15 '20 at 18:33
  • @imvain2 I will try this first and let y'all know if it works. However it seems I just messed up my webpage. In my git deployment I now have duplicate images and "<<<>>>master" and I have no idea what that means or what had happened. I'll try your possible solution after I get this bug fixed, if I can. Thanks – ErichMB May 15 '20 at 18:35
  • @isherwood That makes a lot of sense, I will definitely try that. That looks like that could be the exact issue I'm facing, thank you. However if you look at my other comment it seems I've run into a completely different problem that has broken my landing page somehow so my attention will be on that for now. Thanks for the reply! – ErichMB May 15 '20 at 18:37
  • The conflict markers mean that you did a merge and didn't resolve the conflicts before you pushed. Git should've told you about the conflicts during the merge. You need to remove all markers and fix the code manually. – isherwood May 15 '20 at 18:39
  • Please [take the tour](https://stackoverflow.com/tour). – isherwood May 15 '20 at 18:42

1 Answers1

0

You can try using a <picture> element - https://www.w3schools.com/tags/tag_picture.asp so instead of scaling, you can actually use a whole separate image specific for mobile.

I usually do 375px (mobile), 768px (tablets) and 1280px (desktop).

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
isherwood
  • 58,414
  • 16
  • 114
  • 157
MMBob
  • 11
  • 1