June 11, 201610 yr Hi I've tried a simplish CSS menu, see here: http://www.worldclassphotographic.co.uk/test/ The problem I have is when I am using tablet view and have the screen width at 600px for example on my Nexus 7 I get the following: Is there a way I can wrap the text and make the box that it sits in 2 lines high (just for the options with long text, not all options)? Here is the HTML: <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Test menu 2016</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../test/styles.css"></head><body> <label for="show-menu" class="show-menu">☰ Menu</label> <input type="checkbox" id="show-menu" role="button"> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li> <a href="#">Services ▼</a> <ul class="hidden"> <li><a href="#">Option one </a></li> <li><a href="#">Option two</a></li> <li><a href="#">Option three</a></li> <li><a href="#">Option four with more text</a></li> </ul> </li> <li> <a href="#">Products ▼</a> <ul class="hidden"> <li><a href="#">Option one</a></li> <li><a href="#">Option two</a></li> <li><a href="#">Option three with more text</a></li> <li><a href="#">Option four with more text</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact us</a></li> </ul></body></html> And here is the CSS: @charset "utf-8";/* CSS Document *//*Strip the ul of padding and list styling*/ul { list-style-type:none; margin:0; padding:0; position: absolute;}/*Create a horizontal list with spacing*/li { display:inline-block; float: left; margin-right: 1px;}/*Style for menu links*/li a { display:block; min-width:140px; height: 25px; text-align: center; line-height: 25px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #0C78C0; background: #ffffff; text-decoration: none;}/*Hover state for top level links*/li:hover a { background: #19c589;}/*Style for dropdown links*/li:hover ul a { background: #f3f3f3; color: #2f3036; height: 25px; line-height: 25px;}/*Hover state for dropdown links*/li:hover ul a:hover { background: #19c589; color: #fff;}/*Hide dropdown links until they are needed*/li ul { display: none;}/*Make dropdown links vertical*/li ul li { display: block; float: none;}/*Prevent text wrapping*/li ul li a { width: auto; min-width: 100px; padding: 0 20px;}/*Display the dropdown on hover*/ul li a:hover + .hidden, .hidden:hover { display: block;}/*Style 'show menu' label button and hide it by default*/.show-menu { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; color: #fff; background: #19c589; text-align: center; padding: 10px 0; display: none;}/*Hide checkbox*/input[type=checkbox]{ display: none;}/*Show menu when invisible checkbox is checked*/input[type=checkbox]:checked ~ #menu{ display: block;}/*Responsive Styles*//*Mobile device*/@media (min-width: 1px) and (max-width: 380px){/*Make dropdown links appear inline*/ ul { position: static; display: none; } /*Create vertical spacing*/ li { margin-bottom: 1px; } /*Make all menu links full width*/ ul li, li a { width: 100%; } /*Display 'show menu' link*/ .show-menu { display:block; }.titleimg { max-width: 320px; width:100%; background-color: #F80101;}}/*Tablet view*/@media (min-width: 381px) and (max-width: 980px){.titleimg { max-width: 380px; width:100%; background-color: #00ED04;}}/*Desktop view*/@media (min-width: 981px) and (max-width: 1800px){.titleimg { max-width: 400px; width:100%; background-color: #091DF4;}} Many thanks Andy Edited June 11, 201610 yr by Andy325i
June 12, 201610 yr It's because your anchors have a height of 25px. Where is this number coming from? magic numbers like these should be avoided like the plague. The rest of your CSS also needs structure, don't attach such specific styling to element selectors, use classnames and try to avoid all the selector nesting you are doing. Edited June 12, 201610 yr by rbrtsmith
Create an account or sign in to comment