Das Web einfach erklärt

Wissen und Tipps zum eigenen Internet-Auftritt für jeden einfachst aufbereitet! Dein Mehrwert rund um Web-Lösungen und Sichtbarkeit im World Wide Web.

Chrono Forms Felder Responsive

Chrono Forms Felder Responsive

Wenn es darum geht Formulare für eine Joomla! Website zu erstellen, dann können wir die Extension Chrono Forms sehr empfehlen. Die zahlreichen Möglichkeiten und Funktionen bieten exzellente Möglichkeiten Formulare zu kreiieren. Einen kleinen Nachteil gibt es aber, leider reagiert die Extension noch nicht automatisch auf Smartphones - sprich sie ist nicht responsive.

 

Wie passt man nun also die Felder von Chrono Forms an, damit diese auf kleinere Auflösungen reagieren und auch auf mobilen Endgeräten optimal dargestellt werden. Hierzu verwendet man am besten CSS in Kombination mit dem Media Queries.

Folgenden CSS Code also verwenden um Chrono Forms Felder Responsive zu gestalten:

.gbs3 .chronoform .gcore-input {
    width:100% !important;
}


.gbs3 .chronoform .form-control {
    width:100% !important;
}

 

Noch besser wäre es allerdings dies in Media Queries zu verpacken, damit diese CSS Eigenschaften nur auf kleinen Auflösungen greift:

@media(max-width:767px) {
    .gbs3 .chronoform .gcore-input {
        width:100% !important;
    }

    .gbs3 .chronoform .form-control {
        width:100% !important;
    }
}

 


 

So bleibst du TOP-Informiert!

Wir schreiben laufend interessante Artikel mit rund um das Thema Internet, Websites, Social Media, uvm. Bleibe am laufenden und verpasse nichts!

Joomla! Kategorieblog oder Hauptbeiträge - Spalten...
Darauf sollte man im Responsive Webdesign achten!
 

Kommentare

Derzeit gibt es keine Kommentare. Schreibe den ersten Kommentar!
Bereits registriert? Hier einloggen
Gäste
Sonntag, 19. November 2017

Kostenloser Kurs:

Website Traffic Optimierung E-Mail Kurs

In 5 Schritten zu mehr Website Traffic
Die 5 effektivsten Wege zur Optimierung der eigenen Website-Performance!
Diese 5 Profi-Tipps verhelfen dir zur Optimierung deines Website-Traffics!

Jetzt E-Mail Adresse eintragen und starten: