Agency Pro Responsive Site

Community Forums Forums Design Tips and Tricks Agency Pro Responsive Site

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  elkiehound 9 months ago.

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

    elkiehound
    Participant
    Post count: 51

    Looking for some help on specific CSS changes to make this site (Agency Pro) responsive. I think the top widget is the culprit, however not certain.

    http://emlagent.smartwithtech.com

    Thanks

    #85842

    elkiehound
    Participant
    Post count: 51

    I should mention that the top widget is a combination of an image and a mail chimp form.

    #86129

    elkiehound
    Participant
    Post count: 51

    Any clues folks ?

    #86190

    dev
    Participant
    Post count: 458

    Make a copy of your header logo file but make it 320px wide and name it something like eml-logo-320.png. Upload it to your media lib.

    Then use code like this in CSS:

    @media only screen and (max-width: 480px) {
    
    .header-image .title-area {
    background-image: url(http://xxxxxx.com/wp-content/uploads/eml-logo-320.png) !important;
    background-repeat: no-repeat;
    height: 51px;
    min-height: 0px;
    }
    .site-header {
    height: 51px; 
    }
    }

    You might have to adjust the height to what you want.

    Should work fine.

    If I live to be 100 years old I will never understand why WP has not figured out how to make a header graphic responsive without us having to muck around with obtuse media queries.

    There was a nice plugin for this done by Nick, but he has not updated it TTBOMK.

    Dev
    NewMedia Website Design

    #87297

    elkiehound
    Participant
    Post count: 51

    Thanks.

    That got me started. I am almost there.

    Need to shrink the black background on the 320 version. (The space between the logo and the Nav).

    Any help is appreciated.

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

You must be logged in to reply to this topic.