machen eine reaktive css Vollbild 100% Breite, zwei Zeilen drei Spaltenraster (Bilder Hintergrund und Text-Overlay)

Question

Guten Tag alle.

Ich habe hier viele Male Hilfe gefunden und schätze diese Plattform sehr! Danke an alle!

Dies ist meine erste Frage hier und ich frage wahrscheinlich ein bisschen zu viel.

Ich versuche, ein kleines „Webapp“ zu bauen, das aktuelle Zeit zeigt, Sonnenaufgang/Sonnenuntergang, Wetter und so weiter zu trainieren, mich mit Javascript/APIs ...

Ich mag würde eine volle Breite bauen Gitter (please see screenshot here). So dass es immer Vollbild ist, egal welche Desktopgröße. (Auf Tablet wenn möglich nur zwei Spalten) und auf Smartphones 1colum volle Breite. Auf jedem der 6Divs im Raster möchte ich ein anderes Hintergrundbild und einen zentrierten Overlay-Text für die Datenanzeige erhalten. Aber das könnte ich bauen.

Ich versuchte mit Bootstrap aber nicht bekommen, was ich wollte, also wäre es toll, wenn dies mit regelmäßigen CSS gemacht werden könnte. kein Rand, Polsterung, Raum überhaupt.

Kann mir bitte jemand hier helfen? Vielen Dank im Voraus!

Answer 1

bitte einen Blick auf diesen Link https://jsfiddle.net/gxjowd7y/3/

body, html{ 
 
    height:100%; 
 
} 
 

 
.box-a{ 
 
    background:green; 
 
    height:50%; 
 
} 
 

 
.box-b{ 
 
    background:purple; 
 
    height:50%; 
 
} 
 

 
.box-c{ 
 
    background:orange; 
 
    height:50%; 
 
} 
 

 
.box-d{ 
 
    background:red; 
 
    height:50%; 
 
} 
 

 
.box-e{ 
 
    background:gray; 
 
    height:50%; 
 
} 
 

 
.box-f{ 
 
    background:blue; 
 
    height:50%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<div class="col-md-4 col-sm-6 col-xs-12 box-a"> 
 

 
</div> 
 

 
<div class="col-md-4 col-sm-6 col-xs-12 box-b"> 
 

 
</div> 
 

 
<div class="col-md-4 col-sm-6 col-xs-12 box-c"> 
 

 
</div> 
 

 
<div class="col-md-4 col-sm-6 col-xs-12 box-d"> 
 

 
</div> 
 
<div class="col-md-4 col-sm-6 col-xs-12 box-e"> 
 

 
</div> 
 
<div class="col-md-4 col-sm-6 col-xs-12 box-f"> 
 

 
</div>