Issue with responsiveness in Executive theme

Community Forums Forums Design Tips and Tricks Issue with responsiveness in Executive theme

This topic is: not resolved

This topic contains 7 replies, has 2 voices, and was last updated by  rfmeier 10 months, 2 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #45620

    audigy
    Participant
    Post count: 7

    Hello all,

    Having a problem getting my logo to change based on the size of the screen (responsive).

    Here is the url

    http://www.upallmorning.com

    I thought i was doing this right but apparently I am not. What i want to happen is that as the screen is condensed, to center my logo and make it smaller. I created a mobile version of my logo as well, but even though i see it in the code it doesn’t seem to be showing up properly.

    Can anyone help?

    Thank you

    William

    http://www.upallmorning.com
    #45660

    rfmeier
    Participant
    Post count: 518

    Hello,

    I took a quick look at this in Chrome and here is what I came up with;

    /* line ~2209 */
    #header{
        padding-top: 30px;
        background-position: center 20px !important;
    }

    Here is a preivew;

    https://www.diigo.com/item/image/40chg/35oh

    I hope this helps.


    Ryan Meier – Web Developer @ Solid Interactive
    Twitter

    #45661

    audigy
    Participant
    Post count: 7

    Cool. Would i just add a similar line for each of the breakpoints in the code for various resolutions?

     

    #45662

    rfmeier
    Participant
    Post count: 518

    You can actually set it at the largest resolution you want to see this behavior. As the screen gets smaller, it will just inherit the larger resolution css rules.

    Media query css rules are really just overrides of the default styling.


    Ryan Meier – Web Developer @ Solid Interactive
    Twitter

    #45666

    audigy
    Participant
    Post count: 7

    So if i wanted it centered at tablet level and of course mobile, i’d just add these lines to each condition besides the highest res one?

    #45667

    rfmeier
    Participant
    Post count: 518

    Exactly. If that doesn’t feel right to you, move it down to the next resolution. Every other resolution below it will inherit.


    Ryan Meier – Web Developer @ Solid Interactive
    Twitter

    #45669

    audigy
    Participant
    Post count: 7

    Works like a charm, thank you!

    #45670

    rfmeier
    Participant
    Post count: 518

    You are welcome. I am glad I could help.


    Ryan Meier – Web Developer @ Solid Interactive
    Twitter

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

You must be logged in to reply to this topic.