CSS Media Queries (phone and tablet) WordPress

• SOLVED

Page: http://ownyourbrain.org/manifesto/

[==============================]

CSS:
/* KEEP MENU/HEADER AREA ORIGINAL WIDTH */
.page-id-3279 #header_main .container {width: 1040px !important;}

/* CENTER CONTENT DIV WHEN USING FULL WIDTH TEMPLATE */
.page-id-3279 .entry-content {width: 500px !important;}
.page-id-3279 .container {width: 500px !important;}

/* SPECIAL GOOGLE FONT */
.page-id-3279 .entry-content p {font-family: 'Arvo', serif;}
.page-id-3279 .entry-content-wrapper div li {
font-family: 'Arvo', serif;
font-size: 16px;
line-height: 26px;
}

.box-manifesto {
max-width: 100%;
border-radius: 8px;
background-color: #FFFFEE;
border: 2px solid #006699;
padding: 17px 37px 16px;
margin: 32px 0 32px 0;
background: #ffffff url("http://ownyourbrain.org/wp-content/uploads/fresh_snow.png") repeat fixed center;
}

.box-manifesto-2 {
max-width: 100%;
border-radius: 8px;
background-color: #FFFFEE;
border: 2px solid #006699;
padding: 17px 37px 16px;
margin: 32px 0 32px 0;
background: #ffffff url("http://ownyourbrain.org/wp-content/uploads/old_map.png") repeat fixed center;
}

[==============================]

Because we changed the width on this page, the page looks pretty messed up on mobile phone, and the menu is messed up on an iPad.

Please let me know what code to keep, replace, or delete.

Thanks!!
Matt

Answers (1)

2014-11-14

timDesain Nanang answers:

Hi Sir, you can try this:
#remove

/* KEEP MENU/HEADER AREA ORIGINAL WIDTH */
.page-id-3279 #header_main .container {width: 1040px !important;}

/* CENTER CONTENT DIV WHEN USING FULL WIDTH TEMPLATE */
.page-id-3279 .entry-content {width: 500px !important;}
.page-id-3279 .container {width: 500px !important;}


#add

@media only screen and (max-width: 989px){
.responsive .page-id-3279 .container,.responsive .page-id-3279 .container .twelve.units{width: 94% !important;}
}


---

king2244 comments:

I made those changes, but then I lost the look on desktop view:
http://screencast.com/t/TcZsVziqCT

Thanks for the suggestion though.

---

timDesain Nanang comments:

do you mean like the attachment?

#remove
just like before

#add

.page-id-3279 .container,
.page-id-3279 .entry-content{max-width:500px !important;}

@media only screen and (max-width: 989px){
.responsive .page-id-3279 .container{width: 94% !important;}
.responsive .page-id-3279 .container .twelve.units{width: 100% !important;}
}