Mobile Design Change Footer

Question

I have a footer that has about 10 links and when the viewport is 320px or less, I'd like to change that footer to only display two links. How can I go about doing that? Does anyone have any good references (I wasn't for sure how/what to Google).

Is this a situation where I'd have to create dom elements via javascript?

Answer 1

i would avoid using javascript for this type of situation. css3 has functionality built in called media queries that allow you to check for conditions and apply certain styles only when those conditions are met. they are defined as follows

@media (max-width:320px){
     ...
}

in this case the media query conditional checks the document "viewport" is less than 320px wide and will apply whatever css you put within the media query tag (and fyi you CAN nest multiple css styles within one media query)

insert a media query into your style sheet, give those mobile-hidden links a class and set them to display none as follows:

@media (max-width:320px){
     .mobileHidden{
        display:none;
     }
}

mozilla developer network has an article here on media queries if you would like some further reading. the use of media queries is typically known as "Responsive Web-Design" and should work just fine on any modern web browsers.