Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

iPad not showing full width

I created page that is perfect when using PC web browser, but when trying to use iPad or iPhone to view same page, page is not full width as on PC, does anyone know why? You can see it here. And, no, it is not responsive.

11 Answers

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

You should uncomment the META tag about the width = device-width. The CSS seems fine at first glance. The width is fixed to a relative value of 100% for the body, so it should go like that. The problem might come with the image, so try to use a COVER property value for the background image. Also, if the problem comes with the HEIGHT, remember that you put a fixed position of 600px, meaning that a screen with higher height (iPAD being 768 if I am right) will see content after the image of 600px for a value of 168px!

Hope I helped. Have the best day!

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

So you want me to just post an answer just like I am doing right now? XD Im happy that I helped you and if you need anything else you just need to ask. We are a community afterall, arent we? :)

I uncommented meta tag, but problem is still here (it is even worst now), cover property was already set.

Somehow, two articles Who We Are and What We Do span 100% on ipad, why is that?

Thank you

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

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!

I guess that was main problem, when I delete that panel, everything is alright...

Do you maybe know one more thing, why is corner peel photo kinda blurry on ipad?

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

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 :)

Thank you SO MUCH for all of this, you have no idea how much you are helping me, can you please post like an answer so I can rate your comment for you to get some points?

One more and last question, here you can download code if you want to... One last problem I have with second panel is that if i set it's height value to ex. 450px everything is fine, but if I delete it and leave it to be automated footer jumps on top... How can I tell secondpanelwrapper element to make height according to inner two divs?

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

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

I'm new to this community and I already like it... I posted this one more question, but I will repost it if you didn't see it...

One more and last question, here you can download code if you want to... One last problem I have with second panel is that if i set it's height value to ex. 450px everything is fine, but if I delete it and leave it to be automated footer jumps on top... How can I tell secondpanelwrapper element to make height according to inner two divs?

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

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

I didn't actually understand no.1 solution?

no.2 solution worked but there is no background showing now? Do you know why?

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

The background that is in the secondPanel dissapeared?

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

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

Here it is :)

Thank you so much and please post as answers so I can give you some points, at least I can do :)

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

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! :)

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

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

Can you see it here http://blackcoffeegroup.com/ ?

I just tried it on my Chrome, Opera, Mozilla, iPad and iPhone, can't see it :S

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

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

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

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!

OMG, there is no right way to say THANK YOU as much as I would like to...

My problem is fixed, thank you soooo much!!!!

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

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

Did it :)

Lorenzo Pieri
Lorenzo Pieri
19,772 Points

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