Ero sivun ”Järjestelmäviesti:Mobile.css” versioiden välillä
(Ak: Uusi sivu: →All CSS here will be loaded for users of the mobile site: @media only screen and (max-width: 600px) { .mainItem { width: 100% !important; background-color: #f6f6f6 !important; padding: 5px; border-radius: 5px; margin: 5px 0px; font-size: 14px; } .content li { margin-bottom: 4px; } }) |
Ei muokkausyhteenvetoa |
||
Rivi 1: | Rivi 1: | ||
/* All CSS here will be loaded for users of the mobile site */ | /* All CSS here will be loaded for users of the mobile site */ | ||
.mainItem {flex: 0 0 30.333333%;margin: 10px;border:1px solid #b1c903;padding:0 1em 1em 1em;background-color:#f6f6f6;box-sizing: border-box;border-radius: 5px;box-shadow: 1px 1px 4px 0px rgb(10 10 10 / 20%);} | |||
.resourceItem {flex: 0 0 22%;margin: 10px;border:1px solid #b1c903;padding:0 1em 1em 1em;background-color:#f6f6f6;box-sizing: border-box;border-radius: 5px;box-shadow: 1px 1px 4px 0px rgb(10 10 10 / 20%);} | |||
@media only screen and (max-width: 1000px) { | |||
.mainItem { | |||
flex: 0 0 45%; | |||
margin: 5px; | |||
padding: 0px 4px 3px 10px; | |||
} | |||
.resourceItem { | |||
flex: 0 0 45%; | |||
margin: 5px; | |||
padding: 0px 4px 3px 10px; | |||
} | |||
.resourceItem img{ | |||
display: block; | |||
margin: auto; | |||
} | |||
.mw-body{ | |||
padding: 0.5em; | |||
} | |||
} | |||
@media only screen and (max-width: 850px) { | |||
.mainItem { | |||
font-size:13px !important; | |||
} | |||
.resourceItem { | |||
font-size:13px !important; | |||
} | |||
.resourceItem img{ | |||
width: 80px; | |||
height: 80px; | |||
} | |||
h2{ | |||
font-size: 16px !important; | |||
} | |||
img{ | |||
width: 30px; | |||
height: 30px; | |||
} | |||
} | |||
@media only screen and (max-width: 600px) { | @media only screen and (max-width: 600px) { | ||
.mainItem { | .mainItem { | ||
flex: 0 0 100%; | |||
background-color: #f6f6f6 !important; | background-color: #f6f6f6 !important; | ||
border-radius: 5px; | border-radius: 5px; | ||
margin: 5px 0px; | margin: 5px 0px; | ||
font-size: 14px; | font-size: 14px; | ||
} | } | ||
.resourceItem { | |||
flex: 0 0 90%; | |||
margin: 5px; | |||
} | |||
.content li { | .content li { | ||
margin-bottom: 4px; | margin-bottom: 4px; | ||
} | } | ||
} | } |
Nykyinen versio 8. marraskuuta 2022 kello 13.03
/* All CSS here will be loaded for users of the mobile site */ .mainItem {flex: 0 0 30.333333%;margin: 10px;border:1px solid #b1c903;padding:0 1em 1em 1em;background-color:#f6f6f6;box-sizing: border-box;border-radius: 5px;box-shadow: 1px 1px 4px 0px rgb(10 10 10 / 20%);} .resourceItem {flex: 0 0 22%;margin: 10px;border:1px solid #b1c903;padding:0 1em 1em 1em;background-color:#f6f6f6;box-sizing: border-box;border-radius: 5px;box-shadow: 1px 1px 4px 0px rgb(10 10 10 / 20%);} @media only screen and (max-width: 1000px) { .mainItem { flex: 0 0 45%; margin: 5px; padding: 0px 4px 3px 10px; } .resourceItem { flex: 0 0 45%; margin: 5px; padding: 0px 4px 3px 10px; } .resourceItem img{ display: block; margin: auto; } .mw-body{ padding: 0.5em; } } @media only screen and (max-width: 850px) { .mainItem { font-size:13px !important; } .resourceItem { font-size:13px !important; } .resourceItem img{ width: 80px; height: 80px; } h2{ font-size: 16px !important; } img{ width: 30px; height: 30px; } } @media only screen and (max-width: 600px) { .mainItem { flex: 0 0 100%; background-color: #f6f6f6 !important; border-radius: 5px; margin: 5px 0px; font-size: 14px; } .resourceItem { flex: 0 0 90%; margin: 5px; } .content li { margin-bottom: 4px; } }