# media-queries min-width und max-width



## rernanded (26. Juni 2021)

Hallo

ich will min-width und max-width kombinieren

Und zwar soll alles bis 600px Gerätebreite
und alles zwischen 601px und 1200px Gerätebreite
teils unterschiedliche Properties haben.

Ich nutze (top,left,right sind unterschiedlich) folgende media queries:

```
@media (min-width: 601px) and (max-width: 1200px){
#intro {
    position: absolute;
    top: 70%;
    left: 25%;
    right: 25%;
    z-index: 100;       
    background: #FFF;
    color: #ff5500;   
    font-family: Lato;
    font-size: 13px;     
            /*box-shadow: 30px 30px 30px #cccccc;*/
    border: 6px solid #fff;
    border-radius: 30px;
    padding: 13px 13px 13px 13px;    
}   
}
@media (max-width: 600px) {
#intro {
    position: absolute;
    top: 40%;
    left: 10%;
    right: 10%;
    z-index: 100;       
    background: #FFF;
    color: #ff5500;   
    font-family: Lato;
    font-size: 13px;     
            /*box-shadow: 30px 30px 30px #cccccc;*/
    border: 6px solid #fff;
    border-radius: 30px;
    padding: 13px 13px 13px 13px;    
}   
}
```
Das funktioniert aber nicht so richtig, es werden nur die properties aus den oberen media queries für #intro wirksam.
MONI


----------



## Sempervivum (26. Juni 2021)

Hm, wenn ich das in eine Testdatei eintrage mit diesem HTML:

```
<body>
    <div id="intro">
        ABC
    </div>
</body>
```
funktioniert es einwandfrei, die Position schlägt um bei 600px. Ich vermute, dass es irgend wie am Umfeld liegt. Hast Du das online?


----------



## rernanded (26. Juni 2021)

Ich habe es online(BETA), aber ich müsste erst etliche Inhalte entfernen und umbauen, weil das Firmenseiten und Domains sind die erst in Kürze zu sehen sein dürfen.
Lass es uns so versuchen!

Vllt. liegt es an einer versteckten Weiterleitung/Frame-Weiterleitung. Die Hauptdomain www.beispiel123.de wird auf unsere Serverseite umgeleitet, Ziel: www.beispielfirmaabc.de/unterseite/unterunterseite.php.
Und dabei kann ich sehen, dass Inhalte die ich per www.123.de aufrufe anders angezeigt werden als würde ich die www.beispielfirmaabc.de/unterseite/unterunterseite.php direkt aufrufen.

Richtig merkwürdig wird es beim Unterschied zwischen landscape und portrait mit dem Smartphone.

Monika


----------



## basti1012 (27. Juni 2021)

Du solltest versuchen den Fehler nachzustellen und bei codepen.io ein Beispiel erstellen.
So kann man dir nicht helfen.
Was heißt das ?


rernanded hat gesagt.:


> Vllt. liegt es an einer versteckten Weiterleitung/Frame-Weiterleitung.


Öffnest du die Unterseiten in ein iFrame ?
Falls ja, dann weißt du das Problem jetzt.


----------



## rernanded (27. Juni 2021)

Es entsteht ein frameset durch die Weiterleitung. Das Problem taucht aber nur bei Smartphones auf.
Desktops und Tablets machen keine Probleme.
MONI


----------



## Sempervivum (27. Juni 2021)

> Es entsteht ein frameset durch die Weiterleitung.


Kommt mir bekannt vor, ich habe so etwas in einem anderen Projekt, da sieht es im HTML-Inspektor so aus:



Allerdings habe ich dann noch keine Erklärung für das Problem, das Du beschreibst.
Wenn das so ist, müsste alles an CSS-Dateien etc. auf der zweiten Domain liegen, die das Ziel der Weiterleitung ist (www.beispielfirmaabc.de/unterseite/unterunterseite.php). Was aber der Fall zu sein scheint, denn Du schreibst ja, dass diese Seite bei Direktaufruf funktioniert.


----------



## basti1012 (27. Juni 2021)

