Макеты с одной, двумя и тремя колонками ⇐ Html

[Anonymous]

Привет, я делаю макет из трех столбцов, все остальные коды в порядке, но мой «рабочий стол с левым столбцом» работает некорректно, и я не понимаю, в чем я ошибаюсь. Сейчас он не хочет быть видимым, но если я изменю его на «планшет в левом столбце», он появится, но не исчезнет, ​​когда свернется до режима планшета. Мне нужно, чтобы оно отображалось на рабочем столе и исчезало в режиме планшета.




Mega Records - Home


[*]

• Home
• Tha Team
• Media
• Gallery
• Bookings & Contact

Column Left Desktop

Welcome!
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.

Enjoy
The Website Is Up And Running! It Took A Lot To Complete. There Is More To Come!

Work In Progress
Ths Site Has Been A Work In Progress. Good Website Design Always Is.

Column Right Tablet





Our Location:

12345 ABC St

Anytown, Fl 12345
Telephone Number: [url=tel:5555551212](555) 555-1212[/url]
Email Address: [url=mailto:owner@business.abc]owner@business.abc[/url]





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*/


Подробнее здесь: https://stackoverflow.com/questions/798 ... mn-layouts