Jump to content


Photo
- - - - -

iPad Display


  • Please log in to reply
14 replies to this topic

#1 hibbsy78

hibbsy78

    Advocate

  • Members

  • 307 posts
  • LocationStaffordshire
  • Framework Version:DMS 2.1.8
  • Country: Country Flag

Posted 09 July 2013 - 08:47 AM

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...?

Please Login or Register to see this Hidden Content



Posted Image
Posted Image
Posted Image

Thanks!



Sent from my iPad using Tapatalk HD

#2 hibbsy78

hibbsy78

    Advocate

  • Members

  • 307 posts
  • LocationStaffordshire
  • Framework Version:DMS 2.1.8
  • Country: Country Flag

Posted 09 July 2013 - 09:02 AM

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

#3 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 09 July 2013 - 01:53 PM

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

Please Login or Register to see this Hidden Content

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.



#4 hibbsy78

hibbsy78

    Advocate

  • Members

  • 307 posts
  • LocationStaffordshire
  • Framework Version:DMS 2.1.8
  • Country: Country Flag

Posted 09 July 2013 - 03:48 PM

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!



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 09 July 2013 - 05:26 PM

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.



#6 hibbsy78

hibbsy78

    Advocate

  • Members

  • 307 posts
  • LocationStaffordshire
  • Framework Version:DMS 2.1.8
  • Country: Country Flag

Posted 10 July 2013 - 07:00 AM

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..



#7 hibbsy78

hibbsy78

    Advocate

  • Members

  • 307 posts
  • LocationStaffordshire
  • Framework Version:DMS 2.1.8
  • Country: Country Flag

Posted 10 July 2013 - 09:00 AM

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

#8 hibbsy78

hibbsy78

    Advocate

  • Members

  • 307 posts
  • LocationStaffordshire
  • Framework Version:DMS 2.1.8
  • Country: Country Flag

Posted 10 July 2013 - 10:46 AM

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

#9 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 July 2013 - 10:47 PM

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 -

Please Login or Register to see this Hidden Content

 

The guide to using the plugin and the specific classes to provide for each browser can be found at -

Please Login or Register to see this Hidden Content

 

If you've not used css before, check out the overview at -

Please Login or Register to see this Hidden Content



#10 hibbsy78

hibbsy78

    Advocate

  • Members

  • 307 posts
  • LocationStaffordshire
  • Framework Version:DMS 2.1.8
  • Country: Country Flag

Posted 11 July 2013 - 05:22 AM

Thanks Rob.

 

I'm not familiar with css at all.

 

Would this be whatI need?

Please Login or Register to see this Hidden Content



#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 July 2013 - 04:15 PM

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.



#12 hibbsy78

hibbsy78

    Advocate

  • Members

  • 307 posts
  • LocationStaffordshire
  • Framework Version:DMS 2.1.8
  • Country: Country Flag

Posted 11 July 2013 - 04:41 PM

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....



#13 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 July 2013 - 07:50 PM

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 -

Please Login or Register to see this Hidden Content

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.



#14 hibbsy78

hibbsy78

    Advocate

  • Members

  • 307 posts
  • LocationStaffordshire
  • Framework Version:DMS 2.1.8
  • Country: Country Flag

Posted 11 July 2013 - 08:05 PM

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

#15 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 July 2013 - 12:13 AM

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 -

Please Login or Register to see this Hidden Content

 

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.