950645 - Callout CSS issue on mobile devices

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: General, enhancement)

Description

[Prasanna Yalala]

What did you do?
================
1. browse https://developer.mozilla.org/ on phone / emulator 
2. scroll down till you see the callouts 
3. 

What happened?
==============
The background image runs over the callout

What should have happened?
==========================
the call out should have its borders displayed properly.

Is there anything else we should know?
======================================
Adding this to the CSS should fix the issue 

@media (max-width: 768px){
#home .home-callouts {
padding-top: 20px;
}
}

Comment 1

[David Walsh :davidwalsh]

Just to ensure I'm on the same page, could you provide a screenshot / phone capture?  Would be super helpful.  Thank you!

Comment 2

[Prasanna Yalala]

OH! How stupid of me! I did 2 mistakes here.

1. I raised this bug without realising if that was the original intent of the designer. 
2. I copy pasted existing CSS rule without correcting it. 

Here are the screenshots you've requested:
Ubuntu 13 with Chrome 31
http://i.imgur.com/nbhCIe9.png

SGS 3 webview
http://i.imgur.com/5CTa6Hu.png

(links are hosted externally, sorry I don't know where to upload screenshot here)

If this really is a bug, the correction would be this:

@media (max-width: 768px){
#home .home-callouts {
padding-top: 20px;
padding-bottom: 1px;
}
}

cheers!
ypk

Comment 3

[Prasanna Yalala]

P.S.: This is what I was think it should have looked like http://i.imgur.com/OKsDMYs.png