I have a website where we have put the link as in two rows not as menu. Each row have some links as menu for each of my pages in the website. The links or menu we called them have two words as anchor text, but problem is that they overlap to each other on small screen. So i want them to be in straight line. Is it possible so we can reduce font size based on Screen and keep the two words in a line. Do you have any other idea you can state it as well.
Hi Anusha55. I presume they're just regular text, and so perhaps you should try disabling white-space wrap first for the container of those two? Hendra
You can do @media query: @media (max-width: 768px) { .your_div { font-size: 13px; } } Code (markup): Change the "your_div" to the div you're using for those links.
You can use percentage based font size, ems, or media queries. A good tutorial here: https://viljamis.com/2012/scaling-with-em-units/
You'd have to use both, but you're right. Something similar to what @qwikad.com suggested, minus the fixed PX declaration. @media screen and (max-width:value) { element a{ font:normal 80%/100% arial,helvetica,sans-serif; } } HTML: Though he's probably right, the fonts are already fixed so no scaling can possibly happen there. As much as font-size:13px seems bad, it's completely equivalent to an em/% value. And this is the reason : body { font-size: 16px; } People, don't ever do this!
White space are not helping much as the text go down in small screen and it look bad. Ok I will try it. Since I am doing it on Wordpress, will it effect all over the sites. I have to clearly do css and use the proper class as you sated. That is great but I don't want every text to go like that