Opened 6 years ago

Closed 5 years ago

Last modified 23 months ago

#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;

}

}

Subtickets

Change History (1)

comment:1 Changed 5 years ago by jan

Resolution: fixed
Status: newclosed

This seems obsolete since Mediagoblin works on a mobile device already.

Note: See TracTickets for help on using tickets.