qim
April 13, 2015, 4:09pm
1
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 http://pintotours.net/Zork/buttons/test.html
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.
Thanks
Hello,
Which buttons are you referring to? At 550 viewport width?
qim
April 13, 2015, 4:17pm
3
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.
qim:
You’re super-fast…
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 . Might wanna run your page through HTML/CSS validator
qim
April 13, 2015, 4:25pm
5
It sounded nice, though…
Sorry, but the code you gave me does not work, yet…
qim
April 13, 2015, 4:43pm
7
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.
qim
April 13, 2015, 5:07pm
9
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.
qim
April 13, 2015, 5:12pm
11
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.
qim
April 13, 2015, 5:24pm
13
Why is life so complicated?..
This is what i see in IE9 and FF after clearing the cache
qim
April 13, 2015, 5:30pm
15
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!
Thanks
In your HTML you give the last list item a class=“noborder”. Remove that.
qim
April 13, 2015, 5:38pm
19
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.