http://www.kriesi.at/support/topic/font-size-adjustments-within-responsive-layouts Support Forum - Topic: Font Size Adjustments WIthin Responsive Layouts en-US Fri, 24 May 2013 03:42:22 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/font-size-adjustments-within-responsive-layouts#post-103027 Mon, 25 Mar 2013 21:11:51 +0000 PearlsIntl 103027@http://www.kriesi.at/support/ <p>Thanks, just what I needed! </p> http://www.kriesi.at/support/topic/font-size-adjustments-within-responsive-layouts#post-102884 Mon, 25 Mar 2013 07:28:47 +0000 Dude 102884@http://www.kriesi.at/support/ <p>You can use media queries to make it responsive - i.e. use following code:</p> <pre><code>#top .main_menu ul.menu li &gt; a { font-size: 16px; } #top .sub_menu ul.menu li &gt; a { font-size: 14px; } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (max-width: 989px) { #top .main_menu ul.menu li &gt; a { font-size: 14px; } #top .sub_menu ul.menu li &gt; a { font-size: 12px; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { #top .main_menu ul.menu li &gt; a { font-size: 12px; } #top .sub_menu ul.menu li &gt; a { font-size: 10px; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { #top .main_menu ul.menu li &gt; a { font-size: 11px; } #top .sub_menu ul.menu li &gt; a { font-size: 9px; } }</code></pre> <p>and adjust the font size values. </p> http://www.kriesi.at/support/topic/font-size-adjustments-within-responsive-layouts#post-102777 Sat, 23 Mar 2013 21:24:19 +0000 PearlsIntl 102777@http://www.kriesi.at/support/ <p>I'm experiencing the same issue, and I'm afraid your video might be a little over my head. </p> <p>I got to the part where you changed the font size, but the CSS that showed up looked like this:</p> <p>media="screen"<br /> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {<br /> margin: 0;<br /> padding: 0;<br /> border: 0;<br /> font-size: 100%;<br /> font: inherit;<br /> font-family: inherit;<br /> font-size: 100%;<br /> font-style: inherit;<br /> font-variant: inherit;<br /> font-weight: inherit;<br /> line-height: inherit;<br /> vertical-align: baseline;<br /> }</p> <p>I'm not really sure what to do next.</p> <p>This is what I'm using right now (added to Quick CSS), but as is the case with blospa, the text is not responsive and turns into an unattractive jumble when I resize the screen.:</p> <p>#top .main_menu ul.menu li &gt; a {<br /> font-size: 16px; style: helvetica;<br /> }</p> <p>#top .sub_menu ul.menu li &gt; a {<br /> font-size: 14px; style: helvetica;<br /> }</p> <p>Please let me know how I can make this responsive. Thanks! </p> http://www.kriesi.at/support/topic/font-size-adjustments-within-responsive-layouts#post-100554 Mon, 11 Mar 2013 10:28:40 +0000 Nick 100554@http://www.kriesi.at/support/ <p>Hi,</p> <p>You have a large number of various sized texts on the menus and other place. Would you take a screen shot and circle the items you want to enlarge or change and add into what. You can use imgur.com if you want to add the screenshot and link to it from here.</p> <p>I use Chrome Dev Tools for the Chrome browser and it instantly tells me the css . You should give it a try its very easy to use and will put you in control. I made a quick video how to use it, and then i just copy the css it tells me to copy and add to my css/custom.css <a href="https://docs.google.com/file/d/0B8hqGBMSfHtKNE51dUJPZGJwdlE/edit?usp=sharing" rel="nofollow">https://docs.google.com/file/d/0B8hqGBMSfHtKNE51dUJPZGJwdlE/edit?usp=sharing</a></p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/font-size-adjustments-within-responsive-layouts#post-100381 Sun, 10 Mar 2013 00:23:42 +0000 biospa 100381@http://www.kriesi.at/support/ <p>I've been trying to increase the font size of the main menu items, the blog text, post title, slideshow caption title, slideshow call to action button label text. </p> <p>Here's the code I've tried within Quick CSS but sizes are retained when screen sizes reduce which makes the page look awkward.</p> <p>body {<br /> font-size: 19px;<br /> color: #333333;<br /> }</p> <p>#top .post-title {<br /> font-size: 30px;<br /> }</p> <p>#top .main_menu ul.menu li &gt; a {<br /> font-size: 16px;<br /> }</p> <p>What is the correct way to adjust the font sizes listed above so they reduce automatically during responsive adjustments? </p>