Jump to content
hireconrad

Full Screen On Mobile Device

Recommended Posts

hireconrad    0
hireconrad

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
Danny    1,327
Danny

Hi,

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
hireconrad    0
hireconrad

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
hireconrad    0
hireconrad

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
hireconrad    0
hireconrad

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
James B    436
James B

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]


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
hireconrad    0
hireconrad

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
James B    436
James B

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.


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
hireconrad    0
hireconrad

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
James B    436
James B

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.


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
hireconrad    0
hireconrad

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
hireconrad    0
hireconrad

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
hireconrad    0
hireconrad

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
hireconrad    0
hireconrad

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
hireconrad    0
hireconrad

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

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


×