das Suchfeld wird auf kleinen viewports falsch dargestellt und ist der Bildschirm im Hochformat (Portrait) reicht das Suchfeld über den DIV-Container hinaus.
Habe dann für meine Modifikation das CSS geändert und im Template für den Suchbutton eine eindeutige ID eingefügt. id="suche"
Code: Select all
a,p,i,input,button{font-size:1.05em;letter-spacing:0.08em;}
#searchfield{height:28px;width:60%;}
#suche{height:38px;}
@media (min-width:959px){
#searchfield{height:18px;width:80%;}
#suche{height:28px;}
}
@media (max-width:360px){
#searchfield{height:34px;width:40%;}
#suche{height:44px;}
}
Testen kann man CSS-layouts auf folgenden websites:
http://www.mobilephoneemulator.com/
https://quirktools.com/screenfly/
eine Optimierung für Internet-Explorer<= IE8 mit einer minimalen Breite für den body von 780px, auf windows phone sollte das nicht funktionieren.
Code: Select all
<!--[if lte IE 8 ]&[if !IEMobile]>
<style type="text/css" media="screen">
body{min-width:780px;font-family:"Trebuchet MS","Verdana";font-size:12px;}
a,p,i,input,button{font-size:13px;}
#searchfield{height:20px;width:84%;}
#suche{height:30px;width:24%;}
</style>
<![endif]-->
</head>