Hi guys, I'm trying to center this menu on narrower screens when it transforming from vertical menu on wider screens, but it sticks to the left. So how do I center it? <!DOCTYPE html> <html> <head> <style> .list { position: fixed; right: 0; top: 8em; padding: 0.6em 0.4em; border: 0.07em solid #656565; } .list li { cursor: pointer; margin: 1em 0; } .list li:first-child { margin-top: 0; } .list li:last-child { margin-bottom: 0; } @media (max-width: 40em) { .list { position: static; padding: 0.6em; } .list li { display: inline-block; text-align: center; vertical-align: middle; margin: 0 0.3em; } } </style> </head> <body> <ul class=list> <li>B1</li> <li>B2</li> <li>B3</li> </ul> </body> </html> Code (markup): Thank you,
I missed your follow-up post. I also missed that you're going from a vertical list on wide screens to horizontal on narrow screens, which was/is contra-intuitive to me. But since I have already coded my misunderstood version, here it is for your amusement and edification. <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content= "width=device-width; height=device-height; initial-scale=1" name="viewport"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0 1.5em; padding: 0;} p { font-size: 1em;} h2::before { content: "Desktop\a0"} ul#test { list-type: none; margin: 1.5em 0; padding: 0; text-align: center;} #test li { display: inline-block; margin: 0 0.3em;} @media (max-width: 40em) { h2::before { content: "Small Viewport\a0"} ul#test { display: block;} #test li { display: block; margin: 1.5em 0 text-align: center;}} /*]]>*/ </style> </head> <body> <h1> Test of responsive list </h1> <h2> Test </h2> <ul id="test"> <li>B1</li> <li>B2</li> <li>B3</li> </ul> </body> </html> Code (markup): Jeez! I hate that when I paste here, the formatting is not maintained. gary
Thank gary for the humor, It's not contra-intuitive. I put that around images. There's plenty of space on the desktop. I want to focus on the image on mobile. So it must go to the top or the bottom. I use very widescreen monitor though. However, your code got these messages from Chrome desktop: The value "device-width;" for key "width" is invalid, and has been ignored. horizon.html:7 The value "device-height;" for key "height" is invalid, and has been ignored. horizon.html:7 Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead. Code (markup): Are you still suggesting these. My users target is mostly on mobile and women, and iOS perhaps. Thanks,
I don't have the errors you found (Chrome Version 49.0.2623.112 (64-bit) in Linux). The W3C html validator shows no errors. gary
Some advice? Get rid of the damned position:fixed; nothing like wasting screen space that could be better used to show content... There's a reason I use user.css via stylish to override that on any site I frequent that pulls that stupid useless and annoying stunt. Also, rather than doing cursorointer, you say this is a menu? Get your COMPLETE semantic markup in there (aka ANCHORS) and you'll find it's more reliable to style the anchors than it is the LI, particularly if you need to support IE8/earlier. Just set the LI to inline-block and then forget they even exist -- don't even TRY wasting time doing anything more with them. Set the anchors to display:block so they can receive vertical style, and you're good. Remember, don't even THINK about styling things until you have the full complete semantic markup in place. Oh, and that "error" some validation systems don't like semi-colons on viewport meta -- NOT that an HTML validator should actually even be looking at the content of a meta tag -- change them to comma's as that's the "accepted" delimiter by the specification that has no business declaring that...