Jelle_letterpress

Beste matt10,

Deze onderstaande CSS heb ik gevonden in de template, heb met verschillende waarden getest maar nog niet echt verder gekomen. Ben erachter dat je hiermee ook onderdelen uit kunt zetten als je overgaat van landscape naar portrait mode. Het mooiste zou zijn dat alles zichtbaar is. Zo’n dropdown menu zou super zijn :).

Bedankt voor je tijd.
Groet, Jelle

/* iPad Landscape */

@media only screen and (max-width: 1024px) {
#main, #header .inside {max-width: 64.5em;}
#header { width: 21%; }
.skillList li span a{
padding: 10px 6px 10px !important;
}
}

/* iPad Portrait */

@media only screen and (max-width: 768px) {

#header {
text-align: center;
float: none;
position: relative;
margin: 0px;
width: 94%;
padding: 0px 0 0px 0;
}

#header #logo {
margin: 0px;
width: 100px;
}

#header #logo img{
max-width: 100%;
height: auto;
}

#header #sideWidgets{
margin: 0px;
}

#mainNav{
right: 20px;
position:absolute; top:50%; height:20px; margin-top:-10px;
}

#mainNav li{
margin: 0 0 0 1.5em;
display: inline-block;
padding: 0;
}

#main {
width: 94%;
margin: 0 auto 30px auto;
padding-top: 0;
float: none;
}

#homeMessage p {
font-size: 1.0em!important;
}

.sidebarBox {
float: left;
margin: 0 3% 30px 0;
}

#homeMessage p{
font-size: 2.7em !important;
}

#projects {
margin-left: 15px;
}

.flex-direction-nav {display: none !important;}

#comments { width: 100%;}

#footer {
width: 94%;
float: none;
margin: 0 0 30px 25px;
}

}

/*layouts smaller than 600px, iPhone and mobiles*/
@media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) {

html {
-webkit-text-size-adjust: none;
}

h1 { font-size: 1.2em;}
h2 { font-size: 1.1em;}
h3 { font-size: 1.0em;}
h4 { font-size: .9em;}
h5 { font-size: .8em;}

#header {
text-align: center;
width: 99%;
padding-bottom: 15px;
margin: 0px;
position: relative;
}

#header #logo {
text-align: center;
float: none;
width: 60px;
margin: 15px;
}

#pageHead h1 { font-size: 1.0em;}
#pageHead {
padding: 10px 0 20px 0;
}

#homeMessage{
font-size: .5em;
margin-bottom: 20px;
}

#homeMessage p {
text-align: center;
}

#main {
width: 94%;

padding-top: 5px;
}

#mainNav {
position: relative;
margin-top: 0;
top:0;
right: 0;
width: 100%;
margin: 0 0 5px 0;
display: block;
}

#mainNav li{
margin: 0 0 0 0;
display: inline-block;
padding: 0 5px 0 5px;
}

#content .post {
margin-bottom: 20px;
padding-bottom: 0!important;
}

#projects {
margin-left: 15px;
}

#footer {
width: 92%;
margin: 0 auto 0 auto;
}

#footer .widgetBox {
width: 100%;
float: none;
margin-bottom: 20px;
}

#footer #flickrBox .flickrImage {
margin: 0 5px 5px 0;
}

#footer .secondary {
width: 100%;
padding-bottom: 10px;
text-align: center;
}

#footer .secondary p{
margin: 0px;
padding: 0px;
}

#footer .secondary .left,
#footer .secondary .right{
float: none;
padding-bottom: 10px;
}

#commentForm input[type=”text”], #comments input[type=”text”] {
width: 40% !important;
margin-right: 5px !important;
}

#commentForm label, #comments label {
font-size: .8em;
}

Bedankt voor je bericht.
Via welke weg maak ik zo’n dropdown menu?