iPad not showing full width

secondPanelWrapper has a fixed 1170px width which is WAY MORE than the width of the iPad, no matter the orientation. That's probably why it spans 100%+ on the iPad!

In the same way you are also setting a fixed PX width to the floated elements that are inside the secondPanelWrapper. This will make it non-responsive and it will extend the elements past the viewport of the iPad devices!

THat is probably because new gen devices (like iPad and iPhone) have retina screens which makes the pixel ratio jumps up to 2x. The image you are using is a 245width X someHeight, but the iPad||iPhone is technically trying to view it 2x cause of the retina, hence why designers usually put a 2x pixel ration image and than resize it using CSS. If you use an image that is 490xsomeHeight and resize it with CSS you will probably see the blurred effect fade away!

Best day to you! Hope mine goes for the best answer :)

Not sure this will work but I'd try avoid setting px height. Two ways to do this:

1) Set a height that goes for % of the element and Id set it to 100% so both elements take only the space they need

2) Remove height completly so the elements inherit the parent's height (best way) and use a clearfix so that the footer recognizes there are floated elements but will not override them

Just as the comment above:

Not sure this will work but I'd try avoid setting px height. Two ways to do this:

1) Set a height that goes for % of the element and Id set it to 100% so both elements take only the space they need

2) Remove height completly so the elements inherit the parent's height (best way) and use a clearfix so that the footer recognizes there are floated elements but will not override them

The background that is in the secondPanel dissapeared?

Upload || Send your new files so I can take a look!

Dont worry, the post is unique so there's just "1 right answer" XD You already upvoted me so it should go as answer soon! :)

Hey Ivan, i just opened the link you send me but I am able to see all the background-images.

Yeah. The problem (If you open any browers' console) is that the secondPanel's divs are not getting any height, but the floated elements are showing because they are overflowing the page.

You can fix this by setting a relative height to the secondPanel's div (doing it by %). Let us say you know that the first body div is to take 35% of the space and the footer will take 3% of the space. 35+3 = 38%, the secondPanel should take 62% of the height of the page.

A better way is to use the real clearFix, which sets an element such as a dot at the end of the div, after the floated elements, this way giving it a certain relative height so you do not have to set it by hand. Try to google "ClearFix" and search for the dotted solution.

The image is not showing because the containing div has 0 height, which means that there's no div to show XD

So here it goes:

INSIDE secondPanel (The one with the IMAGE) add another div as last div and do like this:

<div class="myClearFix"></div>

After that style it with CSS like this:

.myClearFix { clear: both; }

Remember to remove the clear:both declaration from your footer because that's just useless!

You're welcome :)

By the way, I think you have to set the BEST ANSWER manually. It should be possible by clicking "Best Answer" which should be visible just under my first post or something

Thank you very much, friend :) (Nice webpage, btw!)