Changing/addressing responsive font and colours

When resizing the site or looking at it on different devices (with smaller screens) the changes to the font and colours made through the Upfront editor don't appear to be cascading down to the responsive format?
Can you advise how I would ensure the same changes made to the standard view site apply to all responsive breakpoints?

Thanks in advance

AJ

  • Alex

    I've managed to over ride / address 3 elements see below:

    `.upfront-output-object p
    {
    font-family: Josefin Sans,sans-serif,display;
    font-weight: inherit;
    font-style: inherit;
    font-size: 15px;
    line-height: 2em;
    color: #005171;
    }
    .upfront-output-object h2
    {
    font-family: "Josefin Sans",sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 38px;
    line-height: 1.4em;
    color: #04658c;
    }
    .upfront-output-object h3
    {
    font-family: "Josefin Sans",sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 30px;
    line-height: 1.3em;
    color: #ffffff;
    }
    .upfront-output-object h1
    {
    font-family: "Josefin Sans",sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 42px;
    line-height: 1.4em;
    color: #005171;
    }

    Is there anyway to specify these particulat contols to responsive mode only so that any changes made to this code does not impact on the full size page view?

    Also I am struggling to find the 'object' syntax for bulleted lists.

  • Jude

    Hey Alex

    Sorry about the delay here !

    Yeah you can always use CSS and override pretty much anything. I meant its not automatically possible from the editor.

    Also here is the CSS you are using in a better formatted and responsive list.

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .upfront-output-object p,
    .upfront-output-object h2,
    .upfront-output-object h3,
    .upfront-output-object h1,
    .upfront-output-object ul,
    .upfront-output-object li
    {
    font-family: "Josefin Sans",sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 42px;
    line-height: 1.4em;
    color: #005171;
    }
    
    }
    
    /* Smartphones (landscape) ----------- */
    @media only screen and (min-width : 321px) {
    .upfront-output-object p,
    .upfront-output-object h2,
    .upfront-output-object h3,
    .upfront-output-object h1,
    .upfront-output-object ul,
    .upfront-output-object li
    {
    font-family: "Josefin Sans",sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 42px;
    line-height: 1.4em;
    color: #005171;
    }
    
    }
    
    /* Smartphones (portrait) ----------- */
    @media only screen and (max-width : 320px) {
    .upfront-output-object p,
    .upfront-output-object h2,
    .upfront-output-object h3,
    .upfront-output-object h1,
    .upfront-output-object ul,
    .upfront-output-object li
    {
    font-family: "Josefin Sans",sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 42px;
    line-height: 1.4em;
    color: #005171;
    }
    
    }
    
    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .upfront-output-object p,
    .upfront-output-object h2,
    .upfront-output-object h3,
    .upfront-output-object h1,
    .upfront-output-object ul,
    .upfront-output-object li
    {
    font-family: "Josefin Sans",sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 42px;
    line-height: 1.4em;
    color: #005171;
    }
    
    }
    
    /**********
    iPad 3
    **********/
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    .upfront-output-object p,
    .upfront-output-object h2,
    .upfront-output-object h3,
    .upfront-output-object h1,
    .upfront-output-object ul,
    .upfront-output-object li
    {
    font-family: "Josefin Sans",sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 42px;
    line-height: 1.4em;
    color: #005171;
    }
    
    }
    
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
    }
    /* Desktops and laptops ----------- */
    @media only screen  and (min-width : 1224px) {
    /* Styles */
    }
    
    /* Large screens ----------- */
    @media only screen  and (min-width : 1824px) {
    .upfront-output-object p,
    .upfront-output-object h2,
    .upfront-output-object h3,
    .upfront-output-object h1,
    .upfront-output-object ul,
    .upfront-output-object li
    {
    font-family: "Josefin Sans",sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 42px;
    line-height: 1.4em;
    color: #005171;
    }
    
    }
    
    @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    .upfront-output-object p,
    .upfront-output-object h2,
    .upfront-output-object h3,
    .upfront-output-object h1,
    .upfront-output-object ul,
    .upfront-output-object li
    {
    font-family: "Josefin Sans",sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 42px;
    line-height: 1.4em;
    color: #005171;
    }
    
    }

    This should target pretty much any device and apply the font the way you wanted. I'll be around if you need more help. Also the latest version of upfront is out with a bunch of improvements/fixes. You should consider upgrading soon.

    Cheers
    Jude

  • Jude

    Howdy Alex

    Ouch, sorry about that. Will look into this and sort it out for you in real time. Can you please take a backup of the site, update to the latest version of both Upfront and Panino and give me support access ?

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    I can take a look and ensure its fixed and working as intended. Sorry about not following up immediately, I assumed you were all set here when I did not get a response to my last reply.

    Cheers
    Jude

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.