Tribute Page - First time media queries

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

Finished my first project. I have used media queries for the first time, focusing primarily on mobile and desktop. My code is rendering how I want it to, but this is happening without targeting the smaller phone sizes. I don’t understand how I am getting away with this. (?). If I can get code to run on mobile without specifying the smaller viewport sizes, then why do it? I sure could use some enlightenment. Thank you. (and any other feedback you can offer on this project would be greatly appreciated. don’t hold back. I thrive on constructive criticism.)

To view the project on mobile: http://rr.well-versed.org/
To view the code on codepen: https://codepen.io/don199/pen/rXwMWL

Overall it looks pretty good, but at certain points the header and footer start to break and text overlaps. There isn’t a way to really avoid using actual pixel values for your media queries, but some things like Flexbox and CSS Grid at least make it a little bit easier. If you can figure out how to only use a few media queries to accomplish as much as possible, it’s definitely the best route to go about it. Just fidget with your window size and try figure out when things break and then fix it from there is the best advice I have. Here’s some insight in structuring your queries a bit better.

There are two ways to go about using media queries.

“Mobile first” in which the base styles are for the smallest possible screen size by default and then adding queries of min-width for when things start looking a bit weird and awkwardly large.

header > nav {
    width: 100%;
    margin: 0 auto;
}

@media screen and (min-width: 560px) {
    header > nav {
        width: 70%;
    }
}

The second is of going from desktop down to mobile

header > nav {
    width: 70%;
    margin: 0 auto;
}

@media screen and (max-width: 559px) {
    header > nav {
        width: 100%;
    }
}

Either way works, but having some way that the CSS flows from one screen size to the next helps future you, and others, figure out what it should be at certain screen sizes.

Thanks for knowledge, krames12. Very helpful.

1 Like