Mournfuldog Posted April 10, 2014 Share Posted April 10, 2014 I've about got my website the way I like, using the Aviator template, but on a mobile phone, the font size, which is quite comfortable on a desktop monitor, is kind of huge. As the mobile styles already change many things, I figure there might be some way of saying, "Do all the stuff you always do for mobile devices, but make all the fonts 70% of the regular mobile size, please." For reference, my website, on a page other than the Info Page so you can see the problem: http://www.withinsight-therapy.com/what-we-offer/ Link to comment
Guest Posted April 10, 2014 Share Posted April 10, 2014 CSS: @media only screen and (max-width: 640px) { p { font-size: 14px; } } Link to comment
Mournfuldog Posted April 10, 2014 Author Share Posted April 10, 2014 Sorry: @media only screen and (min-width: 1025px) { #main-navigation { background: rgba(101, 89, 60, 0.9); width:15%; } } #main-navigation { background: rgba(101, 89, 60, 0.9) } @media only screen and (max-width: 640px) { body { font-size: 16px; } h1 { font-size: 28px; } h2 { font-size: 24px; } h3 { font-size: 20px; } blockquote { font-size: 16px !important; } } Link to comment
Guest Posted October 27, 2016 Share Posted October 27, 2016 If you also want to change the weight of the font on mobile, you can use something like this: @media screen and (max-width: 640px) { p { font-weight: 300; } } Replacing 300; with your own value. Hope this helps! Link to comment
aerosoul Posted August 25, 2017 Share Posted August 25, 2017 Does not work for me doesn't change menu text size and the linked pages inside the menu but changes all the other text instead. Wack. Super super fucking wack @NickBrit @HarryBrown Link to comment
mike_candor Posted August 20, 2018 Share Posted August 20, 2018 This worked great for me! Thanks @NickBrit @HarryBrown Do you know how to target the links in a mobile overlay navigation? I set my mobile breakpoint super high so I always have the mobile navigation active. Trying to use a large font for the desktop nav but would like to make it small for mobile. Using Brine as the template. Link to comment
rabblerousecreative Posted September 13, 2018 Share Posted September 13, 2018 Awesome, thank you! Link to comment
aleithialow Posted March 3, 2020 Share Posted March 3, 2020 hi! How do you make this work, but just for specific pages? For example, I used h1 as the style for overlay text on my web banner, and want to reduce font size for mobile, without affecting other h1 text on the rest of the site. Link to comment
Thurstings Posted March 3, 2020 Share Posted March 3, 2020 1 hour ago, aleithialow said: hi! How do you make this work, but just for specific pages? For example, I used h1 as the style for overlay text on my web banner, and want to reduce font size for mobile, without affecting other h1 text on the rest of the site. @aleithialow page settings > advanced > page header code injection Add <style>PASTE CODE HERE</style> This will target only that specific page with the code instead of the whole site. https://support.squarespace.com/hc/en-us/articles/205815908-Using-Code-Injection Let me know if this helped! Link to comment
Niculeahwr Posted May 28, 2020 Share Posted May 28, 2020 @Thurstings Is it possible to increase the font size for a single line of text on a page (eg. keep multiple font sizes on the page)? I'm trying to increase the "Getting Signed with ..." title, only. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.