Header Image/Header Right Metro Pro/mobile menu

[dunjoko]

Hi, just launched a new website with Metro Pro Theme and I have responsive issues in the header on the ipad in portrait view, its chopping off the logo, landscape is fine, and its responsive on an iphone both portrait and landscape, am i missing or do i need another media query ?

Also the right side of the header, its floating right which is fine on a desktop, i would like it to centre on ipads and iphones to give the phone number some more space and now wrap the line.

The menu is another issue, ive tried to follow two tutorials now on getting it to show as a mobile menu, but i keep getting errors in the files, one tutorial in particular it appeared to have worked when i viewed it live on my wamp server, but not in design palette pro, which was confusing.

Any suggestions how i can clean this up a bit.

Just love this theme though, no issues other than this.

Thanks

http://www.turtlenursery.com.au

[Jeremy Holden]

You can clean it all in the media queries you have already.

Unfortunately I can't direct you to the right place because your css is all showing as one line.

The header image issue can be fixed with:

.site-header .widget-area {	width: 320px;}

and

.title-area {width: 520px;}

Both under:

@media only screen and (max-width: 1139px)

---

Website design and Genesis customization
jeremyholden.me

[dunjoko]

Thankyou that worked.

One more question pls, again on ipad in landscape view, the content and sidebar sizes are wrong, the content is pushing the sidebar below, which is fine, but the content is not filling in the gap left from the sidebar on the right, and the sidebar is remaining on the right, not filling the left.

The slider also remains the exact same size as the content, in portrait view all the content/sidebar/slider are all adjusting.

[Jeremy Holden]

It's in the same media query -

change this width from 580px to 100%

.footer-widgets-1,.footer-widgets-2,.footer-widgets-3,.home-middle-left,.home-middle-right,.sidebar-primary,.title-area{width: 100%;}

and this width from 520px to 100%

.content{width: 100%;}

---

Website design and Genesis customization
jeremyholden.me

[dunjoko]

Thankyou Jeremy, one last thing, or even can you point me to a tutorial

The right widget area in the header, I would like to get it to centre on the ipad and iphones, the ipad the widget just drops below and remains right and the same on the iphone.

The other is a mobile menu, ive tried a couple of tutorials which didn't work, I checked and double checked the process but still failed.

[Jeremy Holden]

You can add {text-align: center;} to that class in the media query.

If you use firebug for firefox element inspector in Chrome you can find and then try making any of these changes and see it live before actually making any edits to your css. Also if you re-size your browser window you can see how your site is going to respond to smaller width screens. Then you can find what changes you want to make with the inspector.

Here are a couple tutorials:

http://www.jasonbobich.com/web-design/how-to-make-your-own-css-customizations-easily-with-firebug/

http://www.studiopress.com/tips/using-firebug.htm

As far as your mobile menu goes this process has worked for me:

http://wpsites.net/web-design/genesis-mobile-responsive-nav-menu-sub-menu/

---

Website design and Genesis customization
jeremyholden.me

[Author]

Posts