hibbsy78

iPad Display

15 posts in this topic

Hi everyone,

I recently changed the page layout to full width 'Responsive with % width' to take advantage of wide screen monitors but this seems to have caused the site to display 'narrow' on the iPad?

Any ideas on how to enable the display to use the full width as seen with the Charity Water site...?

http://hibbslupustrust.org

Posted Image
Posted Image
Posted Image

Thanks!



Sent from my iPad using Tapatalk HD

Share this post


Link to post
Share on other sites
I have the global content width set to 960px... Is this the best option?

What is the optimal width???

Posted Image


Sent from my iPad using Tapatalk HD

Share this post


Link to post
Share on other sites

Hi,

 

If you are using Responsive with Percent, as your image shows,  then you should be okay, but if it's not working on iPad only, then clearly this is a browser-specific issue.  I think our Browser Specific CSS plugin might help.  I suspect you need to set the CSS for iPad to width: 100%;  but not sure what element.  I don't have an iPad, so unable to test it. Apologies for that.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Thanks Rob.

 

Anyone any ideas on the browser specific css? 

 

Cant understand why this would be an issue on the iPad. I have tested all other main browsers and it looks fine!

Share this post


Link to post
Share on other sites

Every browser has its own peculiarities.  Each are written by different teams of developers with different language.  As a result, it's perfectly reasonable to see one of them react to something differently.  IE, for example, is notorious for not handling things the same way as Firefox or Chrome.

 

The CSS is essentially the same as in the other browsers, but if copied and prefixed with the proper code for the specific browser, and adjusted, it can help show or hide elements in that browser only.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Anyone else had this issue when using Responsive with Percent?

 

If I switch to Responsive with Pixel width that looks ok on the iPad but no so much standard PC/MAC..

Share this post


Link to post
Share on other sites
In order to 'resolve' the iPad display issue I have set this back to Responsive with Pixel.

This issue I have with this is the amount of white space when viewing the site on wide screens such as an iMac, which is why I set it to Responsive with Percent in the fist place - see screen shot:

Posted Image


Surely there is a way to get this to the optimal display across all platforms!!




Sent from my iPad using Tapatalk HD

Share this post


Link to post
Share on other sites
Checking www.pagelines.com via the iPad & iMac this is exactly what I want to achieve but for some reason I get large margins on the iPad?

iPad:
Posted Image

iMac:
Posted Image






Sent from my iPad using Tapatalk HD

Share this post


Link to post
Share on other sites

Hi there

 

The Ipad will have two different width settings depending if it's set to portrait or landscape. The responsive mode will adjust the layout to best fit the display, if set to responsive with pixel width this will respond on the main content area. The responsive with percentage will be the full width of the site. The will be scaled to fit the layout of the ipad depending on whether it is portrait or landscape.

 

If you want to keep the desktop view as it is and only adjust the ipad view you can adjust using css.

 

The browser specific plugin can be downloaded at - http://www.pagelines.com/store/plugins/browser-css/

 

The guide to using the plugin and the specific classes to provide for each browser can be found at - http://support.pagelines.me/docs/plugins/browser-specific-css/

 

If you've not used css before, check out the overview at - http://support.pagelines.me/docs/customization/custom-css/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Thanks Rob.

 

I'm not familiar with css at all.

 

Would this be whatI need?

.ipad {
  margin-right: 5px;
  margin-left: 5px;
}

Share this post


Link to post
Share on other sites

Hi,

 

Presently, the PageLines website is in our new product, which isn't due for release till July 24th.

 

In our Store (Dashboard > PageLines > Store > Plugins , under the free plugins),  we have Browser Specific CSS, which lets you customize the code for each element.  If you have Firebug for Firefox or use Chrome's Inspection tools, you can see the CSS for any element, then copy it.

 

So, if you see something you need to modify, just fit it within the code you need, prefaced with the custom code.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Thanks Rob,

 

I know the pagelines site has changed to DMS but the principle is the same that I'd expect the site to load to the full width of the iPad without having to add CSS and not narrow as it does. But if I have to add CSS then that is what I will have to do but can you help with that? I cant workout what the margins are even using firebug....

Share this post


Link to post
Share on other sites

The Pagelines Framework is responsive from the general settings, if you're looking to adjust the mobile/ipad layout further than what's displayed from the responsive layout then you will need to use additional css unfortunately.

 

Yes using the ipad tag once the plugin is installed will affect the layout. If you want to go further and effect the layout depending on whether it is portrait or landscape check out - http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ which provides the additional css codes to tweak the layout.

 

Full width sections will apply the background of each area to the full width of the layout, anything in the content area is contained inside the main content container, so each section will span full width. The background color for example will span the entire width of the page, but the actual content for the section will not, it will remain inside the main content container.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Thanks James.

In portrait mode the site adjusts correctly but in landscape it doesn't adjust to the full width which doesn't seem correct to me?

Portrait:
Posted Image

Landscape:
Posted Image




Sent from my iPad using Tapatalk HD

Share this post


Link to post
Share on other sites

Hi there,

 

In landscape mode it will look more like the desktop version, albeit shrunk down a little bit. The site won't go past the maximum width set etc.

 

For example on the desktop version of the site i see - http://screencast.com/t/BxcWVv08l

 

This won't be too far off the ipad display ( i don't have an ipad unfortunately to check ) but that screenshot is off of a macbook pro.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now