Minimum responsive looks not okey

[Annaedv]

Hello (again)

I use Minimum with static page. I have changed my header hight to 400px (100 is standard). The site looks okey on the webb but not in my mobile.

There is a big white space between my header and the menus. What to do?

http://www.advokateden.se

[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

[Annaedv]

Hello. Thank´s for trying to help. But I don´t understand.

I find the css, but there is only max-width and width.

Using the min-hight in #header give me also a white space between the menu and the content. Then I have two big white spaces...

Can you be more specific about the code and where to place it?

Anna

[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]

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]

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]

Just saw the lovely blank code box. Ok, Anna, try grabbing the code from here...

---

@ModernMuseNV | Portfolio | Personal Blog

[Susan]

@ModernMuse - refer to FAQ #5 for how to add code: http://www.studiopress.community/faq/

 

For larger blocks of code, it's recommended that rather than attempt to put it all here in the forum, that you add a Gist.

 

I'm going to go ahead and edit your posts to remove the code...

 

[ModernMuse]

Thanks, Susan!

Adding a gist instead. 😉

---

@ModernMuseNV | Portfolio | Personal Blog

[ModernMuse]

Anna, the large block of code posted above should have been in a Gist. My apologies, I'm trying to help, but I'm new at posting code in forums.

Use the code below to replace lines 1529 through 1765 in your stylesheet...

If you can't see the code in this reply, you can also find it here.

---

@ModernMuseNV | Portfolio | Personal Blog

[Annaedv]

Hello! And THANK`S! That worked!

If I put in the code through Dreamweawer the @media is not linked and your first code works. I dont know the word "Gist"???, I will ask a english friend when he comes by.

But still, the first one works! I am very pleased and impressed!

[Author]

Posts