Tribute project is not responsive

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

So I have been working on this project for two days and have come up with this Tribute Page .
I don’t know what I’m doing wrong but the big picture in the middle is not responsive enough.
May I know what mistakes I’m doing?
I have also added the media rules. Still isn’t responsive in other resolutions except the default.
Can somebody correct the code?
After I got this problem, I saw a few others who had this problem but they didn’t even use the @media tag to solve it.
So how exactly does it work?

Hi, the vh unit is a percentage of the viewport height, but I guess what you were trying to do is done with vw (viewport width) …

Oh yah that is true. Thank you for that

What you said was true about the vh and vw , but that does not solve the problem .
It doesn’t make it responsive.

Could you maybe post an updated codepen and describe in greater detail what effect you are trying to achieve? What do you mean by “responsive enough”? On window sizes between 390px width and down to 320px?

Ok thank you for the reply , I solved the problem by simply changing the “height” from a fixed value for every resolution to “auto” . That made the image resize correctly, without which the FCC tests every failing (for responsive design) in every other resolution.
The problem is now solved , thanks for the help mate. :blush:

1 Like