wie Bilder im Beitrag darstellen bei einer responsive Template

    Ich hatte jetzt nach langer Zeit meine Seite auf Joomla 3.9 umgestellt.

    Gezwungen durch die Umstellung von php.

    War noch mit Joomla 1.5 gemacht und hatte die Arbeit bisher gescheut.

    Als Template habe ich die DD Bicycle Club 55 von diablodesign genommen.

    Jetzt hatte ich von Google die Nachricht bekommen , das einige Bilder für die Darstellung auf mobile Geräte zu groß ist.

    Beispiellink

    Stimmt , wurde durch die Tabelle verursacht. Es sind aber noch mehr Seiten betroffen.

    Jetzt aber zu meiner Frage.

    Wie stellt ihr die Bilder in euren Beitrag dar, so das sie nicht zu groß für mobile Geräte sind , aber auch nicht zu klein für große Monitore?

    Danke für eure Tipps.

    Wahrscheinlich ist das Template schon nicht responsive entwickelt worden. Ich weiß nicht, wie alt deine Seite schon ist und wann du dein Template installiert hast. Aber ich fürchte, dass es nicht ganz einfach wird, dieses Template nun nachträglich so zu verändern, dass es responsive wird.

    Die Template ist Responsive.



    Google meckert noch mehr rum

    Problem 2 (Darstellungsbereich nicht festgelegt)

    Link

    Ist mit der Komponente Phoca Gallerie gemacht

    Macht doch die Komponente alleine. Weiß garnicht wie ich den Fehler abstellen soll.



    Problem 3


    Anklickbare Elemente liegen zu dicht beieinander

    Link Link2

    Keine Ahnung warum, finde keinen Unterscheid zu anderen Seiten


    Problem 4

    Text ist zu klein zum Lesen

    link


    Habe schon in den Einstellungen bei Phoca Gallerie Geschaut, aber nichts von Schriftgröße in der Bildbeschreibung gefunden.


    Danke für eure Tipps.

    Du hast ja z. B. auf deiner Startseite mit einer Table gearbeitet, um Gaststätte + Adresse und daneben Bild anzuzeigen.


    Versuch mal dem Table Tag die Klasse "table" hinzuzufügen und schau dann mal, ob und wie sich das auswirkt:


    also so in etwa: <table class="table">


    Dazu musst du natürlich in den HTML Code des Beitrags rein, falls du normalerweise immer mit einem Editor arbeitest.


    Ich weiß nicht, ob das helfen wird, aber man könnte es mal ausprobieren.

    Habe die Tabelle entfernt.

    Hattes es erst mit float den text neben das Bild zu plazieren, hatte sich dann aber mit den anderen Bild überlagert.

    Ich glaube man müßte dann den Float wieder Cleanen. Weiß aber nicht genau wie das geht.

    Habe es erstmal untereinander gemacht.

    Auf Mobile ist die Breite jetzt okay.

    Lag wirklich an den Tabellen.

    War damals aber eine gute Idee um es optisch gut zu palzieren.


    Habt ihr noch zu den anderen 3 Problemen ein Lösungsansatz?

    Hallo,


    zur Phocagallery:


    zu #10 eine Mini-korrektur: div.pg-cv-desc {.....}

    Zitat von Svenoldman

    Problem 4

    Text ist zu klein zum Lesen


    Habe schon in den Einstellungen bei Phoca Gallerie Geschaut, aber nichts von Schriftgröße in der Bildbeschreibung gefunden.

    über CSS:

    Code
    .pg-cv-name {
font-size: 13px;
}

    Änderungen an der CSS entweder in Deine template.css (ans Ende), besser:

    direkt in der PG eine custom.css erstellen.

    PG > Themen oder Stile > CSS Datei bearbeiten, dann Neu. Sieht dann in etwa so aus:



    Zur Vergrößerung des Namens (siehe Code oben):


    Leider ist manch Name ein bisschen zu lange & wird dadurch rausfließen.


    Dadurch, dass Du links und rechts Module hast, ist nicht viel Platz für die Galerie. Die Boxen könnte man größer machen (u.a. auch einstellbar in den Optionen).

    https://www.reisefotografien.e…y-komponente/295-optionen


    Allerdings sollten dann auch die Vorschaubilder Größe: "m" größer sein, also statt 100px > 150px. Heißt aber auch, da müssten (nach Änderung der Boxgrößen) die Bilder neu generiert werden. Das war jetzt nur als Info gedacht.


    Liebe Grüße

    Christine

    Jetzt bin ich etwas überfordert.

    In der Komponente Pocagalerie unter Stile

    gibt es 3 css

    Phocagaerie.css

    Rating.css

    default.css

    Also soll ich eine 4 ertsellen

    custum.css

    mit genau diesen code?

    Code
    .pg-cv-name {

font-size: 13px;

}

    Muß das Wort name rein oder für was steht das?

    Ich brauch da nochmal ein Anstoß.

    Zitat von Svenoldman

    Muß das Wort name rein oder für was steht das?

    Ich brauch da nochmal ein Anstoß.

    Ja, genauso den Code übernehmen.

    Wenn du die Seite mit F12 untersuchst, findest du im Code beispielsweise folgendes:


    <div class="pg-cv-name pg-cv-folder">Gühlen Glienicke</div>


    Ungeändert kommt über die default.css ein font-size: x-small .

    Habe es in der default.css geändert


    .pg-cv-name {

    text-align: left;

    margin-top: 5px;

    von font-size: x-small in font-size: 13px;


    Ich sehr keine Änderung.

    Im Quelltext dann auf der Seite mit dem Bild kann ich auch keine Schriftgröße erkennen

    Habe auch mal

    text-align: left; statt left in center umbenannt

    Aber der Text bleibt links stehen

    Verstehe ich nicht

    Also der derzeitige Ist-Stand ist:



    man sieht sehr wohl die Änderungen :)

    Musst halt nach einer Änderung auch Cache löschen bzw. neu aufrufen.


    Wenn ich (obigen) Code temporär ändere auf z.B. text-align: center, oder font-size: 14px; kann man das sehen.

    Nach Speicherung sowieso.


    Du hast also keine custom.css erstellt.

    Änderungen in der default.css werden beim nächsten Phoca Update wieder überschrieben (Originaldaten).


    Na gut, kannst ja Deine Änderungen von oben in die template.css (ans Ende) setzen.

    Es genügt: Nur DAS, was man ändern möchte.


    Beispiel:

    .pg-cv-name {

    font-size: 13px;

    }

    weil die anderen Werte sind ja ex fix in der default.css


    Liebe Grüße

    Christine

    Hallo Christine, du hast recht mit dem update. Habe es so wie du beschrieben hast umgesetzt und eine costum.css angelegt mit dem Inhalt.

    In der Vorschau sieht man jetzt wenn ich die größe ändere.

    Aber wie sieht es mit dem Bild aus , wenn ich es anklickt habe , dann öffnet sich ja ein fenster mit dem Bild in Groß.

    Da belibt der Text klein links in der Ecke gequetscht.