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

HTML

Posted by Gabriel E
Gabriel E
8,916 Points

Have 3 <a>s in an inline block, need to get them in block form. (Stacked).

Basically, the title says it all: I have 3 a elements with button-like backgrounds (but they're not buttons), and when I hit a certain media query, I want them to all snap in the middle, one on top of the other. I've been having loads of trouble with this, so any help would be appreciated. Thanks! (I don't think I need to post my code, because it doesn't really revolve around what I have so far, just what I don't have. :))

3 Answers

Adam Pengh
Adam Pengh
29,881 Points

Hi Gabriel D, inline-block elements will not span with width of their container, whereas block elements will, so try this code below for your elements and media queries:

http://codepen.io/adampengh/pen/xONKzy?editors=1100

Gabriel E
Gabriel E
8,916 Points

Thanks Adam! I pasted all of your code from your pen into a new file so I could work with the it and implement it into my project. It's working pretty good right now, so I don't think I'll have any problems. Thanks for the help everyone! G

Gabriel E
Gabriel E
8,916 Points

Adam, I got all the code to work exactly how I needed it. I was just wondering, the buttons are kind of clumped together in the middle. Without damaging to much, what would be the best way to get have button #1 on the left side, #2 centered, and #3 on the right. I tried float but it wasn't exactly working.

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

:point_right: There are several ways to do what you describe, including:

  • You could have some hidden line breaks that become un-hidden in the media query.
  • The anchors could be in a wrapper which becomes a column direction flex container in the query.
  • The anchors could acquire block display mode and center alignment in the query.

There are others, but hopefully these will get you going. If you still have trouble, be sure to post your code next time to make specific modification suggestions possible.

Adam Pengh
Adam Pengh
29,881 Points
Adam Pengh
Adam Pengh
29,881 Points

Hi Gabriel D,

I've updated the codepen example and add some color to the buttons so you can see how it was done. I used floats to control the placement of the buttons. You could also look into using CSS Flexbox as well.

Gabriel E
Gabriel E
8,916 Points

Sorry for the late response. Thanks a ton this was super helpful!!