Linien sind verschoben

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Skyfay

Mitglied
21 März 2020
63
0
6
17
Also halt die symbole zum drücken auch auf dem Handy hab ich das gefühl sie sind grösser geworden.
ähm die linie wenn du auf ein symbol gehst mit dem zeiger.
Ah das ist nur bei mir so online stimmts.
 

Skyfay

Mitglied
21 März 2020
63
0
6
17
Ja komisch wenn ich es mit visual studio Code öffne dann sind sie da aber auf hostpoint nicht.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.839
364
83
67
Bei mir jetzt auch online. Man muss mit Strg+F5 aktualisieren, damit er das externe CSS neu lädt. Die Linien kommen durch dieses:
Code:
a:after {
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: white;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
    border-radius: 10px;
}

a:hover:after {
    width: 100%;
    left: 0;
}
Wenn Du es löschst, sollten sie verschwinden.
 

Skyfay

Mitglied
21 März 2020
63
0
6
17
Ich habe es gelöscht aber es kommt bei mir noch immer.
Und wie kann ich das Menu wieder bisschen kleiner machen?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.839
364
83
67
Ich habe es gelöscht aber es kommt bei mir noch immer.
Auch mit Strg+F5 neu geladen?
Und wie kann ich das Menu wieder bisschen kleiner machen?
Das kannst Du durch das Padding steuern:
Code:
a {
    color: white;
    text-decoration: none;
    letter-spacing: 0.40em;
    display: inline-block;
    padding: 20px 20px; /* <--- hier */
    background-image: linear-gradient(90deg,blue,rgb(173, 45, 135),rgb(207, 103, 6),red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
 

Skyfay

Mitglied
21 März 2020
63
0
6
17
Ah ne jetzt stimmts danke

Dann werde ich jetzt mal die weiteren menus machen und melde mich dann weider.

Vielen lieben dank für deine bisserige Hilfe..
 

Skyfay

Mitglied
21 März 2020
63
0
6
17
Hey ich habe bisschen weiter gemacht und bin bei einem Problem steckengeblieben.
Ich hatte am anfang schon probleme die Instagram Posts in die mitte zu verschieben, allerdings jetzt mit dem Menu gelingt es mir gar nicht mehr.
Kannst du mir da weiter helfen?

 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.839
364
83
67
Erst habe ich es wieder mit Flex gemacht aber dann ist mir eingefallen, dass Du wahrscheinlich wieder bei breitem Viewport zwei nebeneinaner anordnen willst und das ist mit Grid einfacher:
Code:
@media (max-width: 1200px)
.insta-wrapper {
    grid-template-columns: auto;
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    display: grid;
    justify-items: center;
}
 

Skyfay

Mitglied
21 März 2020
63
0
6
17
Okey ich versuche es gleich mal.
Eigentlich hatte ich immer nur 1 übereinander aber 2 sind auch nicht schlecht dann ist die Seite nicht lange...
 

Skyfay

Mitglied
21 März 2020
63
0
6
17
ich habe das so gemacht wie du gesagt hast.
Lieder geht es nicht.
Ich habe eben auch schon viel probiert aber ich denke irgendwie das geht nicht weil es im Code den man von instagram nimmt schon vordefiniert ist.
Der Code ist ja sehr lange...
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.839
364
83
67
Geht nicht gibts nicht. Das geht definitiv, denn ich habe es im HTML-Inspektor getestet. Bei schmalem Viewport sind auf deiner Seite die iFrames auch zentriert. Das CSS ist nur nicht sauber, so wäre es richtig:
Code:
@media (max-width: 1200px)
.insta-wrapper {
    grid-template-columns: auto;
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    display: grid;
    justify-items: center;
}
Und bei breitem Viewport musst Du das selbe für die Basisversion tun:
Code:
.insta-wrapper {
    display: -moz-inline-grid;
    grid-template-columns: auto;
    display: grid;
    justify-items: center;
}
Sieht dann so aus:
grid-centered.png
 

Skyfay

Mitglied
21 März 2020
63
0
6
17
Ah jetzt funktionierts.
Nur ich hab die "hr" also die linie zwischen instagram und den medien rausgenommen und jetzt beim laden sehe ich links immer noch alle bilder einmal kurz durchladen...

Sehe nur ich das oder hast du das selbe auch?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.839
364
83
67
Guten Morgen, versuche dieses CSS:
Code:
iframe:not(.instagram-media-rendered) {
    display:none !important;
}
Es sorgt dafür, dass die Instagram-iFrames zunächst unsichtbar sind, bis die Klasse "instagram-media-rendered" gesetzt wird.
Irgendwo in der CSS-Datei einfügen.
 
  • Like
Reaktionen: Skyfay

Skyfay

Mitglied
21 März 2020
63
0
6
17
Irgendwie funktioniert das nicht ganz bei mir.

Noch ne andere Frage ich habe bei Music noch paar veränderungen mit grid gemacht.
Allerdings hätte ich da gerne 2 nebeneinander.
Wie muss ich das anpassen?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.839
364
83
67
Code:
iframe:not(.instgram-media-rendered) {
    display: none !important;
}
Schreibfehler, da fehlt das a in .instagram-

Die zweite Frage kann kein Problem sein, ich sehe es mir später an ...
 
  • Like
Reaktionen: Skyfay

Skyfay

Mitglied
21 März 2020
63
0
6
17
Danke das hat jetzt auch funktioniert.
Was ich dann auch noch hätte ist aber überhaupt nich dringen, wenn man bei Music auf ne Playlist geht ist da für "Back" noch die alten knöpfe.
Ich will da auch die neuen aber ich möchte trotzdem dass die ganz links in der ecke bleiben.
Ist das umsetzbar?