Menu icon Foundation
Resize for retina display?

I'm not sure if I was doing this right to begin with. I was using the code below to resize the header's nav bar on smaller screens. It was working out okay until I learned it wasn't displaying correctly on iPads with retina display. The last link is getting pushed onto a second line (see attached image).

What is the correct way to do this? Does Foundation have something that will resize text automatically? The max-widths I used below were chosen very unscientifically. I just kept making the window smaller until things didn't fit and changed font sizes at those points.

@media only screen and (max-width: 1125px) {
    #header-nav-large { font-size: 1.5rem;}
}

@media only screen and (max-width: 875px) {
    #header-nav-large { font-size: 1rem;}
}
            

         

Bad nav

ipadretinappiresizemax-width

I'm not sure if I was doing this right to begin with. I was using the code below to resize the header's nav bar on smaller screens. It was working out okay until I learned it wasn't displaying correctly on iPads with retina display. The last link is getting pushed onto a second line (see attached image).

What is the correct way to do this? Does Foundation have something that will resize text automatically? The max-widths I used below were chosen very unscientifically. I just kept making the window smaller until things didn't fit and changed font sizes at those points.

@media only screen and (max-width: 1125px) {
    #header-nav-large { font-size: 1.5rem;}
}

@media only screen and (max-width: 875px) {
    #header-nav-large { font-size: 1rem;}
}
            

         

Bad nav
Rafi Benkual about 4 years ago

There is a font-reduction function in Foundation to bump down text size on the small breakpoint. The media query you have is fine. Matching it to the default breakpoints may be better but your content will dictate that.