Проблема СМИ ⇐ Html

[Anonymous]

Привет, ребята, я немного новичок в Web Dev, и я пытаюсь создать свой веб-сайт портфолио в качестве учебного проекта, я структурировал его в режиме рабочего стола, и когда я начал использовать медиа-Queries для отзывчивости, я столкнулся с некоторыми проблемами, в нескольких словах у меня есть мобильная точка разрыва в Max-Width 860px, который работает только в виде мобильного, и я использую chrome strome raools at raools raools at ir raools raools raools at ir raools hrom. Оставьте здесь код и ссылку на веб-сайт, если вы хотите просмотреть его на мобильном
http://mandowebdev.ddns.net/portfolio/образной PrettyPrint-Override ">

Код: Выделить всё

@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Knewave&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;800&display=swap");

:root {
--background: #3e3e3e;
--primary: #ffed00;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}

html {
width: 100vw;
height: 100vh;
font-size: 16px;
background-color: var(--background);
color: var(--primary);
}

body {
display: flex;
flex-direction: column;
justify-content: center;
width: 90%;
margin: auto;
}

nav {
width: 75%;
display: grid;
grid-template-columns: 1fr 3fr;
align-items: center;
justify-content: center;
}

img {
max-width: 100%;
height: auto;
}

.nav-logo {
font-family: "Luckiest Guy", cursive;
font-size: 3rem;
margin-right: 4.25rem;
margin-top: 1rem;
}

.nav-ul {
display: flex;
list-style-type: none;
}

.nav-li {
font-family: "Poppins", sans-serif;
font-weight: 800;
margin-right: 3.125rem;
}

.nav-links {
text-decoration: none;
color: var(--primary);
}

hr {
border: 2px solid #707070;
}

.landing {
width: 80%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url(img/grid.svg);
background-repeat: no-repeat;
background-size: cover;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
margin-bottom: 14.7rem;
padding: 3rem;
}

.landing-logo {
font-family: "Luckiest Guy", cursive;
font-size: 7.25rem;
}

.landing-logo-subtitle {
font-family: "Knewave", cursive;
font-size: 4.19rem;
}

.stack {
margin: auto;
margin-top: 8rem;
display: flex;
grid-template-columns: 1fr 1fr;
grid-column-gap: 12.25rem;
}

.stack-h1 {
font-family: "Luckiest Guy", cursive;
font-size: 2.5rem;
margin-bottom: 8rem;
margin-left: 7.5rem;
}

.stack article {
align-items: center;
}

.cloud {
border: 5px solid var(--primary);
border-radius: 4rem;
display: flex;
justify-content: space-around;
margin-left: 4rem;
}

.stack-icons {
margin: 5rem 1.5rem 5rem 1.5rem;
min-width: 2rem;
}

.projects {
margin-top: 25rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.projects-h1 {
font-family: "Luckiest Guy", cursive;
font-size: 3rem;
}

.project {
padding-bottom: 10rem;
padding-top: 10rem;
display: grid;
grid-column-gap: 8rem;
grid-template-columns: 1fr 1fr;
align-items: center;
border-bottom: 2px solid var(--primary);
font-family: "Poppins", sans-serif;
line-height: 2rem;
}

#plant {
direction: rtl;
}

#plant p {
direction: ltr;
}

@media  (max-width: 860px){
.project{
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
}

@media screen and (max-width: 1230px) {
.stack {
flex-direction: column;
}

.cloud {
margin-bottom: 15rem;
}
}

@media screen and (max-width: 1600px) {
html {
font-size:  14px;
}
}< /code>




[*]
Portfolio



Mando.
[list]
[url=#]HOME[/url]
[*][url=#]DEV-STACK[/url]
[*][url=#]MY PROJECTS[/url]
[*][url=#]CONTACT[/url]
[/list]





Mando.
Full Stack Web Dev

[img]img/memoji_img.svg[/img]




My Front-end Stack

[img]img/front-end/js.svg[/img]
[img]img/front-end/html.svg[/img]
[img]img/front-end/css-3.svg[/img]




My Back-end Stack

[img]img/back-end/js.svg[/img]
[img]img/back-end/django.svg[/img]
[img]img/back-end/python.svg[/img]





My Learning Projects

[img]img/projects/python_guide.svg[/img]

A brief introduction to my favorite. Programming language: Python




[img]img/projects/not_a_plant.svg[/img]

A product page design that includes images and a sample video

for the product with a contact form at the end




[img]img/projects/apple.svg[/img]

My first html and css project: a little roadmap of Steve Jobs life
from 1974 to 2011





Javascript Projects

[img]img/projects/generative_art.svg[/img]

My generative art project made in javascript, with this you can tweak

some parameters to create your own generative frame

Подробнее здесь: https://stackoverflow.com/questions/720 ... io-website