Sixteen Nine: how to adjust responsive width settings – Media Queries

[CeeInTx]

I need to learn more about the responsive '@media screen' css code.

The vertical navigation sidebar goes away too soon on this site: http://www.collaborativecom.com/. I want to preserve the vertical navigation (as long as it makes sense) as the screen get smaller.

I tried changing the '1264px' to a smaller number but the main content then slides under the vertical sidebar.

I've pasted the css code for the media queries below.

Any advice much appreciated!

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

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

.full-width-content .content,
.site-header,
.site-inner {
width: 100%;
}

.content {
width: 70%;
}

.sidebar-primary {
width: 30%;
}

.site-header {
float: none;
height: auto;
padding-top: 20px;
position: static;
}

.title-area {
margin-bottom: 20px;
}

.genesis-nav-menu {
border-bottom: 1px solid #333;
margin: 0 0 20px;
text-align: center;
}

.genesis-nav-menu .menu-item {
display: inline-block;
text-align: left;
}

.genesis-nav-menu li {
border: none;
float: none;
width: auto;
}

.genesis-nav-menu .sub-menu {
margin: 0;
}

.genesis-nav-menu .sub-menu a {
text-align: left;
}

.site-footer {
display: none;
}

.sidebar {
padding: 60px 60px 0;
}

}

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

.site-container {
margin: 0 auto;
max-width: 768px;
}

.sixteen-nine-landing .site-container {
margin: 5%;
}

.content,
.sidebar-primary {
width: 100%;
}

.archive-description,
.author-box,
.breadcrumb {
margin: 0 0 60px;
}

.search-form {
float: none;
margin: 0 auto;
width: 50%;
}

.sidebar {
padding: 60px 0 0;
}

}

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

.site-title {
font-size: 24px;
}

.title-area {
margin-bottom: 0;
}

.header-widget-area .widget,
.site-description {
margin-bottom: 20px;
}

.site-header .widget-area {
text-align: center;
}

.content,
.sidebar {
padding-left: 10%;
padding-right: 10%;
}

.entry-title {
font-size: 32px;
}

.enews-widget input,
.enews-widget input[type="submit"],
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.search-form,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}

.responsive-menu {
display: none;
}

#responsive-menu-icon {
display: block;
}
}

http://www.collaborativecom.com/

[Cathy @ WPBarista]

Max width of 800px is the standard so that you have a touch menu on tablet devices. I would advise to stay with best practices especially for your audience who are probably not the most technically savvy. They'll need predictable menus in predictable places which it is right now.

However, if you wish to modify the media queries, search the css doc for all the occurrences of max-width: 800px and change it to the number you wish. But I really wish you wouldn't! 🙂

---

Visit WP Barista to download 52 Quick Edits You Can do Today to Get More Clicks / Views / Sales. I also do paid support (starting at $75) and fully custom Genesis Child Themes.

[Author]

Posts