Cześć, jestem w trakcie tworzenia portfolio i mam problem otóż zawierając w media kod nie reaguje na zmiany. Przykładowo zmieniam fonta na mniejszego lub kolor i brak efektów po zapisaniu i odświeżeniu strony. Korzystam z visual studio code.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Saira Condensed;
}
header {
display: flex;
}
@media (min-width: 360px) and (orientation: portation) {
div.hello {
margin: 25% 10%;
width: 80%;
color: red;
}
}
section.welcome {
height: 100vh;
background-color: #0D0D0D;
width: 50%;
}
div.hello {
margin: 25% 10%;
width: 80%;
color: rgb(218, 214, 214);
}
div.hello p {
font-size: 40px;
}
div.hello h1 {
font-size: 40px;
}
div.hello h2 {
font-size: 40px;
}
section.welcome1 {
height: 100vh;
background-color: #262626;
width: 50%;
}
section.welcome1 h1 {
color: rgb(218, 214, 214);
font-size: 40px;
text-align: center;
margin-top: 100px;
text-transform: uppercase;
;
}
div.html img {
display: flex;
margin: 0 auto;
margin-top: 100px;
}
div.html {
background-color: #e54d26;
}
div.css img {
display: flex;
margin: 70px auto;
}
div.css {
background-color: #3799d6;
}
button {
margin-top: 50px;
width: 50%;
height: 80px;
font-size: 25px;
text-transform: uppercase;
transition: 0.33s;
border: none;
border-radius: 3px;
}
button:hover {
background-color: #8C8C8C;
}
<!DOCTYPE HTML>
<html lang="pl">
<head>
<!-- kodowanie znaków, możemy używać polskich znaków -->
<meta charset="utf-8" />
<!-- sposób wyświetlania na urządzeniach mobilnych -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- tytuł stron. m.in. w wynikach wyszukiwania -->
<title> Portfolio</title>
<!-- importujemy czcionkę, żeby jej użyć -->
<!-- Czcionka Baloo Bhaina2 -->
<link href="https://fonts.googleapis.com/css2?family=Exo:wght@400;500&family=Teko&family=Ubuntu&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Saira+Condensed:400,700|Saira:300,400&subset=latin-ext"
rel="stylesheet">
<!-- ikonka strony -->
<link rel="icon" href="favicon.png">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<script src="https://kit.fontawesome.com/19e8f3a90d.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
<script>
</script>
</head>
<body>
<header>
<section class="welcome">
<div class="hello">
<p>Witaj!</p>
<h1>lorem </h1>
<h2>lorem
</h2>
<button>Zobacz moje portfolio</button>
</div>
</section>
<section class="welcome1">
<h1>Technologie które dotychczasowo poznałem </h1>
<div class="html">
<img src="../img/html.png" alt="">
</div>
<div class="css">
<img src="../img/css.png" alt="">
</div>
</section>