Share this post

Link to post

Share on other sites

Rob
547

Rob 547

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 0

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 436

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.

Share this post

Link to post

Share on other sites

hireconrad
0

hireconrad 0

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 436

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.

Share this post

Link to post

Share on other sites

hireconrad
0

hireconrad 0

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

Rob
547

Rob 547

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

hireconrad
0

hireconrad 0

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 0

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 0

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.