#833 closed enhancement (fixed)
Mobile-responsive CSS for main site
| Reported by: | msjoinder | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | |
| Component: | graphic design/interface | Keywords: | mobile, responsive |
| Cc: | Parent Tickets: |
Description
Adding the following to the end of static/css/base.css makes the main site much easier to read and navigate on a mobile device -- I have created a fork on Gitorious but I am having a headache learning to use it. Try this for yourselves by changing base.css and narrowing the browser window:
@media (max-width: 550px) {
body {
width: 100%;
max-width: 100%;
min-width: 100%;
}
.mediagoblin_header {
height: auto;
}
.mediagoblin_header_right {
float: left;
}
img {
max-width: 100%;
}
li {
max-width: 75%;
}
.connector {
display: none;
}
.mediagoblin_footer {
height: auto;
bottom: 12px;
}
.container_16,
.container_16 .grid_1,
.container_16 .grid_2,
.container_16 .grid_3,
.container_16 .grid_4,
.container_16 .grid_5,
.container_16 .grid_6,
.container_16 .grid_7,
.container_16 .grid_8,
.container_16 .grid_9,
.container_16 .grid_10,
.container_16 .grid_11,
.container_16 .grid_12,
.container_16 .grid_13,
.container_16 .grid_14,
.container_16 .grid_15,
.container_16 .grid_16 {
width: 96%;
max-width: 96%;
min-width: 96%;
float: left;
overflow-x: hidden;
}
}
This seems obsolete since Mediagoblin works on a mobile device already.