opgelost Responsive

1. Joomla versie: 3.3.6.
2. website: wildspoor.nl
3. extenties: n.v.t.

Hallo Forum,

Ik gebruik de basis template voor Joomla 3 en heb deze zelf aangepast.
Het was leuk en leerzaam om een eigen template te maken met de uitgebreide informatie op de Joomla CSS site .

Vraag:
Bij het responcive gaan blijkt dat het invoerveld van de zoek module niet responcive mee komt. Het veld steekt uit de steil “Well”.

Waar kan ik dat aanpassen?

Werkt dit?
Kijk eens in het bestand in regel 9:
Daar zie je: Zet die eens op:
width: 100%;

Dank voor je reply Wouter,

Regel 9 is een moeilijk te bewerken regel. Oppassen dus.
206px naar 100% veranderd.
Het input veld komt nu zonder responcive breedte ook iets buiten het veld te staan. Bij 206px staat het input vak goed gecentreerd.
Ga je responcive dan zie je wel een verandering maar niet voldoende en staat het input vak nog steeds buiten het kader.
De 100% aanpassing werkt niet goed uit.

Het gaat in 80% van de gevallen goed toch? Alleen bij schermbreedtes rond de 800px gaat het fout. Ik zou dat oplossen met een mediaquery en met deze css:

Astrid,
Ik heb nog niet eerder met een media query gewerkt.
Ga daar eerst even op studeren hoe dat op te maken en waar te plaatsen.
Heb de module zoeken een andere positie gegeven waar het minder kwaad kan.
Ben een lay-out freek dus het moet allemaal netjes staan.
Bedankt voor zover.

De aanpassing die Astrid heeft voorgesteld kun je plaatsen in het bestand template.css
Daarna moet de wijziging direct effect hebben op het zoekveld.

Dank Wouter en Astrid,

Ik heb wat met de @media query gestoeid maar daar kwam ik zelf niet goed uit hoe dat vorm te geven en waar precies te plaatsen zonder overschrijvingen te veroorzaken. Er staan meerdere @media query's in dat CSS file. Heb zelf nog nooit met @media query's te maken gehad.

Er is wel voor een oplossing gekozen en dat is de oplossing van Wouter om op regel 9 de waarde width: 206px aan te passen, niet naar 100% maar 80%.

Ik gebruik SeaMonkey als browser omdat ik dat een erg prettige browser vindt om mee te werken.
Het probleem van het input veld van de zoekmodule niet responsive mee gaat komt nauwelijks voor met de browsers van FireFox en Chroom. In alle gevallen is de aanpassing naar 80% wel een goede oplossing gebleken.