Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Konstantin Nikkari
Konstantin Nikkari
5,185 Points

Rendering in mobile and some extra space

Hi,

I managed to build a landing page www.konstantin.fi. This is how it looks in desktop and should look also on mobile: http://imgur.com/iOPMv9N

1) For some reason Chrome and Opera render the page wrong. The background is not stretched from top till bottom. Would you know what can cause this? Mobile chrome = http://imgur.com/kTUdhTy - Mobile Opera = http://imgur.com/KAyWr1b

2) Because the circular manu is slightly rotated it makes a corner that goes outside the viewpoint when viewed in mobile. How can I hide this extra space so that mobile browser would not let your scroll from left to right. Please see this http://imgur.com/fL4m0oG

Many thanks!

3 Answers

Craig Watson
Craig Watson
27,930 Points

Hi,

I have had a look at the site and I made a couple of simple changes that got it all working and lined up correctly for me.

However there is a better solution I think.

I have set up a workspace and added the changes for you to take a look at.

Here is the snapshot.

https://w.trhou.se/otg6bxiqv9

I hope this helps :)

Craig

Konstantin Nikkari
Konstantin Nikkari
5,185 Points

That's very nice! Thanks a lot for the workspace.

The overflow:hidden in body didn't work for me so I put it in .main. Now the scrolling is disabled.

Somehow Chrome and Opera in Android (Samsung S7) are still not getting proper cover of the background. I'm getting this white space under background http://imgur.com/EfWgRrM

Craig Watson
Craig Watson
27,930 Points

Hi,

I have had to make a number of little tweaks to do things in a more cross browser cross device way, I think this next one should fix it for you.

https://w.trhou.se/ux51tzm2lj

Let me know if this does not work however I am determined to make this work on all devices now lol

Craig

Konstantin Nikkari
Konstantin Nikkari
5,185 Points
Konstantin Nikkari
Konstantin Nikkari
5,185 Points

Your latest suggestion actually fixed the cover problem but raised two others. Now I couldn't scroll the image at all when phone was in landscape and also the circulus menu was two big for eg. Iphone 5 and 4. Which put a part of the menu outside the window and because of overflow:hidden you couldn't scroll.

That said your latest suggestion removed the mobile friendlyness scaling.

Any ideas?

Konstantin Nikkari
Konstantin Nikkari
5,185 Points
Konstantin Nikkari
Konstantin Nikkari
5,185 Points

I found the solution here http://stackoverflow.com/questions/14876035/background-size-cover-not-working-in-portrait-on-android-tablet

After testing it seems that to fix this is enough to set:

html {
  height:100%;
}

Thank you for your help!