1. Tudásbázis
  2. Sminkek
  3. MAYO smink módosítása

MAYO smink módosítása

Beküldte pischta - 2016. szeptember 19. 12.47
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ó: 
7.x
Fórum: 
Sminkek