[ModernMuse]

Anna, you may have trouble copying & pasting the CSS code from my reply since I can't figure out how to properly format CSS around here (sorry -- forum newbie). The @media should not be links, otherwise the code will copy & paste correctly.

Can someone help me understand how to format css code around here? I know to add

around code, but without an option to preview my replies, it gets confusing.

 

---

@ModernMuseNV | Portfolio | Personal Blog

[ModernMuse]

What I meant to say is...

Completely replace the final "Responsive Design" section by pasting over it with the code I've included above.

Don't forget to make a backup copy of your style sheet before making any major modifications. 😉

---

@ModernMuseNV | Portfolio | Personal Blog

[ModernMuse]

CSS media queries are written into your style sheet to help make your design responsive. Media queries are written based on common screen sizes for various devices (desktops and vertical/landscape views for smart phones & tablets).

The large white gap is being caused by the fixed header height of 400px.

Because your site is responsive, your header image is being scaled down to accommodate tablet and smart phone screens. To fix this, you need to enter optimal image heights for common screen sizes in the media query section (labeled "Responsive Design") of your style sheet.

I've done this for you.

Starting with line 1529 in your style sheet, copy and paste the following...

 

/* Responsive Design
------------------------------------------------------------ */

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

.wrap,
#header {
width: 960px;
}

#content {
width: 560px;
}

.post-type-archive-portfolio .portfolio {
width: 280px;
}

}

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

body {
font-size: 16px;
margin: 0 auto;
width: 100%;
}

p {
font-size: 16px;
}

.archive-page,
.content-sidebar #content,
.content-sidebar-sidebar #content,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.full-width-content #content,
.menu-primary,
.menu-secondary,
.minimum-landing .wrap,
.sidebar,
.sidebar-content #content,
.sidebar-content-sidebar #content,
.sidebar-sidebar-content #content,
.wrap,
#content-sidebar-wrap,
#footer .creds,
#footer .gototop,
#footer-widgets .wrap,
#header,
#header ul.menu,
#header .widget-area,
#sidebar-alt,
#title-area {
width: 100%;
}

.menu-primary,
.menu-secondary,
#description,
#footer .creds,
#footer .gototop,
#header ul.menu,
#header .search-form,
#title,
#title-area {
float: none;
text-align: center;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
#header .search-form,
#wrap {
margin: 0;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
#content,
#description,
#footer-widgets .wrap,
#header .widget-area,
#title,
#title a,
#title a:hover,
#header .search-form,
#title-area {
padding: 0;
}

#header {
background-size: contain !important;
}

#title {
margin: 10px 0 0;
}

.menu-primary li,
.menu-secondary li,
#header ul.menu li {
display: inline-block;
float: none;
}

.menu-primary a,
.menu-secondary a,
#header .menu a {
border: none;
padding: 10px;
}

a.page-title-button,
.menu li.right {
display: none;
}

.menu li li {
text-align: left;
}

#page-title {
padding: 10px 0;
}

#page-title p {
font-size: 24px;
text-align: center;
}

.minimum #inner,
#inner {
padding: 20px;
}

.minimum #inner .wrap {
padding: 30px 0;
}

.post-type-archive-portfolio .portfolio {
margin: 10px 15px;
width: 45%;
}

.single-portfolio img {
border: none
}

#footer-widgets .widget {
padding: 20px 20px 0;
}

#footer .custom-footer li {
margin: 0 10px;
}

#footer .wrap {
box-sizing: border-box;
padding: 25px 10px 0;
}

}

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

.header-image #title-area {
height: 270px;
}

}

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

#home-featured {
padding: 30px 0 0;
}

.home-featured-1,
.home-featured-2,
.home-featured-3,
.home-featured-4 {
padding: 0 0 30px;
width: 50%;
}

.genesis-grid-even,
.genesis-grid-odd {
width: 100%
}

.post-type-archive-portfolio .portfolio {
margin: 0 0 20px;
text-align: center;
width: 100%;
}

.portfolio-featured-image a img,
.portfolio-featured-image a img:hover {
border: none;
}

.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
padding: 0;
width: 100%;
}

.navigation li a,
.navigation li.disabled,
.navigation li a:hover,
.navigation li.active a {
padding: 5px 10px;
}

}

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

.header-image #title-area {
height: 163px;
}

}

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

.header-image #title-area {
height: 107px;
}

}

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

.home-featured-1,
.home-featured-2,
.home-featured-3,
.home-featured-4 {
padding: 0 0 30px;
width: 100%;
}

}

 

---

@ModernMuseNV | Portfolio | Personal Blog

[ModernMuse]

Perhaps via a robots.txt file?

 

 

---

@ModernMuseNV | Portfolio | Personal Blog

[ModernMuse]

You'll need to adjust the min-height again for a mobile-sized screen. This can be done within the media query section of the style sheet (towards te bottom).

When I used Firebug, a height of 107px looked good at the 320px break point. You'll need to bump up the size for 480px and so on.

Someone correct me if there's a better way...

---

@ModernMuseNV | Portfolio | Personal Blog

[Author]

Posts