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 Maria Cuan
Maria Cuan
4,500 Points

Mobile view of website is weird!

Hello treehouse members, once more I need to ask of your wisdom on a matter of web or die. My website, was coded using bootstrap's framework, and I used svg's (which didn't show up once I uploaded into the server :( so I changed them to jpgs) They show up now, with animation an all, but when you visit the site on a phone the background does things I do not understand.

www.esthercuan.com

please let me know if you see this too in your iphones/androids.

thank you so much for your help.

3 Answers

marsha grasett
marsha grasett
9,995 Points
marsha grasett
marsha grasett
9,995 Points

On the iPhone your bottom image is not contained to the viewport

  • so it's width goes on and on to about (I'm guessing) 5 times the width. Did you use Media queries breakpoints?

Sorry i can't help you more as I'm not familiar with Bootstrap.

Also, it crashed on safari on iPhone :(

Özgür Ozan Çakmak
Özgür Ozan Çakmak
11,451 Points
Özgür Ozan Çakmak
Özgür Ozan Çakmak
11,451 Points

Um hey, maybe it's because the 

   <div class="hidden-xs" id="boat">
        <img src="img/boat-01.png" alt="boat" class="boat rocking">
      </div>
      <!-- Clouds -->
      <div id="clouds">
        <div class="cloud x1"></div>
        <!-- Time for multiple clouds to dance around -->
        <div class="cloud x2"></div>
        <div class="cloud x3"></div>
        <div class="cloud x4"></div>
        <div class="cloud x5 "></div>
      </div>

part is not in a container div? Super fluffy clouds btw, I loved them.

Maria Cuan
Maria Cuan
4,500 Points

Alright so, I did remove that code and it seems like that is the problem. I wrapped it inside a container div, but its not working :( should I use a section? Thank you very much for your help!

Özgür Ozan Çakmak
Özgür Ozan Çakmak
11,451 Points

Okay, now I have replicated your site on my localhost I can meddle with it. What do you want your site to do on mobile phones? Currently I can see your site on my droid without a ship and clouds on the bottom with a tiny lighthouse? Is this the expected behavior?

Maria Cuan
Maria Cuan
4,500 Points

Yes, I decided to hide the animated clouds and the boat on extra small devices. I cant make the clouds work with that background on mobile :(

I have a illustration that is 320px wide, I might insert that one up in my media queries.

Özgür Ozan Çakmak
Özgür Ozan Çakmak
11,451 Points

If you are still having problems, you might want to check w3 validator's errors, maybe? http://validator.w3.org/mobile/check?task=2014012723023180.mobile1&docAddr=http%3A%2F%2Fwww.esthercuan.com%2F

Maria Cuan
Maria Cuan
4,500 Points
Maria Cuan
Maria Cuan
4,500 Points

Oh ! let me try that thank you Özgür!