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 saleemasad
saleemasad
12,126 Points

How do you center a play button in responsive div?

Trying to center the play button but when bootstrap resizes the play button doesn't stay centered. Couldn't figure out how to set the padding with %'s. Here's an example http://www.gfycat.com/RespectfulBruisedFruitbat

and here's the site. http://trackslap.com/shop/

7 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Saleem,

Is this the effect your looking for?

https://www.dropbox.com/s/8sfy99crkp5xlme/Track_Shop___Trackslap__1_Music_Marketplace.png?dl=0

saleemasad
saleemasad
12,126 Points
saleemasad
saleemasad
12,126 Points

yes but how do i achieve that in all viewport sizes?

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

I took your css you had for Play button size

/*PLAY BUTTON SIZES*/
.content-grid-download .entry-header div.jp-interface ul.jp-controls a {
    font-size: 20px;
    padding-top: 4px;
    padding-left: 3px;
}

Then I found the Media query you had for max-width 639px then I pasted your css into that media query and made a few modifications.

/*PLAY BUTTON SIZES*/
.content-grid-download .entry-header div.jp-interface ul.jp-controls a {
    font-size: 22px;
    padding-top: 9px;
    padding-left: 10px;
}

I didn't repeat that in your other media query sizes, I just wanted to see if it would work okay, try it yourself in your other media queries and let me know if it works.

Any problems and ill take another look :)

saleemasad
saleemasad
12,126 Points
saleemasad
saleemasad
12,126 Points

ok thanks i'll try it now! :)

Wayne Priestley
Wayne Priestley
19,579 Points

Saleem,

I'm not sure if you know this or not but the change i made to your 639px media query won't be there now, it was only made through the developer tool on Safari for testing purposes and isn't actually put into YOUR css. So you'll have to add it in there yourself.

saleemasad
saleemasad
12,126 Points
saleemasad
saleemasad
12,126 Points

Yes i know that. Thanks for checking i appreciate that.

Wayne Priestley
Wayne Priestley
19,579 Points

LOL,

I thought you would have but just wanted to make sure.

Very nice website by the way Saleem, you code was well written and very easy to follow, I had no problems finding what I was looking for.

Nice work!

saleemasad
saleemasad
12,126 Points
saleemasad
saleemasad
12,126 Points

that definitely works but i wonder if there is a way with % that would keep it centered without using media queries.

Wayne Priestley
Wayne Priestley
19,579 Points

Glad it worked.

Try commenting out the css you just added and use percentages in place of pixels on your first play button piece of css and see if it works.

saleemasad
saleemasad
12,126 Points
saleemasad
saleemasad
12,126 Points

the percentages work to a certain point then it becomes off again. I was considering making special media queries but it's a bit difficult when the browser is 636px or smaller.

Wayne Priestley
Wayne Priestley
19,579 Points

Well you know that the media queries work with the pixel adjustments, so I'd just use them, thats what they are there for.

Once you code them then there done and you don't have to worry about them again.

I'm glad its sorted now though, I know how frustrating it can be.

Good Luck with you website Saleem.