Fannie Posted August 21, 2020 Share Posted August 21, 2020 Site URL: https://clarinet-salamander-b4cz.squarespace.com/config/pages Hi guys, I am wondering is there a way to set two different font sizes one for mobile version and one for desktop? I tried with responsive font but I want the font to stay at the same size also when I make a smaller window, just for mobile version my font-size is to big so there is a break in the headerword here is the code I am currently working with: Does anyone has a hint? Would be really nice to get some help !:) <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box;} body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .header { overflow: hidden; padding: 12px 10px; background-color:red; } .header a { float: left; color: white; text-align: center; padding: 12px; text-decoration: none; font-size: 18px; line-height: 17px; border-radius: 4px; } .header-right { float: right; } @media screen and (max-width: 500px) { .header a { float: none; display: block; text-align: left; font-size: 2em; } .header-right { float: none; } } </style> </head> <body> <div class="header"> <a href="#default" class="logo"> <span style="text-transform:uppercase;font-size:90px; font-family:Stempel Garamond LT Std ; position:relative; top:15px;"> Nonna </span> <span style="font-style: italic; font-family:Stempel Garamond LT Std; font-size:55px;position:relative; top:15px; left:-20px;">stories</a> <div class="header-right" style:"position:relative; left:-20px;"> <a class="active" href="#home" style="font-family:ITC Franklin Gothic Std ; text-transform:uppercase; position:relative; top:30px; font-size:20px;">Home</a> <a href="#contact" style="font-family:ITC Franklin Gothic Std ; text-transform:uppercase; position:relative; top:30px;">Contact</a> <a href="#about" style="font-family:ITC Franklin Gothic Std ; text-transform:uppercase; position:relative; top:30px;">About</a> </div> </div> </body> </html> Link to comment
tuanphan Posted August 21, 2020 Share Posted August 21, 2020 You mean Site Title? Add to Home > Design > Custom CSS @media screen and (max-width:767px) { /* nona */ .header a span:first-child { font-size: 50px !Important; } /* stories */ .header a span:last-child { font-size: 30px !Important; } /* menu */ .header-right * { font-size: 10px !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Fannie Posted August 21, 2020 Author Share Posted August 21, 2020 thank you so much!! thats what I meant , worked :) thanks you for your help!!! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.