Guten Tag
Ich habe ein kleines Problem. Ich programmiere gerade eine Gallery und fast alles geht perfekt ausser der Ansicht auf dem Smartphone.
Da habe ich folgendes Problem, dass sich die einzelnen Bilder nicht je nach Grösse des Displays anders anordnen. Also z.B es hat Vier Bilder neben einander und wenn nun der Browser/Display kleiner wird sind es nur noch zwei, dafür sind die restlichen zwei unten dran.
Für diese Anordnung arbeite ich mit Display inline-block aber komischer weisse geht es auf dem Pc perfekt und auf dem Smartphone geht es nicht. Weil da verschwinden einfach die Bilder, statt sich unter einander an zu ordnen.
Hier mal mein HTML Teil und mein CSS Teil. Dazu bedanke ich mich jetzt schon für eure HilfeJ
HTML
CSS
Ich habe ein kleines Problem. Ich programmiere gerade eine Gallery und fast alles geht perfekt ausser der Ansicht auf dem Smartphone.
Da habe ich folgendes Problem, dass sich die einzelnen Bilder nicht je nach Grösse des Displays anders anordnen. Also z.B es hat Vier Bilder neben einander und wenn nun der Browser/Display kleiner wird sind es nur noch zwei, dafür sind die restlichen zwei unten dran.
Für diese Anordnung arbeite ich mit Display inline-block aber komischer weisse geht es auf dem Pc perfekt und auf dem Smartphone geht es nicht. Weil da verschwinden einfach die Bilder, statt sich unter einander an zu ordnen.
Hier mal mein HTML Teil und mein CSS Teil. Dazu bedanke ich mich jetzt schon für eure HilfeJ
HTML
PHP-Code:
<main id="Gallery">
<div class="Gallery">
<div ><table id="GalleryTitel"><tr><td class="GalleryTitelTd">Snowboard</td></tr></table></div>
<table id="GalleryInhalt1">
<tr id="GalleryTR">
<td id="GalleryTD"> <a href="#Bild1" tabindex="1"><img src="../Galleryimag/Bild1.JPG" alt="Snowboard"></a></td>
<td id="GalleryTD"><a href="#Bild2" tabindex="1"> <img src="../Galleryimag/Bild2.JPG" alt="Snowboard"></a></td>
<td id="GalleryTD"><a href="#Bild3" tabindex="1"> <img src="../Galleryimag/Bild3.JPG" alt=" Snowboard"></a></td>
<td id="GalleryTD"><a href="#Bild4" tabindex="1"><img src="../Galleryimag/Bild4.JPG" alt="Snowboard"></a></td>
</tr>
</table>
<figure id="Bild1" class="BildGross"><img src="../Galleryimag/Bild1.JPG" alt=" Snowboard"><a class="close" id="c1" href="#c1" title="schließen">schließen</a></figure>
<figure id="Bild2" class="BildGross"><img src="../Galleryimag/Bild2.JPG" alt=" Snowboard"><a class="close" id="c1" href="#c1" title="schließen">schließen</a></figure>
<figure id="Bild3" class="BildGross"><img src="../Galleryimag/Bild3.JPG" alt=" Snowboard"><a class="close" id="c1" href="#c1" title="schließen">schließen</a></figure>
<figure id="Bild4" class="BildGross"><img src="../Galleryimag/Bild4.JPG" alt=" Snowboard"><a class="close" id="c1" href="#c1" title="schließen">schließen</a></figure>
</main>
CSS
PHP-Code:
#Gallery{
position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;}
.Gallery{
width: 100%;
height: auto;
min-height: 100%;
max-height: 5000px;
min-width: 100px;
max-width: 4069px;
background-color: #ffffff;
margin-left: auto;
margin-right: auto;}
#GalleryTitel{
width: 100%;
height: 50px;
margin-left: auto;
margin-right: auto;
padding-bottom: 4%;
}
.GalleryTitelTd{
width: 100%;
height: 144px;
margin-left: auto;
margin-right: auto;
padding: 0.2em;
color: rgba(10, 3, 8, 0.8);
font-family: "Georgia", sans-serif;
text-align: center;
font-size: 12vw;
}
#GalleryInhalt1{
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#GalleryTR{
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#GalleryTD{
display: inline-block;
list-style-type: none;
width: 25%;
padding: 2em;
margin-left: auto;
margin-right: auto;
text-align: center;
}
img {
padding: 0;
margin: 0;
width: 100%;
}
#GalleryButton{
padding: 0.1em;
}
button:focus,
button:hover {
background: rgba(49, 49, 49, 0.87);
}
.GalleryTD {
width: 10em;
top: 0;
}
.BildGross{
position: fixed;
top: -2%;
border: 0px;
margin-left: 0px;
margin-right: 0px;
background-color: rgba(0, 0, 0, 0.79);
border: 0.1em solid #3983ab;
border-radius: 0 8px 8px;
padding: 1em 1em 0.2em;
width: 97.7%;
height: 97%;
overflow: auto;
display: none;
z-index: 5000;
}
.BildGross img{
width: 75%;
margin-top:0.5%;
margin-left: 14%;
}
.BildGross:target {
display: block;
}
.close {
width:0;
height:0;
border: 0;
text-shadow: none;
color: transparent;
}
.close:after {
position: absolute;
top: 1em;
right: 1em;
content:"X";
color: #ffffff;
background: #a30606;
font: font: bold 1em/150% Georgia, Times, serif;
border: 0.1em solid rgba(0, 0, 0, 0.76);
border-radius: 0 8px 0px 8px;
display: block;
text-align:center;
width: 1.5em;
height:1.5em; padding:0.2em 0 0 0em;
}
Kommentar