Archived

This topic is now archived and is closed to further replies.

  • 0

Full Screen On Mobile Device

Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

16 answers to this question

Posted · Report post

Hi,

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

Share this post


Link to post
Share on other sites

Posted · Report post

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:


body {

padding: 0 70px;

}

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

.page-id-x body { padding: 0; }[/CODE]

Share this post


Link to post
Share on other sites

Posted · Report post

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.

.page-id-x body { padding: 0; }[/CODE]

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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)

Share this post


Link to post
Share on other sites

Posted · Report post

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:

http://hireconrad.com/hireconrad/

that page still does not load full width

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

I've been wracking my brain all morning. I created a test page http://hireconrad.com/hireconrad/test-3/ 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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites