Metro Pro Mobile Responsive Issues

[whiskymac]

Hey everyone, yet another question lol!

I'm working on the mobile side of our website and there are a few issues that I hope someone can help with.

1 - The Logo is being cut off in the ipad & iphone - how do I solve this - is this in the media query section and if so where and what should I be changing it too?

2 - The entire page has shifted to the left on ipad devices making the right hand side have loads of white space

3 - The pictures which are horizontally aligned need to be vertically aligned when viewed on mobile

Sorry to be a pest but if someone could shed a very big light on this that would be excellent and much appreciated.

Thanks 😀

http://christmastree1.underthechristmastree.co.uk/

[James]

hi whiskymac,

for the logo you could reduce the background size to 250px

yes you need to edit the media queries, the very last one is for mobiles and add

.site-title a {
background-size: 250px;
}

the second question, you have the main content set to 630px wide

which is'nt wide enough to fill the screen for ipad, i also noticed a large gap between the content and sidebar when viewing on a desktop, you would need to make the content wider that 630px and then go down in size in media queries.

for the images not lining up, you seem to have used a visual editor or something? which has added lots of it's own styles, this is preventing the images from moving to a single column, quite a bit of work would need to be done in order to get those images to work on mobiles.

you would need to override the css in the media queries for that too.

[whiskymac]

Hi Jamie!

Thanks for getting back to me on this, I will give this all a go and see how I do lol!

Thanks again 😀

[Author]

Posts