[CSS] WP plguin 100% van schermbreedte maken

[ImmortalSoul]

Momenteel gebruik ik een wordpress fotogallerij die netjes gebruik maakt van de volledige schermbreedte (http://tiny.cc/98vmty) en de gallerij op 90% van het scherm laat zien.

Nu wil ik een andere add-on gebruiken (http://tiny.cc/h7vmty), maar ik krijg deze niet op de volledige breedte van het scherm.

De standaard css is hier te zien: https://github.com/ronakg...lugin/blob/master/afg.css

In de add-on zelf kan ik nog custom css toevoegen om dit te overrulen.

Als ik in chrome met de devtools de afg-table op (bijv) 1500px zit, en de foto's los 500px maakt dan ben ik een stap dichterbij ... maar dit effect krijg ik niet als ik width:1500; in de custom css toevoeg.

width:100% !important; werkt ook niet.

Ik heb ook al proberen uit te zoeken wat de configuratie van die andere add-on was, maar dat is me ook niet gelukt.

[DJMaze]

Cascading Stylesheet:

#swipebox-slider .slide {
    padding: 0 10%;
}

Maar goed, definieer eens "volledige breedte van het scherm", want mijn browser venster is 1024 en daar past ie precies in.
En mijn PC scherm is 3440 breed en daar past mijn browser 3x in (of een file explorer + browser + Geany IDE)

Maar ga niet schalen en denken dat in "full screen view" op 3440 de afbeelding past, want daar is mijn scherm niet hoog genoeg voor. Neem aan dat je afbeeldingen namelijk niet 21:9 zijn

[ Voor 91% gewijzigd door DJMaze op 14-05-2018 20:13 ]

[ImmortalSoul]

DJMaze schreef op maandag 14 mei 2018 @ 20:06:

Cascading Stylesheet:

#swipebox-slider .slide {
    padding: 0 10%;
}

Maar goed, definieer eens "volledige breedte van het scherm", want mijn browser venster is 1024 en daar past ie precies in.
En mijn PC scherm is 3440 breed en daar past mijn browser 3x in (of een file explorer + browser + Geany IDE)

Maar ga niet schalen en denken dat in "full screen view" op 3440 de afbeelding past, want daar is mijn scherm niet hoog genoeg voor. Neem aan dat je afbeeldingen namelijk niet 21:9 zijn

Op dit moment wordt alles maximaal 1150px breed (omdat mijn site dat is). Ik wil dat die foto gallerij plugin uitschaalt naar de volledige resolutie van het scherm (de afbeeldingen worden maximaal 500px breed per stuk). Mijn vorige foto plugin gebruikte gewoon de volledige breedte van het scherm, maar de nieuwe plugin nog niet.

Ik heb overigens een goede basiskennis op het gebied van CSS/HTML, dingen aanpassen en simpele dingen bouwen lukt me (maar complete sites omvormen niet).

[DJMaze]

Gebruik position:fixed

[ImmortalSoul]

DJMaze schreef op maandag 14 mei 2018 @ 21:50:
Gebruik position:fixed

Dat heeft me al een heel stuk geholpen.

Bij een fixed position was er geen scrollbar, dus ik heb er "absolute" van gemaakt.

Ik heb nu dit:

code:

div.afg-gallery {
    position: absolute;
        width: 98%;
    max-width: 1512px;
}

Dit is het resultaat. Nu moet het geheel nog gecentreerd in het scherm zijn als het groter is dan 1512px, want nu wordt er een DIV gebruikt als uitgangspunt waardoor het geheel naar rechts staat.

[DJMaze]

HTML:

<div style="position:fixed; top:0; right: 0; bottom:0; left:0; background:#000">
    <div style="max-width: 1512px; margin: 0 auto;">
    </div>
</div>

[thaicecube]

Cascading Stylesheet:

.afg-gallery {
    position: absolute;
    left: 0;
    right: 0;
}

.afg-gallery .afg-cell {
     text-align: center;
}

Is dit wat je wilt?

[ Voor 4% gewijzigd door thaicecube op 15-05-2018 14:22 . Reden: verwijder onnodige regel ]

[Albinoraptor]

Ik zou niet met left:0 en right:0 werken, heb wel eens rare dingen zien gebeuren in browsers daardoor.

Ik zou het zo doen:

Cascading Stylesheet:

.afg-gallery {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
     transform: translateX(-50%);
}

Ikzelf zou nog iets van linker/rechter padding toevoegen, dat als afg-gallery niet compleet 100% breed is op kleinere schermen.

Wat me ook opviel is dat als je responsiveness test als je viewport veranderd, dat de afg-cell de hoogte niet overnieuw berekent. Je switched van portrait naar landscape krijg je flinke witte lappen naast iedere foto.

[ImmortalSoul]

De foto gallerij is nu goed, bedankt voor jullie antwoorden!

Het enige wat nu nog verkeerd is, is dat de "edit" knop/tekst van WP nu gewoon over de gallerij heen wordt geplaatst: https://imgur.com/a/6vIxQM1. Dit is in feite niet erg, want het is alleen zichtbaar bij mij.

Ik weet dat het iets met de position heeft te maken, maar zowel fixed als absolute hebben dit probleem.

[DJMaze]

ImmortalSoul schreef op maandag 14 mei 2018 @ 20:39:
Ik heb overigens een goede basiskennis op het gebied van CSS

z-index is het sleutelwoord hier

[ImmortalSoul]

DJMaze schreef op woensdag 16 mei 2018 @ 01:40:
[...]


z-index is het sleutelwoord hier

z-index gaat toch over de positie van elementen die op elkaar liggen? Ik wil juist dat het element van die edit knop na de fotogallerij komt.

[DJMaze]

Leg twee velletjes papier op elkaar.
De tweede ligt nu over de eerste.
De eerste ligt nu onder de tweede.

Schrijf op het eerste velletje "edit", schrijf op het andere "gallerij".
Geef het eerste velletje een z-index:1 en hij ligt nu over de tweede.
Geef het tweede velletje een z-index:2 en hij ligt nu weer over de eerste.

Op, over, onder, bovenop, onderop, etc. zijn niet duidelijk in een 3D omgeving.
Daarom hebben we X, Y en Z.

Jij schreef

ImmortalSoul schreef op dinsdag 15 mei 2018 @ 23:27:
... over de gallerij

[ Voor 15% gewijzigd door DJMaze op 16-05-2018 21:46 ]