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
How do I fix this?
Best regards!
