Link buttons two by two

Hi Paul

I’ve taken up one of your ideas in a slightly different context, but need the buttons to line up 2 x 2 to minimize number of rows.
I can’t work it out!

It’s in this page

As the #left is taken out at MQ @550px I am placing the main links from the #left sidebar in the rows under the header.

Hope you can help.



Which buttons are you referring to? At 550 viewport width?

Hi Ryan

You’re super-fast…

When you reduce the width to 550px, the #left is taken out and a series of lines appear under the header: Shopping/Electricity/etc

I want those individual links to pair up in eacxh line.

That’s what the ladies tell me.

Just give #buttons li{} (in your media query) display:inline-block; and width:50%;. Play with that. You should also realize that “taxt-align:center;” is invalid :slight_smile: . Might wanna run your page through HTML/CSS validator

It sounded nice, though…

Sorry, but the code you gave me does not work, yet…

It doesn’t?

Hi Ryan

The lines you have crossed out, other than the #buttons li at 550px, do they belong to the main css or are addition to the media queries?

Beginning at the #buttons li{}

That display:none; you see is overridden by the display:inline-block I set in the 550px media query (test.css)
The “#buttons li{}” rule in the 550px media query, the text-align:center; is crossed out because I said before it’s invalid. “taxt-align:center” is invalid.

Hi Ryan

A bit lost…

I need the display:none in the main css as those links can only appear at 550px. They must be hideen up to then

I still can’t get the thing to work…

Update your webpage with my code and come back.

Yes that’s what I’ve been saying; my code goes in the 550px media query.

But I’ve done that… I think…

Yup, good job.

If you aren’t seeing that, then you are seeing a cached version of your page.

Why is life so complicated?..

This is what i see in IE9 and FF after clearing the cache

Change it to 49%.

Never throw away a penny… Little things matter

Yes, that bit is sorted out.

Now I need to get rid of the white line under the last row, on the left only… OR add itto the right. Maybe better!


Which do you want :slight_smile: ?

Let’s add it!

In your HTML you give the last list item a class=“noborder”. Remove that.

I did that before and still not working

Oops, it’s caused by this rule…

#buttons li:last-child {
  border: none;

I thought that was attached to the noborder class. My bad. I skimmed.