MAYO smink módosítása

pischta képe

Sziasztok!

Készítettem egy alsminket a MAYO-hoz. Nem sok dolgot változtattam benne. A #site-name résszel van gondom. Egyrészt függőlegesen középre igazítottam, megadtam hozzá a következőket:

  1. height: 84px;
  2. display: table-cell;
  3. vertical-align: middle;

Másrészt a szélességét állítgatom a böngésző méretétől függően. A gond az, hogy a @media szélesség-értékeinek a határánál nem a @media beállításokat veszi figyelembe (a FF stílusszerkeszőjében egyértelműen látszik: a böngésző szélességének változtatásánál mutatja mindig, hogy melyik @media szekció az érvényes, de a határoknál inaktívvá válik mindegyik szekció) , így ott nagy méretűre vált az oldalnév, így az a logo alá csúszik, amitől eléggé szétesik a header.
A @media határértékeit nem változtattam meg, ez szerepel az alsminkben ezzel kapcsolatban:
  1. @media only screen and (max-width: 320px) {
  2. #site-name a, #site-name a:link, #site-name a:visited {
  3. font-size: 11px;
  4. }
  5. #header h1 a, #header h1 a:link, #header h1 a:visited {
  6. font-size: 11px;
  7. }
  8. #site-name {
  9. width: 160px;
  10. }
  11. }
  12. @media only screen and (min-width: 321px) and (max-width: 480px) {
  13. #site-name a, #site-name a:link, #site-name a:visited {
  14. font-size: 14px;
  15. }
  16. #header h1 a, #header h1 a:link, #header h1 a:visited {
  17. font-size: 14px;
  18. }
  19. #site-name {
  20. width: 190px;
  21. }
  22. }
  23. @media only screen and (min-width: 481px) and (max-width: 768px) {
  24. #site-name a, #site-name a:link, #site-name a:visited {
  25. font-size: 22px;
  26. }
  27. #header h1 a, #header h1 a:link, #header h1 a:visited {
  28. font-size: 22px;
  29. }
  30. #site-name {
  31. width: 300px;
  32. }
  33. }
  34. @media only screen and (min-width: 769px) and (max-width: 1024px) {
  35. #site-name a, #site-name a:link, #site-name a:visited {
  36. font-size: 27px;
  37. }
  38. #header h1 a, #header h1 a:link, #header h1 a:visited {
  39. font-size: 27px;
  40. }
  41. #site-name {
  42. width: 560px;
  43. }
  44. }
Drupal verzió: 
Fórum: