tag:blogger.com,1999:blog-4164152170292572929.post3987837447125146515..comments2024-03-28T11:38:53.223+09:00Comments on 10원 Tips: Customizing fonts in Blogger mobile viewSam Nordberghttp://www.blogger.com/profile/09860631468502504144noreply@blogger.comBlogger31125tag:blogger.com,1999:blog-4164152170292572929.post-68967374077352277032024-03-28T11:38:53.223+09:002024-03-28T11:38:53.223+09:00Nicole, I checked one of your blogs (kdramaholic.n...Nicole, I checked one of your blogs (kdramaholic.nl). It looks like you're using newer themes that's are dynamically responsive. My instructions in this post are only for what are now the "older" style of Blogger themes, which used different theme code depending on desktop view or mobile view. The newer themes use the same basic code set for both, so by default, there isn't any mobile-specific CSS to modify, at least not that I see. Sorry. Sam Nordberghttps://www.blogger.com/profile/09860631468502504144noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-18356995332804880942024-03-23T18:54:01.834+09:002024-03-23T18:54:01.834+09:00I added .mobile .post-body {font-size: 40px;} to t...I added .mobile .post-body {font-size: 40px;} to the css in de customizer but it didn't do anything.Nicole Orriënshttps://www.blogger.com/profile/02061262281050363451noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-29708214890552268242024-03-23T18:51:46.172+09:002024-03-23T18:51:46.172+09:00Hi, do you maybe now how to increase the font size...Hi, do you maybe now how to increase the font size of a blogspot on mobile? I did it in the customizer and it's working on Desktop. But on mobile the font is still too small.Nicole Orriënshttps://www.blogger.com/profile/02061262281050363451noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-62058588273900118562020-12-01T00:51:28.793+09:002020-12-01T00:51:28.793+09:00If a size isn't specified it will take the def...If a size isn't specified it will take the default size for text on the page which for mobile view is usually an appropriate size. In fact when I add widgets to a blog I usually remove any font size references because I find they generally do more harm than good. Sam Nordberghttps://www.blogger.com/profile/09860631468502504144noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-82574106697470500632020-09-19T07:32:54.929+09:002020-09-19T07:32:54.929+09:00Thank you! My blog was displaying fine on mobile u...Thank you! My blog was displaying fine on mobile until suddenly a couple of hours ago, so this will help put it back as I like it :) Question: is it necessary to indicate font size for these? Just wondering if no font size is given will it default to a mobile-friendly size, or is it imperative to dictate a specific size?Koshka42https://www.blogger.com/profile/10002366611479600620noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-43326617964393748242019-08-14T19:10:55.900+09:002019-08-14T19:10:55.900+09:00The easiest way would be to add this to your blog ...The easiest way would be to add this to your blog designer in the "Add CSS" box:<br /><br /><b>table tbody {font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', 'Lobster', fantasy, cursive, sans-serif;}</b><br /><br />However, some modern browsers don't have support for displaying Comic Sans anymore. So I listed several other options there that will hopefully make your table look similar to Comic Sans.<br /><br />If it still doesn't look right to you, you may have to direct the browser to fetch the Comic Sans font. That means adding both a line of code to your "Add CSS" and another line of code to your blog header (in the Template HTML editor). See here for how to do that: <a href="http://allfont.net/download/comic-sans-ms/" rel="nofollow">http://allfont.net/download/comic-sans-ms/</a>Sam Nordberghttps://www.blogger.com/profile/09860631468502504144noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-4171834473773425542019-08-14T12:17:24.590+09:002019-08-14T12:17:24.590+09:00Hi Sam, I need to apply Comic Sans MS font to a ta...Hi Sam, I need to apply Comic Sans MS font to a table but "keeping the desktop template" on mobile, but I just want to edit the table's font, not all the body, if you could help me I'll thank you too much & acknowledge you on my blog, from now, thanks in advance. Luck & greetsFedekerplunkhttps://www.blogger.com/profile/17174626617025718322noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-34377091631865009452019-07-17T12:13:02.547+09:002019-07-17T12:13:02.547+09:00You're right. The method I mentioned only work...You're right. The method I mentioned only works for the now-older style default templates. The newer post-2018 templates use a different class just as your post outlines. Good resource so I'll make it a link here: <a href="https://blog.bebyk.me/2019/07/font-size-notable-mobile.html" rel="nofollow">https://blog.bebyk.me/2019/07/font-size-notable-mobile.html</a>Sam Nordberghttps://www.blogger.com/profile/09860631468502504144noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-46706709861084227422019-07-14T08:29:39.552+09:002019-07-14T08:29:39.552+09:00Hey Sam! Thanks for sharing. You article help me. ...Hey Sam! Thanks for sharing. You article help me. However, for Notable theme it's not .mobile in CSS code. I posted an instruction of how to change body font size for those who has Notable: https://blog.bebyk.me/2019/07/font-size-notable-mobile.htmlАртем Бебикhttps://www.blogger.com/profile/12237779728802486392noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-62951742693822390642018-10-14T00:38:48.714+09:002018-10-14T00:38:48.714+09:00That will adjust the size of the container that th...That will adjust the size of the container that the thumbnail is in. To style the thumbnail image itself, you need this:<br /><br />.mobile-index-thumbnail img {width:640px;}<br /><br />But do you want your mobile thumbnail stretched that big? On mobile that would look terrible. <br /><br />Another issue is that the mobile thumbnail images are generated at 72x72 px. So even if you change its size in CSS, the image itself doesn't change size. As a result, it will end up looking fuzzy and unclear. You'd have to edit the blog template itself if you really want larger images on mobile. To do that, check out this tutorial; it may be what you're looking for:<br />https://www.carrieloves.com/2016/04/how-to-increase-the-size-of-blogger-thumbnails-mobile-template/Sam Nordberghttps://www.blogger.com/profile/09860631468502504144noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-30318140970151013822018-10-13T23:29:03.862+09:002018-10-13T23:29:03.862+09:00how do u customize blogger thumbnail?
i used this
...how do u customize blogger thumbnail?<br />i used this<br />.mobile-index-thumbnail {<br />width: 640px;<br />}<br /><br />but its not workingYinyinhttps://www.blogger.com/profile/09520849771206731274noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-4261588981689731212018-04-11T21:23:55.875+09:002018-04-11T21:23:55.875+09:00Thanks dudeThanks dudeAnonymousnoreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-15930584716720075092018-04-07T16:53:19.361+09:002018-04-07T16:53:19.361+09:00Glad it helped. Glad it helped. Sam Nordberghttps://www.blogger.com/profile/09860631468502504144noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-26250786670261206282018-04-04T06:25:22.867+09:002018-04-04T06:25:22.867+09:00Thanks very much for this tutorial sir,, it was a ...Thanks very much for this tutorial sir,, it was a life saver for my <a href="http://konbido.blogspot.com" rel="nofollow">blog</a>Oluwasegunhttps://www.blogger.com/profile/06878095638816905685noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-60395387148974126022017-12-09T23:37:49.781+09:002017-12-09T23:37:49.781+09:00In the Blogger template editor, set the font size ...In the Blogger template editor, set the font size you want for desktop (non-mobile view).<br /><br />Then add this code in the "Add CSS" section. Change the size to whatever number you want:<br /><br />.mobile .post-body {font-size: 10px;}<br />Sam Nordberghttps://www.blogger.com/profile/09860631468502504144noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-52928521818475457872017-12-09T23:36:24.880+09:002017-12-09T23:36:24.880+09:00If just for the mobile view, you can add ".mo...If just for the mobile view, you can add ".mobile" before the CSS for whichever element you want to change. For example, to change the size of the post text, use:<br /><br />.mobile .post-body {font-size: 40px;}Sam Nordberghttps://www.blogger.com/profile/09860631468502504144noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-34005972113790125112017-12-09T23:33:45.850+09:002017-12-09T23:33:45.850+09:00What's your blog? Maybe I can take a look.What's your blog? Maybe I can take a look.Sam Nordberghttps://www.blogger.com/profile/09860631468502504144noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-45119499097396100932017-12-09T03:03:15.214+09:002017-12-09T03:03:15.214+09:00Hello,
Could you help me with a custom CSS code o...Hello,<br /><br />Could you help me with a custom CSS code of how to make text in mobile view not to appear HUGE on mobile devices without affecting text size in PC or tablet view?knowledge Squarehttps://www.blogger.com/profile/15815258106940444457noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-87530269821563231592017-12-05T17:14:41.767+09:002017-12-05T17:14:41.767+09:00How to change font size for blogger mobile site?How to change font size for blogger mobile site?슈주야❤https://www.blogger.com/profile/02562000856619516662noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-33384677735212336592017-11-24T17:02:00.561+09:002017-11-24T17:02:00.561+09:00I'm not 100% sure but I'd imagine somethin...I'm not 100% sure but I'd imagine something similar would work as long as you have the correct URL of the font file. The CSS might need to be modified though. Sam Nordberghttps://www.blogger.com/profile/09860631468502504144noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-29753742263711061772017-11-06T18:49:18.933+09:002017-11-06T18:49:18.933+09:00Hi i'm attempting to apply this technique howe...Hi i'm attempting to apply this technique however the distinction is that i'm not utilizing a google textual style, is there any approach to do a similar thing when I'm utilizing a textual style of which I have the url not on that site? It's appearing on desktop yet not on portable Much obliged!!Celebrity Snapchat Usernameshttps://www.blogger.com/profile/13614307644661900791noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-59300152655306863162017-10-05T22:54:55.508+09:002017-10-05T22:54:55.508+09:00I don't see where you added the custom font. I...I don't see where you added the custom font. It looks like you're using just standard Blogger fonts even on desktop. By the way it looks like you're using the Blogger Emporio theme. These new themes don't use separate templates for desktop/mobile, so there will be no difference between them. In other words, my post here is only for the older themes. The 4 newer themes fundamentally don't have the mobile font problem. <br /><br />Now if you're still trying to add a custom font, that might be tricky. The post you linked to is giving instructions for the older templates. Emporio is different. It looks like you're using the Ubuntu font on it, which will appear both desktop and mobile. Sam Nordberghttps://www.blogger.com/profile/09860631468502504144noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-17852202471414682332017-10-02T04:58:49.383+09:002017-10-02T04:58:49.383+09:00This is the blog: https://got7-italia.blogspot.it/...This is the blog: https://got7-italia.blogspot.it/ I already applied this guide to use a custom font and it works when I apply it, but only on desktop. (https://goo.gl/dDv1WR) Thank you for your time! :)Anonymoushttps://www.blogger.com/profile/14306278812690289596noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-87765863522711641182017-10-01T23:44:18.678+09:002017-10-01T23:44:18.678+09:00If you have the font URL, the same thing should wo...If you have the font URL, the same thing should work. It may depend on the font though. What's your blog address? I'm no expert but I could take a look. Sam Nordberghttps://www.blogger.com/profile/09860631468502504144noreply@blogger.comtag:blogger.com,1999:blog-4164152170292572929.post-25216728013177373332017-09-29T03:23:15.527+09:002017-09-29T03:23:15.527+09:00Hello i'm trying to apply this method but the ...Hello i'm trying to apply this method but the difference is that i'm not using a google font, is there any way to do the same thing when I'm using a font of which I have the url not on that site? It's showing up on desktop but not on mobile Thank you!!Anonymoushttps://www.blogger.com/profile/14306278812690289596noreply@blogger.com