Jump to content


Photo
- - - - -
Open

Full Screen On Mobile Device



  • Please log in to reply
16 replies to this topic

#1 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts
  • Country: Country Flag

Posted 14 November 2012 - 06:21 AM

Hi,
when viewing my site on my iPad or iPhone my site does not zoom out and show the entire width. How can I set this up?

hireconrad.com/hireconrad

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16897 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 14 November 2012 - 07:37 AM

Hi,

Go to PageLines > Site Options > Layout Editor and disable Mobile View.

#3 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts
  • Country: Country Flag

Posted 14 November 2012 - 02:44 PM

Hi,

Go to PageLines > Site Options > Layout Editor and disable Mobile View.

thanks, that has seemed to fix everything except for the front page of my site:

Please Login or Register to see this Hidden Content



that page still does not load full width

#4 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts
  • Country: Country Flag

Posted 15 November 2012 - 08:19 PM

any ideas why my home page doesn't expand to full width but all my other pages do?

#5 Rob

Rob

    One Smart Egg

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

Posted 16 November 2012 - 12:10 AM

You may have some custom CSS applied to the front page or some of its elements which are not responsive. For example, if you have fixed pixel padding or width versus percentages or em sizes, your front page may be less than full width. Additionally, you may have set a specific margin for the page. I'd recommend an examination of your CSS.

#6 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts
  • Country: Country Flag

Posted 21 November 2012 - 09:05 PM

You may have some custom CSS applied to the front page or some of its elements which are not responsive. For example, if you have fixed pixel padding or width versus percentages or em sizes, your front page may be less than full width. Additionally, you may have set a specific margin for the page. I'd recommend an examination of your CSS.



I have narrowed it down to the following custom css:

Please Login or Register to see this Hidden Content



this code is present on all the other pages with no ill effect, but for some reason it causes an issue on the home page. Any idea how to resolve this?

#7 James B

James B

    Advocate

  • Members

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

Posted 22 November 2012 - 02:47 AM

Hi Conrad,

I'm not sure why it would be reacting differently on that one page. You'd have to remove the code from that page only using css. Change the page id x to reflect the id for the homepage.

Please Login or Register to see this Hidden Content



#8 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts
  • Country: Country Flag

Posted 22 November 2012 - 03:13 AM

Hi Conrad,

I'm not sure why it would be reacting differently on that one page. You'd have to remove the code from that page only using css. Change the page id x to reflect the id for the homepage.

Please Login or Register to see this Hidden Content


by removing it, i would be changing the width of the content on my site, and it would look silly if the home page where of a different width then the rest of the pages.

#9 James B

James B

    Advocate

  • Members

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

Posted 22 November 2012 - 03:35 AM

I'm 100% not sure what you're trying to do then with that code. If that's the css causing the issue on the page you'll have to play around with it to find out which figure is required to make it fit within the layout like you were expecting it to. You can still use the page-id to issue that change on the homepage only. It could be that padding/margins on other sections which are only present on that page are causing the page not to display correctly when that additional body padding is applied.

#10 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts
  • Country: Country Flag

Posted 22 November 2012 - 03:38 AM

I'm 100% not sure what you're trying to do then with that code. If that's the css causing the issue on the page you'll have to play around with it to find out which figure is required to make it fit within the layout like you were expecting it to. You can still use the page-id to issue that change on the homepage only. It could be that padding/margins on other sections which are only present on that page are causing the page not to display correctly when that additional body padding is applied.


with this code i in effect extend the white background further then the width of the page (the body of the page is set to 980px, and I am extending the sides passed that in order to create the effect that I'm after)

#11 James B

James B

    Advocate

  • Members

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

Posted 22 November 2012 - 04:29 AM

I think you'll need to use browser specific css to only edit the mobile screen version, the max width set by the file css is 760px for mobiles and the prefix for mobile devices is @media. I think you'll need to edit that line of of css using the page-id and the media prefix to get it to display full screen and match the other pages.

#12 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts
  • Country: Country Flag

Posted 22 November 2012 - 04:53 AM

I think you'll need to use browser specific css to only edit the mobile screen version, the max width set by the file css is 760px for mobiles and the prefix for mobile devices is @media. I think you'll need to edit that line of of css using the page-id and the media prefix to get it to display full screen and match the other pages.


i have disabled the mobile view

#13 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts
  • Country: Country Flag

Posted 22 November 2012 - 02:28 PM

The topic was marked as resolved.


why has this been marked resolved? It hasn't been. I still need help

#14 Rob

Rob

    One Smart Egg

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

Posted 22 November 2012 - 02:49 PM

Well, your reply indicated that you took an action and never explained its effect. It seemed that resolved the matter and should have. If you've customized your code for the homepage, then you need to adjust that accordingly. I will reopen this but please don't leave unexplained answers.

#15 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts
  • Country: Country Flag

Posted 22 November 2012 - 03:03 PM

i have disabled the mobile view


This was a setting that was first suggested to me (see top few comments). It worked to correct the issue i was having on all my pages except for the homepage.
I am still having an issue with the home page. I created a new page entitled test-3 and created a duplicate of the homepage to see if it too would not load properly on the iPad, however it loads just the same. I dont understand how the same code can be processed differently on different pages.

I have tried disabling the ken burners slider i have on the main page, and that doesn't resolve it. I tried disabling the boxes, and that didn't help either. The base code is the same for this page as all others. Im stumped.
Does anyone have any ideas? Perhaps I can create the wider body some other way then using padding: 0 70px?

#16 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts
  • Country: Country Flag

Posted 22 November 2012 - 04:33 PM

I've been wracking my brain all morning. I created a test page

Please Login or Register to see this Hidden Content

to test out how that page reacts to changes on my iPad. I have setup a Template 8 that applies to this page and added and removed sections to see what would happen. If i apply a banner set that is found on the other pages, Test-3 loads up properly. Ive tried using the individual banner from those pages on my Test-3 page and none of the banners Ive tested individually force a full page on the iPad. Ive tried a banner image the full width (1120px wide) to see if that would force a full width… it did not. Ive tried a banner with text and image… didn't work. Ive tried a banner with one of my html 5 menus… didn't work.

Im totally lost. I can't find a pattern where adding or removing an element/section negatively effects the page. I dont understand why all my other pages load up properly (yet they all have different arrangements of banners, mastheads, templates).

Can someone please help

#17 hireconrad

hireconrad

    Super Member

  • Members
  • 155 posts
  • Country: Country Flag

Posted 22 November 2012 - 04:46 PM

I think i may have identified an issue (I believe it is an issue of page height)

What I did:

when playing around with page TEST-3, I added all the available sections into the template (in the pagelines drag and drop). With all sections activated, TEST-3 loads up properly. I systematically removed one section from the pagelines drag and drop and refreshed the TEST-3 page, until I was left with 1)Features, 2)Quckslider 3)Boxes
If i remove any of these, it ends up not loading properly on the iPad. I have noticed that with these 3 sections activated, it fills in the entire height of the screen.

Question:
How do I get the homepage body to extend all the way down? If you look at all my other pages, the white body extends from the very top of the page to the very bottom, however on the home page it stops before reaching the bottom.