Need advice with the 'view' of my tribute page

HTML-CSS
1

Hi everybody,

I have just completed the Tribute Page challenge in Codepen.
Run the tests, it shows all are passed. But I have another annoying problem. The thumbnails of my tribute page don’t look any good in Codepen .

This is what I mean:
tribpage

This is the link to the page itself : https://codepen.io/zany-concept/pen/JBebLx

Maybe it has something to do with the relative positions that I added to some elements?.. I’m not sure.

Your advice will be highly appreciated.

Thank you

2

Hi there,

Were you able to fix this? Since i am now able to see the Bart Simpson image correctly. Here is a screenshot of what i see:
http://take.ms/RwOZq

Let me know if you still need some help.

3

Hi,

I suspect that the screenshot you took is of the page itself. I looked at it in debug and full page modes, and it looks fine.
But my problem is that in the thumbnail on Codepen the preview of my page is distorted (like in the screenshot that I posted). So I was thinking what I did wrong and why my page’s preview looks wonky.

4

Ah I now understand your question :slight_smile:

The thumbnail view forces the site (viewport) to a narrow width (like a mobile screen). You may need to add a media query to make the green container wider , and the “Bart Simpson” heading font size smaller, when the screen size is less than say 500px.

5

You can try this media query which essentially reduces the margin space outside the green container and the title font size

@media screen and (max-width: 500px) {
  #main {
    margin: 20vw;
  }
  
  #title {
    font-size: 10vw;
    padding: 5vw;
  }
}

One more thing i wanted to add was, in codepen, or when you use a separate CSS file, you need not add tags. These are needed only if you add CSS code within the HTML file itself.

6

Thank you so much !
I put in the @media query, but it seems that it does nothing to the thumbnail… it stays the same (distorted)…

As regards the tags, do you mean in CSS in particular, and in HTML ?

7

Thank you so much !
I put in the @media query, but it seems that it does nothing to the thumbnail… it stays the same (distorted)…

Just to be on the same page, can you share a link of the page where you are viewing the thumbnail? I will be happy to check it by tomorrow if not tonight (since its getting a bit late here :-))

As regards the tags, do you mean in CSS in particular, and in HTML ?

I meant the <script> tag within the CSS box in Codepen. They are not needed.

8

I tweaked the code i sent earlier

@media screen and (max-width: 500px) {
  #main {
    margin: 10vw;
  }
  
  #title {
    font-size: 10vw;
    padding: 1vw;
  }
}

Remove on the CSS section and add the above code at the bottom.

9

You built your page for desktop only.

The solution is to use relative units that change according to the screen size.

I personally prefer to use percentage.

Here’s how to make your page flexible & responsive (or at least make it better):

  1. Delete that media query at the beginning (there’s no need for it at the moment)
  2. Search for #main and then delete margin: 50px 200px; . #main will expand on the entire space. don’t worry, There’s an alternative to margin and it’s better.
  3. Add to #main the width of 60% (adjust it if you’d like) and also add margin: auto to center it! The CSS to add is: width: 60%; margin:auto;
  4. If you resize the screen now, you’ll see that it’s got better! Now, do the same thing with #tribute-info, delete margin margin: 0px 80px;, then add to it width: 80%; margin: auto;
  5. If you resize the screen, you’ll see that your design is getting better and better, now all is needed is fixing the title! Add a media query at the end of your CSS because if you don’t, it will not work. it works only when added at the end of the style or at least after the element in question. So, add the following:
@media only screen and (max-width: 600px) {
  #title {
    font-size: 50px;
  }
}

@media only screen and (max-width: 390px) {
  #title {
    font-size: 30px;
  }
}

And Congratulations!

I hope this was helpful.

Good luck.

1 Like
10

Thank you! This is good learning for me as well :slight_smile:

1 Like
11

Mr. nagpai, You’re welcome.

1 Like