ARTICLE AD BOX
Hi I'm doing a 3 column layout, all the rest of the codes are alright, but my 'left column desktop' is acting up and I can't see where I'm going wrong. Right now it doesn't want to be seen but if I change it to 'left column tablet', it shows up but doesn't disappear when it shrinks to tablet view. I need it to show on the desktop and to disappear when it's in tablet view.
<!DOCTYPE html> <html lang="en"> <head> <title>Mega Records - Home</title> <meta charset="utf-8"> <meta name="viewpoint" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="CSS/style.css"> <link rel="stylesheet" href="CSS/tabletStyle.css"> <link rel="stylesheet" href="CSS/mobileStyle.css"> </head> <body> <header><img src="media/images/Urban Creativity.jpg" alt="Urban Creativity" height="200"></header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="Team.html">Tha Team</a></li> <li><a href="Media.html">Media</a></li> <li><a href="Gallery.html">Gallery</a></li> <li><a href="Contact.html">Bookings & Contact</a></li> </ul> </nav> <figure class="tablet"> <img src="media/images/Immaculates.jpg" alt="Immaculates"> </figure> <main> <div class="row"> <div class="column left desktop"> <p>Column Left Desktop</p> </div> <div class="column center"> <h2>Welcome!</h2> <p>It Is Great That You Found Us. If You Would Like To Start Your Urban I.T. Lessons, Please Explore The Site. Feel Free To Ask Questions You Might Have.</p> <h2>Enjoy</h2> <p>The Website Is Up And Running! It Took A Lot To Complete. There Is More To Come!</p> <h2>Work In Progress</h2> <p>Ths Site Has Been A Work In Progress. Good Website Design Always Is.</p> </div> <div class="column right tablet"> <p>Column Right Tablet</p> </div> </div> </main> <footer> <p>Our Location: <br> 12345 ABC St<br> Anytown, Fl 12345</p> <p>Telephone Number: <a href="tel:5555551212">(555) 555-1212</a></p> <p>Email Address: <a href="mailto:[email protected]">[email protected]</a></p> </footer> </body> </html> body { background-image: linear-gradient(white, black); } header img { width: 100%; /*This Stretches The Image Across The Viewpoint*/ height: auto; /*The Height Will Be Changed Based On The Size Viewpoint*/ max-width: 500px; } /*Navigation*/ nav { border-radius: 1em; /*This Rounds The Corners Of The Elements*/ margin-bottom: 1em; /*This Places Some Spaces Between The Elements*/ font-weight: bold; text-align: center; } nav ul { padding: 0; margin-top: 0.2em; margin-bottom: 0.2em; } nav ul li { background-color: black; padding: 1em; min-width: 12%; margin: .25%; list-style-type: none; /*This Removes Bullet Points*/ } nav ul li a { color: white; text-decoration: none; /*This Removes The Underline From The Hyperlink*/ } figure { text-align: center; background-color: white; } figure img { max-width: 800px; max-height: 600px; width: 100%; height: auto; } main { /*background-color: white; border-top: solid 0.3em black; border-bottom: solid 0.3em black;*/ background-image: linear-gradient(white, black); border-radius: 1.0em; /*This Rounds The Corners Of The Elements*/ margin-bottom: 1em;/*This Places Some Spaces Between The Elements*/ } main .row:after { content: ""; display: table; clear: both; } main div .column { float: left; } main div .left { padding: 10px; width: 20%; float: left; } main div .center { padding: 10px; } main div .right { float: right; padding: 10px; width: 15%; } footer { background-color: white; border-top: solid 0.3em black; border-bottom: solid 0.3em black; border-radius: 1em; /*This Rounds The Corners Of The Elements*/ } /*Begin Desktop*/ @media screen and (min-width: 961px) { header img { width: auto; height: 5em; } .desktop { display: block; } nav { margin-top: -5.1em; /*This Moves The Nav Element Above Where It Should Normally Be*/ width: 60%; float: right; /*This Floats The Nav Element To The Right Side Of The Page*/ } main div .center { padding: 10px; width: 45%; border-right: 0.3em solid black; border-left: 0.3em solid black; } } /*End Desktop*/ /*Begin Mobile*/ @media screen and (max-width: 640px) { nav ul li { border-radius: 1em; } .tablet { display: none; } .desktop { display: none; } } /*End Mobile*/ /*Begin Tablet*/ @media screen and (min-width: 641px) { nav ul li { display: inline-block; /*This Lists The Items Horizontally And Allows Them To Stretch*/ border-radius: 1em; } .desktop { display: none; } main div .center { padding: 1em; width: 45%; border-right: 0.3em solid black; } } /*End Tablet*/
Move the entire /*Begin Desktop*/ block to the very bottom of your CSS file, after the Tablet block.
CSS is generally best organized from smallest screens to largest. By placing the Desktop code last, it ensures that when a screen is large enough to be a desktop, the desktop rules override the tablet rules.
Also, in your <head> change viewpoint to viewport.
New contributor
Tim V. is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
1 Comment
Thank you, something so small can mess up everything. It worked
2026-01-23T23:13:27.853Z+00:00
Explore related questions
See similar questions with these tags.