Ohne den Code zu kennen, kann man nur raten.
Ich könnte mir noch vorstellen.
Wenn die Seite z. B. 700px breit ist, der iFrame aber ein breite hat von 80 % ,dann läuft im iFrame eine andere Mediaqueries Code, weil de iFrame noch kleiner als 600px ist.

TO: Versuch doch mal ein Beispiel zu erstellen.
Kopiere den Code den man brauch , um den Fehler nachzustellen und ersetzte den Text durch lorem ipsum.


----------



## rernanded (27. Juni 2021)

Hallo Ihr zwei,
Probleme gibt es wie gesagt nur bei SmartPhones.

Bei Aufruf der www.beispiel123.de bekomme ich folgenden Quelltext der durch die Weiterleitungsfunktion des Domainproviders erzeugt wird:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head><meta name="robots" content="noindex,follow">
<title>123</title>
</head>
<frameset rows="100%">
<frame name="16248019791" src="www.beispielfirmaabc.de/unterseite/unterunterseite.php" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scrolling="auto" frameborder="no" noresize>
</frameset>
</html>
```

Ich könnte nun im css das frameset und den frame noch mit properties versehen. Bzw. ich kann das ja nur allgemeingültig machen, da ich keine class oder id habe.

Ausserdem ist der DOCTYPE ein anderer als bei der www.beispielfirmaabc.de/unterseite/unterunterseite.php.
Dort lautet er nur

```
<!DOCTYPE html>
```

Ich würde die versteckte Weiterleitung ändern und gut wär's. Nur mein Boss will das nicht. 

Wie geschrieben, die Lösung könnte also sein im css das frameset und das frame mit properties zu versehen die ansonsten für body gelten. Ist das eine gute Idee???????????

MONI


----------



## basti1012 (27. Juni 2021)

Wenn es nur Handys betrifft,
versuch doch mal das in den <head> zu setzen

```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Und wenn möglich versuche auch überall den HTML5 DOC Type zu nutzen.

Wenn das nicht geht, zeig uns mal den Code von der Unterseite.


----------



## rernanded (27. Juni 2021)

Bitte schön, Deinen meta viewport hatte ich schon drin:

```
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>blablabla</title>
<meta property="og:title" content="blablabla"/>
<meta property="og:type" content="article"/>
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="blablabla"/>
<meta NAME="keywords" content="blablabla">
<meta name="google-site-verification" content="123456789012345678901234567890" />



<link rel="icon" href="???.ico">

<link href="123.css" rel="stylesheet">
   <link href="123_media_queries.css" rel="stylesheet">



</head>
<body>
...
```


----------



## Sempervivum (27. Juni 2021)

Heißt das, dass der Hinweis aus #9 keinen Erfolg gebracht hat? Ich hatte das jetzt mit meinem Smartphone getestet und es hat damit dann einwandfrei funktioniert, die Position hat beim Wechsel von Hoch- auf Querformat umgeschaltet. Ohne diese Zeile jedoch nicht. Entscheidend war jedoch, dass ich es in die Masterseite mit dem Frameset eingefügt habe. Hast Du darauf überhaupt Zugriff?


----------



## rernanded (27. Juni 2021)

Nein, auf diese Masterseite habe ich keinen Zugriff bzw. ich muß den Domainprovider morgen mal anrufen.
In den Einstellungen zu den Weiterleitungseinrichtungen sehe ich in dem Account den ich einsehen kann, um die Routings vorzunehmen, keine Optionen diesbezüglich.
Die Idee ist aber gut.
MONI


----------



## Sempervivum (27. Juni 2021)

> Nein, auf diese Masterseite habe ich keinen Zugriff bzw. ich muß den Domainprovider morgen mal anrufen.


Das hatte ich schon befürchtet. Ich werde mal checken, ob man von dem Kind-Frame aus etwas machen kann.


----------



## rernanded (27. Juni 2021)

Okay, danke vorab.
Ich denke wir sind der Lösung auf der Spur.

Danke auch an "basti1012".

