it-swarm.com.de

Stellen Sie die Breite der Modultabelle auf die Breite des Moduls ein

Ich verwende das Modul Display News Mit der benutzerdefinierten Klasse dn auf meiner Homepage, um die zuletzt veröffentlichten Artikel anzuzeigen. Die Breite des Moduls wird an die Größe des Bildschirms angepasst, jedoch nur, wenn der Bildschirm breiter als 410 Pixel ist. Auf einem Smartphone mit einem 320px-Bildschirm wird der Text im Modul abgeschnitten.

enter image description here

Ich habe eine vorübergehende Lösung gefunden, aber durch Festlegen der Breite von blogdn width die Regel @media.

@media (max-width: 410px) { 

.blogdn {
width:270px;
    }
}

Aber ich muss 5 verschiedene max-width Mit @media Einstellen, um zu verhindern, dass der Text für alle Bildschirmbreiten zwischen 320px und 410px abgeschnitten wird. Da dies keine sehr gute Lösung ist, versuche ich, etwas anderes zu finden.

Ich habe mehrere Ansätze ausprobiert: Hinzufügen von position relative Zum übergeordneten div oder Hinzufügen von display: block; overflow: hidden; aber ohne Erfolg.

Jede Hilfe wäre sehr willkommen. Hier ist meine Website: http://www.rscmovement.org/en/

Es gibt auch etwas Seltsames: In der französischen Version der Website wird das Modul bei einer Bildschirmbreite von 400 Pixel gekürzt, in der englischen Version jedoch nicht. Konnte nicht finden warum.

EDIT: Diese Abhilfe scheint besser zu funktionieren als die @media, danke Lodder!

.moduletabledn{
display: block;
overflow: hidden;
    }

.moduletabledn tbody{
display: block;
overflow: hidden;
    }   

.moduletabledn tr{
display: block;
overflow: hidden;
    }   
.moduletabledn td{
display: block;
overflow: hidden;
    }   
1
MagTun

Als erstes würde ich die Bilder 100% breit machen und display:block; für Handys. Text sollte auf Mobilgeräten nicht um Bilder herum geschrieben werden, da lange Wörter das untergeordnete Element aus dem übergeordneten Element verschieben können.

Ich würde auch vorschlagen, dass Sie für die Klasse blogdn 100% Breite anstatt bestimmter Pixel verwenden.

Sie haben auch einen Rand und ein Auffüllen, das auf dem megamod eingestellt wird, das den Inhalt drückt.

Möglicherweise möchten Sie in die Box Sizing -Eigenschaft schauen, wenn Sie Abstände und Ränder verwenden

1
Lodder