Using position absolute in mobile Responsive design

Question

Music Player

Consider this image. Here I have a background image(only the outer part of the player not the buttons timing and the progress bar). Now I want to place the play, next, previous and stop buttons in the places exact same places.

#playbuttonimg{
    margin-left:-95px;
    position: absolute;
    top:20px;
}
#pausebuttonimg{
    margin-left:-95px;
    position: absolute;
    top:20px;
    display: none;
}
#prevbuttonimg{
    position: absolute;
    /*margin-left:-15px;*/
    top:24px;
}
#stopbuttonimg{
    position: absolute;
    margin-left:18px;
    top:24px;
}
#nextbuttonimg{
    position: absolute;
    margin-left:50px;
    top:24px;
}

If I use this style, in desktop browser it comes perfectly but in the mobile devices the margin-left being negative makes the button go beyond the screen and the positive margins will be visible but not placed accordingly.

And as it is mobile website it should fit properly in all the mobile devices. How can I do this in css? Is there a way to do it without using media queries? Or is there any other way so that I can make it fit properly across all the mobile devices?

can you show us the live demo of your code.....

Shailender Arora
– Shailender Arora

2013-05-13 10:25:17 +00:00
Commented May 13, 2013 at 10:25 — Shailender Arora
– Shailender Arora, Commented May 13, 2013 at 10:25

Nitesh · Accepted Answer · 2013-05-13 09:19:51Z

2

You can add a position:relative; to your main parent div.

answered May 13, 2013 at 9:19

Nitesh

15.8k4 gold badges51 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sameera Thilakasiri · Accepted Answer · 2013-05-13 09:09:44Z

-1

If you work with percentage values this should work, I mean you have used

margin-left:xxxpx;

in pixels, but if you can calculate its percentage values, this may solve.

For the calculations you can get help of http://resources.sameerast.com/responsive-web-design-formula-easy-calculator.html

answered May 13, 2013 at 9:09

Sameera Thilakasiri

9,51810 gold badges54 silver badges87 bronze badges

Collectives™ on Stack Overflow

Using position absolute in mobile Responsive design

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related