I'm stuck - tribute page

Hello guys, actually, I have already achieve my first project. But for training, I wanted to create a phone resolution version of it with media queries.

It went pretty well until I tried to delete my “#tribute-info”'s side marges (with a @media (max-width).

here my css code , I’ve tried everything I know, maybe the problem is about the structure :

:root {
  --red-color : #F56446;
  font-family: 'Playfair Display', serif;
}
h2 {
  color: var(--red-color);
}
#main {
  display: grid;
  grid-template-rows: 30vh 48vh 1fr;
}
#title {
  margin-left: auto;
  margin-right: auto;
  width: 80vw;
  display: flex;
  flex-direction:column;
  align-items: center;
  background: var(--red-color);
  color: white;
}
@media screen and (max-width: 1300px){
  #title {
    width: 100%;
  }
  #image{
    display:none;
  }
  #pcaption {
    color: transparent;
  }
  #marge-titre {
    display:none;
  }
  #tribute-info {
    width:100%;
    margin-left: 0px;
    margin-right: 0px;
  }
#main {
grid-template-rows: 10vh 48vh 1fr;
}
}
#img-div{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80%;
  font-size: 70%;*
  font-style: italic;
  color: grey;
  margin: auto;

}
#image {
  width: 65%;
  height: auto;
  max-width: 100%;

}

#tribute-info {
  flex-direction: column;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
#img-tribute-1{
  width: 40%;
  height: auto;
  display: block;
  margin:auto;
}
#img-tribute-2 {
  width: 40%;
  height: auto;
  display: block;
  margin:auto;
}
#hr {
  display:block;
  width: 40%;

}

I’m sorry for my english, it’s note my native language. I don’t know if it’s ok to post, if it’s not I will delete it.

Thanks for reading !

1 Like

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Hi @Amsteradams!

Welcome to the forum!

You set your media query to max-width:1300px which is usually the size for a laptop. Phone sizes are usually half that width.

It might be better to see a link for your codepen so we can see the issue you are talking about.

1 Like

Yep, my screen is larger so it was just for the test ! :slight_smile: . I didn’t know for the backticks, thanks !

here’s my html code :


<DOCTYPE! html>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="https://previews.123rf.com/images/dstarky/dstarky1701/dstarky170100866/69423751-ic%C3%B4ne-de-guitare-ou-logo-illustration-vectorielle.jpg" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap"
 rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="all" />

  <title>
    Tribute to Robert Johnson
  </title>
</head>
<body>
<div id="main">
  <div id="title">
    <div id="titre">
      <h1>Tribute to Robert Johnson</h1>
    </div>
    <div id="hr">
      <hr id="marge-titre">
    </div>
    <div id="titre-caption">
      <p id="pcaption">
“Hello Satan, it's time to go. Me and the devil, walkin' side by side."
      </p>
    </div>
  </div>
<div id="img-div">
  <img src="https://3248k42ykjj53w32471u2by9-wpengine.netdna-ssl.com/wp-content/uploads/2020/05/21634193_web1_200526-CDT-johnson-photographs-1_1.jpg" alt="Robert Johnson" id="image">
  <div id="image-caption">
    <p>
      One of the most important and influential musicians of the 20th Century (and his influence extends into the 21st Century) is also one of the most mysterious.
    </p>
  </div>
 </div>
