Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #21075

    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.

    Here’s the code I’ve tried within Quick CSS but sizes are retained when screen sizes reduce which makes the page look awkward.

    body {

    font-size: 19px;

    color: #333333;

    }

    #top .post-title {

    font-size: 30px;

    }

    #top .main_menu ul.menu li > a {

    font-size: 16px;

    }

    What is the correct way to adjust the font sizes listed above so they reduce automatically during responsive adjustments?

    #110358

    Hi,

    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.

    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 https://docs.google.com/file/d/0B8hqGBMSfHtKNE51dUJPZGJwdlE/edit?usp=sharing

    Thanks,

    Nick

    #110359

    I’m experiencing the same issue, and I’m afraid your video might be a little over my head.

    I got to the part where you changed the font size, but the CSS that showed up looked like this:

    media=”screen”

    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 {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    font-family: inherit;

    font-size: 100%;

    font-style: inherit;

    font-variant: inherit;

    font-weight: inherit;

    line-height: inherit;

    vertical-align: baseline;

    }

    I’m not really sure what to do next.

    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.:

    #top .main_menu ul.menu li > a {

    font-size: 16px; style: helvetica;

    }

    #top .sub_menu ul.menu li > a {

    font-size: 14px; style: helvetica;

    }

    Please let me know how I can make this responsive. Thanks!

    #110360

    You can use media queries to make it responsive – i.e. use following code:

    #top .main_menu ul.menu li > a {
    font-size: 16px;
    }
    #top .sub_menu ul.menu li > 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 > a {
    font-size: 14px;
    }

    #top .sub_menu ul.menu li > 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 > a {
    font-size: 12px;
    }

    #top .sub_menu ul.menu li > 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 > a {
    font-size: 11px;
    }

    #top .sub_menu ul.menu li > a {
    font-size: 9px;
    }
    }

    and adjust the font size values.

    #110361

    Thanks, just what I needed!

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Font Size Adjustments WIthin Responsive Layouts’ is closed to new replies.