Agency Pro Responsive Site

[elkiehound]

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

[elkiehound]

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

[elkiehound]

Any clues folks ?

[dev]

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

[elkiehound]

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.

[Author]

Posts