Ciao , scusarmi per il mio italo-spagnolo... , è da piu una Settimana che cerco una soluzione per il mio Problema , é scrito in diversi Forum(Inglese , spagnolo e Tedesco) , ma nesuno mi a risposto al mio Problema ...
La mia Pagina Web e fatta con Grid Layout .
Voglio fare una Media Query Image per Desktop, Tablet e Smartphone .Nello tre apparecchi , il header-Element si fa grossa e la foto gira a destra .... , come il mio problema é in li tre apparecchi e per semplificare il Code , scrivo qua il code per Desktop , lavoro in http://localhost .
Cello Tre File .
hope.php , dove cello il mio html code,
Il resto dello Code qua .
Dopo cello il hope_query.css , per il mio Media Query ,
e il ultimo , hope_windows.css , perche non cella nesun effecto nello mio problema , non lo scrivo , ma se lo volete guardare , é qua .
Uno Screenshot del mio Computer ,
Mi potete aiutare per risolvere queste problema , Gracie !
La mia Pagina Web e fatta con Grid Layout .
Voglio fare una Media Query Image per Desktop, Tablet e Smartphone .Nello tre apparecchi , il header-Element si fa grossa e la foto gira a destra .... , come il mio problema é in li tre apparecchi e per semplificare il Code , scrivo qua il code per Desktop , lavoro in http://localhost .
Cello Tre File .
hope.php , dove cello il mio html code,
HTML:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Computer</title>
<link rel="stylesheet" href="/meine/hope/hope_windows.css">
<link rel="stylesheet" href="/meine/hope/hope_query.css">
</head>
<header>
<picture class="bilder">
<source media='(min-width: 320px) and (max-width: 568px) and (orientation: portrait)' srcset='/meine/hope/night_hoppe.JPG'/>
<source media='(max-width: 768px) and (orientation: landscape)' srcset='/meine/hope/night_smartphone.JPG'/>
<source media='(min-width: 1280px)' srcset='/meine/hope/night.JPG'/>
<img src='/meine/hope/night_smartphone.JPG' alt='night'>
</picture>
</header>
<body>Dopo cello il hope_query.css , per il mio Media Query ,
Codice:
@media (min-width: 1025px) and (max-width: 1280px) {
body {
display: grid;
display: -ms-grid;
background-color: #eaf6e5;
grid-row-gap: 5px;
grid-template:
"header header header" auto
"nav nav nav" auto
"main main gap1" 1em
"main main werb" 11em
"main main gap2" 3em
"main main info" 1fr
"footer footer footer" auto / 8% 64% 28%;
-ms-grid-columns: 8% 64% 28%;
-ms-grid-row: 120px 80px 103px 200px 110px 90px;
-ms-grid-gap: 5px;
}
.dropdown-content a {
padding: 10px 12px;
}
.dropdown:hover .dropdown-content {
top: 28px;
}
}
header {
grid-area: header;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
background-image: url("Bilder/view.JPG");
background-repeat: no-repeat;
background-size: cover;
padding: 65px;
}
.
.
.e il ultimo , hope_windows.css , perche non cella nesun effecto nello mio problema , non lo scrivo , ma se lo volete guardare , é qua .
Uno Screenshot del mio Computer ,
Mi potete aiutare per risolvere queste problema , Gracie !
Ultima modifica:
