Formulier responsive maken media queries werkt niet

  • Onderwerp Auteur
  • Bezoeker
  • Bezoeker
29 jan 2016 13:03 #3681 door
Op mijn website maak ik gebruik van een Fox contactformulier dat ik helemaal gestyled heb. Ik gebruik voor de marges links en rechts 140 px, en voor als het beeldscherm kleiner wordt (iphone etc) 5 px. Dat werkt voor alle pagina's prima, behalve bij dit contactformulier. De door mij daar ingestelde media queries werken niet, hij blijft de marge op 140 px houden, ook als je het scherm heel smal maakt/op iphone bekijkt. Dan wordt het formulier dus onbruikbaar.
Voor mijn gevoel zie ik iets over het hoofd... Wat zou dat kunnen zijn?

Alvast hartelijk dank voor alle reacties!

Zie www.jinghwa.com/contact/contactformulier
Onderwerp is gesloten.
  • Onderwerp Auteur
  • Bezoeker
  • Bezoeker
29 jan 2016 13:03 #3682 door
gebruik je binnen en buiten je media query dezelfde selector?

Er staat een id in je selector met 140px margin en die overschrijft andere tenzij je daar ook de selector in zet dus binnen en buiten media query div#fox-container-c460 form .fox-row.row-fluid als selector gebruiken.

Dan komt er in je query dus
Code:
div#fox-container-c460 form .fox-row.row-fluid { margin-left:5px margin-right:5px; }


Bericht toegevoegd op 29 januari 2016 om 15:22
Vorige bericht was op 29 januari 2016 om 14:45


Probeer ook eens deze manier van media query schrijven
Code:
@media (max-width: 480px) { div#fox-container-c460 form .fox-row.row-fluid { margin-left:5px margin-right:5px; } }

Dus met extra { } om de css regels in de query heen.

[edit Jussie] Gaarne in het vervolg code tussen codetags plaatsen. Voor meer informatie graag even het volgende topic lezen: forum.joomlacommunity.eu/show...?p=173#post173
Onderwerp is gesloten.
  • Fred
  • Gebruiker
  • Gebruiker
  • Uw professionele website die op elke computer, laptop, tablet en mobiele telefoon er mooi en modern
Meer
29 jan 2016 13:03 #3683 door Fred
In de yjsg_layout.css op regel 112 staat:
Code:
.inside-container { margin-left: auto; margin-right: auto; }

Dit kan je aanpassen zoals hieronder of beter onderstaande in de custom.css plaatsen.
Code:
.inside-container { margin-left: -110px; margin-right: auto; }

is te vinden in: www.jinghwa.com/plugins/system/yjsg/assets/css/yjsg_layout.css

maar beter is om dit in de custom.css te plaatsten.

[edit Jussie] Gaarne in het vervolg code tussen codetags plaatsen. Voor meer informatie graag even het volgende topic lezen: forum.joomlacommunity.eu/show...?p=173#post173

Eigen site: www.ifred.nl maakt gratis jouw website/webshop, of wil je gratis hulp Contact mij dan.
JUG010 membe
Onderwerp is gesloten.
  • Onderwerp Auteur
  • Bezoeker
  • Bezoeker
29 jan 2016 13:03 #3684 door
Beste Klatte88,
Soms kijk je er overheen... Dat was 'm! Dank!
Onderwerp is gesloten.
  • Onderwerp Auteur
  • Bezoeker
  • Bezoeker
29 jan 2016 13:03 #3685 door
Thanks, ik was letterlijk 3 dagen bezig en ik heb het hier gevonden.
Onderwerp is gesloten.
Gemaakt door Kunena