Callout CSS issue on mobile devices

RESOLVED FIXED

Status

--
enhancement
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: yprasannakumar, Unassigned)

Tracking

Details

(Whiteboard: [specification][type:bug])

(Reporter)

Description

5 years ago
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;
}
}
(Reporter)

Updated

5 years ago
Severity: normal → enhancement
Just to ensure I'm on the same page, could you provide a screenshot / phone capture?  Would be super helpful.  Thank you!
(Reporter)

Comment 2

5 years ago
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
(Reporter)

Comment 3

5 years ago
P.S.: This is what I was think it should have looked like http://i.imgur.com/OKsDMYs.png
Status: UNCONFIRMED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.