Tribute Page - help with completing all tasks

Code Feedback
1

Hi All, I am trying to finish the Tribute Page task and have chosen Yukihiro Takahashi from YMO as my subject.

I am not able to complete all tasks.

Currenly have 9/10 and stuck on the layout part. I can’t make images responsive.

Layout

  • 1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

I have taken some code from w3 schools and been watching several youtube videos and I just can’t figure out how to fix it… orz

2

HTML

<html>
  <head>
    <link rel="stylesheet" href="style.css">

  </head>
  <body>
    <div id="main"> 
        
      <h1 id="title">Yukihiro Takahashi</h1>
      <p id="img-caption" class="center"><em>Yukihiro in 3 photos</em></p>
        <div class="row">
        <div class="column">    
            <div class="column"></div>
            <figure id="img-div">
                <figcaption id="img-caption"></figcaption>
            <img src="images/yukihiro-car.jpeg" alt="Yukihiro Takahashi Portrait" id="image">
            <img src="images/yukihiro-musician.jpeg" alt="">
            <img src="images/yukihiro-older.jpeg" alt="">
            </figure>
            </div>
        </div>
    <!-- <div class="column">
        <img src="images/yukihiro-newspaper.jpeg" alt="Yukihiro Takahashi Portrait" id="image">
        <img src="images/yukihiro-barbican.jpeg" alt="">
        <img src="images/yukihiro-saravah.jpeg" alt="">
    </div> -->




    <div id="tribute-info">
        <p>Japanese musician, born 6 Jun 1952, Tokyo. Younger brother of Nobuyuki Takahashi.
The members of YMO have many solo works and Mr. YT is also the man of many works. In addition to his activities in Y.M.O., Beatniks and reformed Sadistics Mika Band, he has been producing solo works without rest.
</p>
      </div>

     <a href="https://en.wikipedia.org/wiki/Yukihiro_Takahashi" target="_blank" id="tribute-link">find out more about Yukihiro on Wikipedia</a>
    </div>
  </body>
  
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  
</html>
3

CSS

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  Create four equal columns that sits next to each other
  .column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }
  
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
  }

  #img-caption {
      font-size: 30px;
  }
4

@zenidith, when tests fail click the red button to see which test(s) are failing and text to help you correct the issue.

  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
5

Yes, got it thanks.

to be fair, there was nothing else written.

just:

1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

6

To be fair, the entire failing text message is;

The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Try using the "max-width" style property : expected 'none' to not equal 'none'
AssertionError: Try using the "max-width" style property : expected 'none' to not equal 'none'

Edit: On a side note, we don’t have access to your computer so you’ll need to host the images somewhere. You can search and find a few places that allow free hosting. Or you can put the images onto GitHub.

7

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