<div id="tribute-info">
  <h2> Life before music </h2>
  <p>
    Johnson was the product of a confusing childhood, with three men serving as his father before he reached age seven. Little is known about his biological father (Noah Johnson, whom his mother never married), and the boy and his mother lived on various plantations in the Mississippi Delta region before settling briefly in Memphis, Tennessee, with her first husband (Robert Dodds, who had changed his surname to Spencer). The bulk of Johnson’s youth, however, was spent in Robinsonville, Mississippi, with his mother and her second husband (Dusty Willis). There Johnson learned to play the jew’s harp and harmonica before taking up the guitar. In 1929 he married 16-year-old Virginia Travis, whose death in childbirth (along with that of their baby) in April 1930 devastated Johnson.
    <img class="img-tribute"src="https://static01.nyt.com/images/2019/09/30/obituaries/30overlooked-johnson1/00overlooked-johnson1-superJumbo.jpg?quality=90&auto=webp" alt="Robert johnson in his young age" id="img-tribute-1">
  </p>
  <h2>Life</h2>
  <p>In Robinsonville he came in contact with masters of the Mississippi Delta blues Willie Brown, Charley Patton, and Son House—all of whom influenced his playing and none of whom was particularly impressed by his talent. They were dazzled by his musical ability, however, when he returned to town after spending as much as a year away. That time away is central to Johnson’s mythic status. According to legend, during that period Johnson made a deal with Satan at a crossroads, acquiring his prodigious talent as a guitarist, singer, and songwriter in exchange for the stipulation that he would have only eight more years to live. (A similar story circulated in regard to another Mississippi bluesman, Tommy Johnson.) Music historian Robert Palmer, in his highly regarded book Deep Blues (1981), instead ascribes Robert Johnson’s remarkable musical attainments to the time he had to hone his skills as a guitarist under the instruction of Ike Zinneman as a result of the financial support he received from the older woman he married near Hazlehurst, Mississippi (Johnson’s birthplace), and to the wide variety of music to which he was exposed during his hiatus from Robinsonville, including the single-string picking styles of Lonnie Johnson and Scrapper Blackwell.

After returning briefly to Robinsonville, Johnson settled in Helena, Arkansas, where he played with Elmore James, Robert Nighthawk, and Howlin’ Wolf, among others. He also became involved with Estella Coleman and informally adopted her son, Robert Lockwood, Jr., who later became a notable blues musician under the name Robert Jr. Lockwood. Johnson traveled widely throughout Mississippi, Arkansas, Texas, and Tennessee and as far north as Chicago and New York, playing at house parties, juke joints, and lumber camps and on the street. In 1936–37 he made a series of recordings in a hotel room in San Antonio, Texas, and a warehouse in Dallas.
  </p>
  <img class="img-tribute"src="https://vinyllaircom.files.wordpress.com/2019/11/img_8838-1.jpg" alt="Robert johnson with a guitar" id="img-tribute-2">
  <p>
   His repertoire included several blues songs by House and others, but Johnson’s original numbers—such as “Me and the Devil Blues,” “Hellhound on My Trail,” “Sweet Home Chicago,” “I Believe I’ll Dust My Broom,” “Ramblin’ on My Mind,” and “Love in Vain”—are his most compelling pieces. Unlike the songs of many of his contemporaries—which tended to unspool loosely, employing combinations of traditional and improvised lyrics—Johnson’s songs were tightly composed, and his song structure and lyrics were praised by Bob Dylan. Despite the limited number of his recordings, Johnson had a major impact on other musicians, including Muddy Waters, Elmore James, Eric Clapton, and the Rolling Stones.
 </p>
  <h2> Death </h2>
 <p>
   Johnson died after drinking poisoned whiskey in a juke joint. He had only one moderate hit song during his lifetime (“Terraplane Blues”), but, after Columbia Records released a collection of his recordings, King of the Delta Blues (1961), the man and his music both achieved near-mythic status. Columbia later issued the box set Robert Johnson: The Complete Recordings (1990). Johnson was inducted into the Blues Hall of Fame in its inaugural class (1980), and he became a member of the Rock and Roll Hall of Fame in 1986.
 </p>
 <p> If you want to know more about Robert johnson, click <a href="https://www.britannica.com/biography/Robert-Johnson-American-musician" target="_blank">here</a>

 </div>
</div>
</body>

</html>

can you give the link to your project?

In my previous response there is video that shows you how to use the preformatted text tool instead of backticks.

The “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like