为什么我的锚标签没有重排？

Question

I'm working on my new website and am running into something I just can't figure out. Here's the link:

http://www.adamabrams.com/aadc/

When I resize my browser to "mobile width", so that it's narrower than the width of the little row of oval "Tags" just below my site menu, I want the tags to reflow into two rows (or as many as needed). Instead, they stubbornly remain in a single row and jut off the right side of the window.

I haven't given the enclosing div a fixed height... I know this must be something simple, but I'm stumped!

Here's the HTML:

<main class="content" itemtype="http://schema.org/Blog" itemscope="itemscope" itemprop="mainContentOfPage" role="main">
<div class="post_tags">
<a class="tagintro" href="#">Select area of expertise:</a>
<a class="database" title="database projects" href="http://adamabrams.com/aadc/tag/database/">database</a>
<a class="ecommerce" title="ecommerce projects" href="http://adamabrams.com/aadc/tag/ecommerce/">ecommerce</a>
<a class="mobile" title="mobile projects" href="http://adamabrams.com/aadc/tag/mobile/">mobile</a>
<a class="website" title="website projects" href="http://adamabrams.com/aadc/tag/website/">website</a>
</div>

...and here's all the CSS that relates, I think:

/* TAG BUTTONS */

/* Styling of the buttons, everywhere */
.entry-tags a, .post_tags a {
    color: #3D3D3D;
    font-weight: bold;
    background-color: #EECE88;
    padding: .35em .5em;
    border-radius: .7em;
    -moz-border-radius: .7em;
    -webkit-border-radius: .7em;
}

.entry-tags a:hover, .post_tags a:hover {
    color: black;
    background-color: orange;
}

/* TAGS "HEADER" ON TAG.PHP PAGE */

/* Layout of buttons area */
.post_tags {
    text-align: center;
    margin-bottom: 2em;
}

/* Spacing between buttons */
.post_tags a {
    margin-right: 1em;
}

.post_tags a:first-child,
.post_tags a:last-child {
    margin-right: 0;
}

/* Currently displayed tag */
body.tag-ecommerce a.ecommerce,
body.tag-database a.database,
body.tag-mobile a.mobile,
body.tag-website a.website {
    color: black;
    background-color: orange;
}

a.tagintro, a.tagintro:hover {
    background-color: transparent;
    color: white;
}

Any ideas or suggestions are most welcome!

Thanks, Adam

Answer 1

I see what you are going for. The best way to get what you are trying to achieve is to change the width and margin of the element at the desired break-point.

So for your "media width" you set your classes to re-size. By doing so the elements will flow naturally down the document.

ex:

 @media only screen and (max-width: 480px) { /* Your break-point for mobile */ .ecommerce, .database, .mobile, .website{ width: 48%; margin-left: 1%; margin-right: 1%; } } 

Or some similar measurements that makes sense with your design.