IPad

[Gary Henderson]

Hi

My site is starting to come together really well on my PC but when I look at it on the IPad it doesn’t look as good.

On the home page http://westofscotlandchauffeurdrive.co.uk/wordpress/ the menu goes onto 2 lines.

On these pages the pictures are not embedded into the pages:
http://westofscotlandchauffeurdrive.co.uk/wordpress/?page_id=63
http://westofscotlandchauffeurdrive.co.uk/wordpress/?page_id=8
http://westofscotlandchauffeurdrive.co.uk/wordpress/?page_id=13

On the vehicles page http://westofscotlandchauffeurdrive.co.uk/wordpress/?cat=3 the portfolio items don’t look like the PC, on the PC it is 2 rows of 4 and a row of 1.

Also the tariff page is a bit messed up on the IPad http://westofscotlandchauffeurdrive.co.uk/wordpress/?page_id=14

A bit disappointing, is there anything I can fix?

Thanks,
Gary

[Sushil Adhikari]

Hi Gary… unfortunately I do not have an iPad yet, at least for a couple more months so I won’t be able to really view your site and pages in an actual tablet; I generally use an online tool to test for simulation of different devices. The site looks nice actually and like the fact there’s a thumbnail on the testimonials. However, to get to your issues at hand.

Your menu goes to a second line because it has a number of menu links (items), enough that it’s does that just before it reaches the point it changes to a mobile menu. Every site will have varying widths and number of items and a responsive theme (for the most part) is set to change at incremental browser widths. It’s especially difficult to achieve when menus are located to the right of a logo. Hard to explain but the only way to change what is happening for you starts to get into customization of the “media queries” (the point of when things re-size and re-position based on what device is being used).

For the images on your pages breaking out and not properly re-sizing, you need to remove the inline styling that you have on the tags:

style="max-width: 357px;max-height: 286px;"

Not sure why you have inline styling, but this is conflicting with the theme’s responsiveness. I tried this in my browser by removing the styling and then the images properly re-sized as the window decreased in size.

For the portfolio…please provide more details, not quite sure what you mean doesn’t look like the PC?

As for your tariff page…. the first table set you have, you made customization to the structure which breaks the responsive layout, which is why the other ones in the page are ok but the first set isn’t. That one I cannot help because of the custom changes. I would also recommend not having long strings of text for the buttons on the tables because on mobile viewing, what should be a typical button, doesn’t wrap correctly.

However, I did notice a couple other things that I can make adjustments to, one being the portfolio menu doesn’t wrap nicely on smaller devices, and I might be able to tweak a couple other things.

[Gary Henderson]

Hi

Thanks for the detailed reply. I will tweak the pricing and the images, the inline styling is created by the widgets as I set the image size on the widget. I will upload the image with the correct size and I will remove the styling.

On the PC the portfolio has 2 nice rows of 4 vehicles, the final row has 1 vehicle but its aligned right , can I make it left? On the IPad the row with 1 vehicle appears between the 2 rows of 4 and also aligned right.

The site just seems really big on the IPad. What CSS properties set the menu items size and the alignment of the menu?

Thank,
Gary

[Gary Henderson]

Also when I go to customise my site on the dashboard using the IPad the preview on the right looks how I would expect the site to look on the IPad version but the IPad version is much bigger and just isn’t responding I think.

Thanks

[Sushil Adhikari]

Hi Gary…. sorry for late reply here. I would recommend not using that image widget if there is no way to remove the inline style. Best would be to use a text widget and do your own html to load the image, this way you can manage what the code is. The other method is to use a plugin widget called Black Studio TinyMCE widget which is a full editor based widget and lets you insert images, at which point you can edit the image code.

For the portfolio, I think I know what the extra one is…. the portfolio works off the same method as a typical blog category does with posts and when your settings for the blog is set to show a certain number of posts. But there is something i noticed that I made a note of, is that you have one thumbnail that is a bit taller and it’s pushing another item down on to another row by itself. I will have to find a solution for that should someone use different height thumbnails….although keeping the thumbnails all the same size will help it be consistent.

For the menu font size, you will find the css for this is in the style.css file around line 1953 and looks like this:

[code type=css]
.main-navigation li {
background-image:none;
margin-top: 20px;
margin-top: 1.250rem;
padding-left:0;
font-family: ubuntu,sans-serif;
font-size: 15px;
font-size: 0.938rem;
line-height: 1.42857143;
}

I use two values, px for older browsers and rem for newer, but you can remove the rem if you prefer px sizes. This online tool easily converts from px to em (also rem) and vice versa: http://www.pxtoem.com

How the site looks in ipad again is hard for me to see it until I get an iPad for myself later. It could have something to do with the browser (I’m assuming it’s the safari browser) which may display things slightly different or in different sizes…the joys of trying to design for all browsers and devices; not an easy task. If possible perhaps take a photo of the screen of your ipad and send it to me via email and I will get a better idea.

[Author]

Posts