Responsive ninja forms kolommen

[bwienke]

Mijn vraag

Ik ben bezig met een website waar ik een pagina heb waar mensen zich aan kunnen melden voor een lokaal evenement. Hiervoor gebruik ik de ninja forms plugin.

Bij deze plugin kun je ook met kolommen werken door een aangepaste class naam in te vullen.
Bij 2 kolommen kan dat door bij het eerste veld one-half first toe te voegen en bij het tweede veld one-half.

Het probleem is dat bij mobiele weergave dit er niet mooi uit ziet omdat de velden in elkaar gedrukt worden.


Daarom lijkt het mij het beste dat het inplaats van 2 of 3 kolommen, 1 kolom wordt.
Echter lukt het met mijn kennis van webdesign niet om dit voor elkaar te krijgen.


Relevante software en hardware die ik gebruik

MAMP om lokaal de server te draaien.
Wordpress 4.7
Ninja Forms 3.0.20

Wat ik al gevonden of geprobeerd heb

Veel zoekwerk (geen idee waar ik precies naar moet zoeken) op internet en dit:

@media (max-width: 768px) {
.nf-form-cont .one-half{
width: 100%;
clear: both;
float: left;
margin-left: 0;

Het probleem is denk ik dat het nu nog steeds een kolom is met de halve breedte van de volledige pagina en dus niks veranderd. Ik heb echter geen idee hoe een half veld een volledig veld kan worden....

Hopelijk is mijn vraag en de gegeven informatie duidelijk. Bij voorbaat dank

[orf]

In je console (chrome of firefox) kun je goed zien welk element de halve breedte heeft. Dat overschrijf je vervolgens met de volledige breedte in je media-query.

De console maakt het makkelijk om wat values aan te passen en te zien wat er gebeurt.

[bwienke]

Dank voor de snelle reactie.



Als ik daar de width aanpas naar 100% dan klopt het.

Volgens mij is dat ook wat ik doe met de css code die ik gebruikt heb.
of heb ik dat verkeerd?

[orf]

Als je het in je css hebt aangepast, kun je opnieuw in de console kijken. Als je value dan doorgestreept staat, wordt het overschreven op een andere plek. Bijvoorbeeld door een hogere slectiviteit.

[bwienke]

Als ik bij inspector in firefox de width op 100% zet bij .nf-form-cont .one-half dan wordt het veld ook 100%.

Ik heb deze code bij custom css staan:

@media (max-width: 768px) {
.nf-form-cont .one-half{
width: 100%;
clear: both;
float: left;
margin-left: 0;

Hiermee zou ik denken dat de width dan ook op 100% gezet wordt. Dit is echter niet het geval want als ik weer kijk bij inspector dan staat de waarde bij width nog op 48.717...% zoals in de vorige screenshot te zien is.

Nogmaals, ik heb weinig tot geen kennis van css. Ik denk dat ik in de goede richting zit maar dat weet ik niet.

EDIT:

!important aan de code toevoegen was de opslossing. Dit is zoals ik het nu heb.

@media (max-width: 768px) {
.nf-form-cont .one-half {
width: 100% !important;
margin-left: 0 !important;
}

[ Voor 14% gewijzigd door bwienke op 24-12-2016 16:14 ]