Ich habe gerade nochmals meine Routing-Optionen beim Domain-Provider gecheckt. Da finde ich nachwievor nichts wie ich DOCTYPE ändern sowie meta viewport einfügen kann.
Morgen kann ich dort erst jemanden persönlich sprechen. Mail habe ich bereits hingeschickt.
MONI


----------



## Sempervivum (27. Juni 2021)

Wie ich schon vermutet hatte, ist es kein Problem, die Metainfo und etwas CSS in den Eltern-Frame einzufügen:

```
<script>
        // document des Eltern-Frames bereit stellen:
        const parentDoc = window.parent.document;
        // Metainfo für Viewport und CSS in den Head-Bereich einfuegen.
        // Das CSS soll sicher stellen, dass der Frame das Browserfenster
        // genau ausfüllt und kein Scrollbars auftreten.
        parentDoc.querySelector('head').insertAdjacentHTML('afterbegin',
            `<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
            <style>html, body {width: 100%; height: 100%;}</style>`
        );
    </script>
```
Dieses Javascript müsstest Du in der Kindseite
www.beispielfirmaabc.de/unterseite/unterunterseite.php
einfügen, am besten am Ende des Body.
Mit meinem Smartphone getestet und funktioniert.
Aber vielleicht hat dein Provider noch eine bessere Idee, dass man von dem Frameset weg kommen kann.


----------



## rernanded (27. Juni 2021)

Hi, ich probier es aus. Danke sehr. Super.
Melde mich wieder, wird aber erst in paar Stunden oder morgen sein.
MONI


----------



## rernanded (28. Juni 2021)

@Sempervivum, Deine Idee hat auch bei mir geklappt, ausser bei älteren Handy-Browsern, aber ich bin noch beim Provider dran.
MONI


----------



## rernanded (28. Juni 2021)

Antwort vom Domainprovider: Eigene Änderungen sind nicht möglich.
MONI


----------



## Sempervivum (28. Juni 2021)

Das ist ja schon mal eine gute Nachricht. Ich nehme mal an, dass Ziel bei der Sache ist, dass der Besucher nur die Eltern-Domain www.beispiel123.de zu Gesicht bekommt und ihm verborgen bleiben soll, dass die Inhalte auf www.beispielfirmaabc.de/unterseite/unterunterseite.php liegen?


----------



## rernanded (28. Juni 2021)

Ja das auch, aber das Hauptziel ist etliche passende und verkaufsfördernde Domainnamen einzusetzen und die jeweils auf unterschiedliche Seiten einer Site zu routen.
Viele Autos = viele Einzelgaragen
oder
Viele Autos = ein Parkhaus
MONI


----------



## Sempervivum (28. Juni 2021)

Verstehe, das macht aber nur Sinn, wenn diese Domains auch sichtbar bleiben und nicht direkt nach www.beispielfirmaabc.de/unterseite/unterunterseite.php umgeleitet wird. Möglicher Weise kann man das auch mit .htaccess hin bekommen.


----------



## Sempervivum (28. Juni 2021)

> Antwort vom Domainprovider: Eigene Änderungen sind nicht möglich.
> MONI





> Das ist ja schon mal eine gute Nachricht.


Da hatte ich jetzt nicht richtig gelesen: Ich hatte "Einige Änderungen sind möglich" verstanden.


----------



## rernanded (28. Juni 2021)

Bei Frameweiterleitungen(=versteckte Weiterleitungen) bleiben die ja Domains sichtbar. Das ist der Grund.
An .htaccess dachte ich auch schon.


----------



## Sempervivum (29. Juni 2021)

.htaccess würde erfordern, dass man es an der Quelle macht aber das ist ja offenbar nicht möglich. Müsstest Du wohl die Probleme mit älteren Browsern versuchen zu beheben, aber schwierig weil die wenigsten solche Browser haben und es nicht untersuchen können.


----------



## rernanded (29. Juni 2021)

Das mit den alten Browserversionen halte ich für vernachlässigbar. Und die Problematik mit .htaccess habe ich auch "festgestellt". Naja, jetzt ist es erstmal halbwegs okay bis das nächste Problem auftaucht. ;-)
MONI


----------

