KeraG Posted August 25, 2021 Share Posted August 25, 2021 Site URL: https://springtail-dove-9atf.squarespace.com/enroll Hi, while my code is good with desktop, I need help for mobile because its width is overflowing (see screenshot). Would like the links "Customer Login" and "Contact" to move to the next line. Below is the CSS code I used for desktop: @media @desktop{ .nav{ list-style: none; padding: 0; margin: 0; margin-top: 25px; color: @darkorange; text-transform: uppercase; letter-spacing: 1px; display: flex; justify-content: center; } .nav li{ display: inline-block; position: relative; padding: 0 50px; text-align: center; } .nav li::after { position: absolute; width: 2px; right: 0; content: ' '; height: 100%; background: @darkorange; } .nav li:last-child::after { width: 0; } } and code block with HTML: <ul class="nav"> <li><a href="/enroll">Enroll</a></li> <li><a href="/enroll#faqs">FAQS</a></li> <li><a href="/customer-area">Customer Login</a></li> <li><a href="/contact">Contact</a></li> </ul> Thank you! Link to comment
tuanphan Posted August 27, 2021 Share Posted August 27, 2021 Add to Design > Custom CSS ul.nav { flex-wrap: wrap; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.