masonry gallery responsive?

**tilda** · 11.07.2016, 22:12

guten Abend,

gibt es die Möglichkeit, die Masonry gallery responsive zu machen?
Ich würde gerne die Dreispaltigkeit entfernen udn die Inhalte untereinander laufen lassen.

Beste GRüße
Tilda

**Kahmoon** · 12.07.2016, 08:12

Bei mir passt sich Masonry Galerie von Haus aus an die Bildschirmbreite an und wird bei mobile einspaltig.

**Max Kittel** · 12.07.2016, 10:24

Ich möchte mich hier gerne anhängen: Auf der Seite www.y2016.de stelle ich Nachrichten in einer Masonry Galerie dar. Bis zu einer Breite von ca. 500 px wird der Text neu umbrochen. Zieht man das Fester kleiner wird der Text rechts abgeschnitten. Was mache ich hier falsch?

**mlweb** · 12.07.2016, 11:56

Zitat von Max Kittel

Bis zu einer Breite von ca. 500 px wird der Text neu umbrochen. Zieht man das Fester kleiner wird der Text rechts abgeschnitten. Was mache ich hier falsch?

Der css-code

Code:

.first .masonry_item {
    width: 450px;
}

und ein inline-style

Code:

width: 450px

sind die Ursache dafür.

**tilda** · 13.07.2016, 20:29

Hallo Zusammen,
mein Problem ist, dass ich beim Handy
nur die erste Spalte untereinander sehe, alle weiteren Spalten fehlen.

Am liebsten hätte ich alle Bilder unetreinander in nur einer Spalte.
Ich poste mal meinen Code.

Beste Grüße
Tilda

Code:

figure {
    position:relative;
    background:white;
}

figure img {
    display:block;
    max-width:90%;
    height:auto;
}

figure:hover img {
    opacity:0.8;
}

figure figcaption {
    opacity:0;
    visibility:hidden;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.8);
    color:white;
    text-align:center;
    padding:4px 0;
    z-index:2;
    transition:0.4s;
}

figure:hover figcaption {
    opacity:1;
    visibility:visible;
}  

figure:hover img {
    opacity:0.4 !important;
}


.msry_theme_standard .masonry_gallery {
    margin-bottom: 10px;
    padding: 0px;
    background-color: rgb(245, 245, 245);
    border-radius: 0px;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 1px 5px rgba(0, 0, 0, 0.1);
}
.msry_theme_standard .masonry_gallery figcaption {
    box-sizing: border-box;
    position: absolute;
    bottom: 80px;
    padding: 3px 6px;
    z-index: 1;
    color: rgb(0, 0, 0);
    background: transparent none repeat scroll 0% 0%;
    opacity: 0;
    font-size: 30px;
    text-transform: uppercase;
}

**tilda** · 13.07.2016, 21:38

vielleicht habe ich ja auch etwas unter den Artikeln nicht richtig gemacht... (?)
Ich habe die masonry gallery einfach als Masonry-gallery angelegt, ohne Umschlag Anfang und Ende...

Ist das vielleicht das Problem?

**tilda** · 18.07.2016, 11:24

Hallo Zusammen,

hier nochmal meine Frage:
Was muss ich tun, damit aus einer Mehrspaltigkeit der masonery gallery auf dem Handy eine Einspaltigkeit daraus wird????

Beste Grüße
Tilda