Opened 10 years ago

Closed 10 years ago

Last modified 6 years 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:


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



Change History (1)

comment:1 by jan, 10 years ago

Resolution: fixed
Status: newclosed

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

Note: See TracTickets for help on using tickets.