Image is not displayed on mobile devices vertical screen

Hi there,

I have just decided to check how my “Tribute Page” looks on iPhone 12 and other mobile devices.
What I have found out is that the image is not displayed on mobile devices

It look like this (mobile simulator page):

And it is supposed to look like this (laptop browser page):

I have tried to host the webpage on Netlify and I have checked how the page looks on iPhone 12 Safari - it has the same look as in the simulator (the image is not shown and the figcaption is too narrow )

Here is the code:

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Tribute Page</title>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta name="author" content="Johnny John">
    <meta name="content" content="text">
    <meta name="content" content="image">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
        content="This is the second knowledge check within FreeCodeCamp courses which requires to create a Tribute Page">
</head>

<body>
    <div id="maindiv">
        <main id="main">
            <h1 id="title">Robert Anthony Plant</h1>
            <p>The lead singer of Led Zeppelin</p>
            <div id="img-div">
                <img src="Robert Plant.jpg" alt="The photo of Robert Plant" id="image">
                <figcaption id="img-caption">
                    The lead singer of Led Zeppelin band Robert Plant in his older age posing for the photo.
                </figcaption>
            </div>
            <h3>Here's a time line of Robert Plant's life:</h3>
            <ul id="tribute-info">
                <li><strong>1948</strong> - born in Black Country, West Bromwich, Staffordshire, England</li>
                <li><strong>mid-teens</strong> - left King Edward VI Grammar School for Boys in Stourbridge and
                    developed a strong
                    passion
                    for the blues, mainly through his admiration for Willie Dixon, Robert Johnson and early renditions
                    of
                    songs in this genre.</li>
                <li><strong>1968</strong> - guitarist Jimmy Page was in search of a lead singer for his new band and met
                    Plant after
                    being
                    turned down by his first choice, Terry Reid, who referred him to a show at a teacher training
                    college in
                    Birmingham.</li>
                <li><strong>1980</strong> - Plant briefly considered abandoning music to pursue a career as a teacher in
                    the Rudolf
                    Steiner
                    education system</li>
                <li><strong>1982</strong> - Plant's solo career began with the album Pictures at Eleven</li>
                <li><strong>1994</strong> - Page and Plant became a full-fledged performing act from 1994 through 1998,
                    releasing the No
                    Quarter: Jimmy Page and Robert Plant Unledded album</li>
                <li><strong>2002</strong> - With his then newly formed band Strange Sensation, Plant released a widely
                    acclaimed
                    collection of mostly blues and folk remakes, Dreamland.</li>
                <li><strong>2007</strong> - Plant recorded and performed with bluegrass star Alison Krauss. A duet
                    album, Raising Sand,
                    was released on 23 October 2007 on Rounder Records.</li>
                <li><strong>2009</strong> - Plant was appointed a Commander of the Order of the British Empire "for
                    services to music"
                    and on
                    10 July 2009 invested by the Prince of Wales.</li>
                <li><strong>2021</strong> - Robert Plant and Alison Krauss released the 12-track studio album Raise the
                    Roof, produced by
                    T
                    Bone Burnett, as a follow-up to Raising Sand.</li>
            </ul>
            <blockquote>
                <p id="quote"><i>The whole idea of music, from the beginning of time, was for people to be happy</i></p>
                <cite>-- Robert Plant</cite>
            </blockquote>
            <p id="reference"><strong>If you have time, you should read more about this incredible human being on his <a
                        href="https://en.wikipedia.org/wiki/Robert_Plant" target="_blank"
                        id="tribute-link">Wikipedia</a>
                    page</strong>
            </p>
        </main>
    </div>
</body>

</html>

CSS:

body {
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
main {
  margin: 50px 0;
  background-color: #ccdcff;
  border-radius: 5px;
  padding: 10px 0;
}
h1 {
  font-size: 2.3rem;
}
img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 5px;
}
#img-div {
  background-color: whitesmoke;
  padding: 15px 0;
  margin: 0 250px;
  border-radius: 5px;
}
#img-caption {
  margin-top: 10px;
}
h3 {
  margin: 50px 0;
}
#tribute-info {
  margin: 0 auto;
  width: 45%;
}
ul {
  text-align: left;
}
li {
  margin: 15px 0;
  line-height: 1.8rem;
}
blockquote {
  padding: 20px 0;
  margin: 20px auto 3px;
  width: 35%;
  text-align: left;
}
cite {
  margin: 2px auto;
  text-align: left;
}
#reference {
  font-size: 1.2rem;
}

I have also tried these:

  max-inline-size: 100%;
  block-size: auto;

I have tried

display: flex;
flex-wrap: wrap;

I have tried

object-fit: contain;

None of these helped

However, it is appear to be displayed when the screen it horizontal
image

How do I fix this?

Best regards!

If you want to get something like this:

you should change the margin of the #img-div element to smaller value (at the moment the margin is 250px, and when you make a smaller screen size, the image disappear because of margin’s value - the content is invisible in portrait orientation).

However, if you want to change the image size for a particular screen size, do it by using media query in your css file.

I have also noticed that if I delete

max-width: 100%;
max-height: 100%;

from img {} selector, then the image would appear overflowing the screen like this:

Perhaps, there is also something to do with the image size which can help display it appropriately on any device?

You have to fine tweak some html elements for each particular screen size by using media query for that particular size.

1 Like

Hi, I am experiencing an issue with my website https://www.learnaboutcat.com/. The search icon, resembling a magnifying glass, does not appear on mobile devices until the screen is touched or the mouse hovers over it. This delay in displaying the icon appears to be caused by a problem in the website’s loading or execution process. I have attempted to address the problem by adjusting settings in the “Appearance,” “Customize,” and “Speed Optimization” sections, but unfortunately, the issue persists.

I also tried excluding certain JavaScript files from delayed execution, but this approach did not yield any positive results. I kindly request your assistance in resolving this matter. Thank you sincerely for your help.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.