Header-too much space on mobile/ @media query didn't work WordPress
I have a client site, www.francineallaire.com with a header that scales down - it's pretty much unreadable on smaller devices but the client likes it.
What she and I don't like is all the space under the header image on mobile. I tried modifying the .header-image, .site-title etc to change the min height but it's not working.
I need help in changing the header spacing please.
Please note that this is a FULL-WIDTH IMAGE HEADER and NOT a site-title, site-description header.
Answers (6)
Hiro Hito answers:
Hi,
change the .site-header min-height to 100%
.site-header {
margin: 0 auto;
min-height: 100%;
width: 100%;
}
Just replace the min-height on line 1038
Jill Chongva comments:
For which element? @mediaquery? Either way, it didn't work.
Arnav Joy answers:
write following in your style.css
@media (max-width: 640px) {
.site-header {
min-height: 0;
}
}
Jill Chongva comments:
Didn't work.
Arnav Joy comments:
you have to write css at this place
http://www.francineallaire.com/wp-content/themes/executive-pro/style.css
Jill Chongva comments:
Not an idiot - I know that. Your solution did not work.
Arnav Joy comments:
so why I can not see it here
http://www.francineallaire.com/wp-content/themes/executive-pro/style.css
?
Jill Chongva comments:
Because it didn't work and I removed it!
Reigel Gallarde answers:
you should play with the min-height of this css
.header-image .title-area, .header-image .site-title, .header-image .site-title a {
min-height: 100px; /* change this in every screen size*/
}
Reigel Gallarde comments:
or if that did not work, try this
.site-header {
min-height: 0!important;
}
Jill Chongva comments:
Sorry Reigel, neither one worked
Reigel Gallarde comments:
where are you adding the this? I also forgot you have to do both... my mistake on saying "or"..
or better yet just remove min-height on your style.css, line 1038 where it says
.site-header {
margin: 0 auto;
min-height: 185px; /*remove this line*/
width: 100%;
}
then add
.header-image .title-area, .header-image .site-title, .header-image .site-title a {
min-height: 100px; /* change this in every screen size*/
}
this is where you can manipulate the height...
Reigel Gallarde comments:
I can see it working now.. great!
Jill Chongva comments:
It was not your solution that worked - I had to hire someone to do it.
Reigel Gallarde comments:
I'm not saying it was mine.. ;)
but still, I can see the same approach...
Shoeb mirza answers:
@media (max-width:768px)
{
header.site-header {min-height: 0!important;}
}
Jill Chongva comments:
Sorry but that didn't work either.
Shoeb mirza comments:
Here is your answer
In header.php change to below stuffs...
<h1 class="site-title" itemprop="headline">
<a href="<?php bloginfo('url'); ?>"><img src="http://www.francineallaire.com/wp-content/uploads/2015/02/cropped-FADemoHeader1.png"></a>
</h1>
In style css Find below lines.. and change with respect to what I've done..
.header-image .title-area, .header-image .site-title {min-height: 80px! important;}
.header-image .site-description, .header-image .site-title a { text-indent: inherit! important;}
@media only screen and (max-width: 767px)
@media only screen and (max-width: 500px)
.header-image .title-area, .header-image .site-title {min-height: 45px!important;}
Jill Chongva comments:
No, that compromises the entire theme and is a poor hack to make the header resize.
Shoeb mirza comments:
However, you are getting the sample result. It's responsive and have no issues in opting my solution..
Jill Chongva comments:
I don't work with rude people and your solution is not viable.
Jeremy answers:
Looks like it's the following CSS:
.header-image .title-area {
float: left;
margin: 0;
max-width: 1145px;
min-height: 185px;
padding: 0;
width: 100%;
}
So try:
@media screen and (min-width: 1024px) {
.header-image .site-title a {
float: left;
margin: 0;
max-width: 1145px;
padding: 0;
width: 100%;
min-height: 185px;
}
}
@media screen and (max-width: 1023px) {
.site-header {
margin: 0 auto;
min-height: 0;
}
.header-image .title-area {
float: none;
margin: 0 auto;
min-width: 100%;
height: auto;
min-height: 80px;
}
}
Jeremy comments:
Updated
Jill Chongva comments:
No dice - it's ok on 1023, but below that the spacing remains an issue
Jeremy comments:
Apply the changes here:
http://jsfiddle.net/19mu8pf0/3/
Jeremy comments:
I'm sure you know that you should change the 623px and 624px to 1023px and 1024px respectively.
Romel Apuya answers:
hi,
Which spacing are you trying to get rid of?? is it the one little line above the slider?
can you provide screenshot?? or on which device the issue is occuring?
you can add me on skype: rrapuya
cheers,
romel
Jill Chongva comments:
The spacing between the bottom of the header image and the menu. It occurs on any size under 1280px
Romel Apuya comments:
yur media queries should be like this.
@media only screen and (max-width: 1024px) {
.header-image .site-title a {
background-size: contain !important;
}
.site-container {
max-width: 768px;
}
.content,
.sidebar-primary,
.sidebar-secondary,
.site-header .widget-area,
.title-area,
.wrap {
width: 100%;
}
.header-image .title-area,
.header-image .site-title,
.header-image .site-title a {
float: none;
margin: 0 auto;
}
.genesis-nav-menu li,
.site-header ul.genesis-nav-menu,
.site-header .search-form {
float: none;
}
.genesis-nav-menu,
.site-header .search-form,
.site-header hgroup,
.site-title {
text-align: center;
}
.genesis-nav-menu a,
.genesis-nav-menu > .first > a,
.genesis-nav-menu > .last > a,
.site-header .genesis-nav-menu a {
padding: 16px;
padding: 1.6rem;
}
.site-header .search-form {
margin: 16px auto ;
margin: 1.6rem auto;
}
.genesis-nav-menu li.right {
display: none;
}
.content #genesis-responsive-slider .slide-excerpt {
display: none;
}
.comment-list li.depth-1,
.ping-list li.depth-1 {
margin: 30px 0;
margin: 3rem 0;
}
}
@media only screen and (max-width: 768px) {
.header-image .site-title a {
background-size: contain !important;
min-height: 95px;
}
.site-container {
max-width: 600px;
}
.five-sixths,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.four-sixths,
.home-middle .widget,
.home-top .widget,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.executive-pro-portfolio .portfolio,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}
.genesis-nav-menu a,
.genesis-nav-menu > .first > a,
.genesis-nav-menu > .last > a,
.site-header .genesis-nav-menu a {
font-size: 12px;
font-size: 1.2rem;
padding: 12px;
padding: 1.2rem;
}
.home-middle,
.home-top,
.executive-pro-portfolio .portfolio {
text-align: center;
}
.executive-pro-portfolio .portfolio {
padding: 0 0 30px;
padding: 0 0 3rem;
}
.home-cta .button.alignright {
float: none;
margin: 16px 0 0;
margin: 1.6rem 0 0;
}
.footer-widgets-1 {
margin: 0;
}
}
@media only screen and (max-width: 500px) {
.header-image .title-area, .header-image .site-title, .header-image .site-title a {
min-height: auto !important;
}
.site-header{
min-height: auto !important;
}
.entry-title {
font-size: 24px;
font-size: 2.4rem;
}
.content .entry-header .entry-meta .entry-comments-link {
display: none;
}
}
@media only screen and (max-width: 270px) {
.header-image .title-area, .header-image .site-title, .header-image .site-title a {
min-height: auto !important;
}
.site-title {
font-size: 26px;
font-size: 2.6rem;
}
.site-description {
font-size: 20px;
font-size: 2.0rem;
}
.executive-pro-home .home-cta {
background-color: #9B0000;
color: #fff;
float: left;
padding: 10px 10px 10px -10px;
padding: 1rem 1rem 1rem -1rem;
width: 100%
}
input {
background-color: #f5f5f5;
border: 1px solid #ddd;
box-shadow: 1px 1px 3px #eee inset;
color: #222;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 1.4rem;
padding: 16px;
padding: 1.6rem;
width: 100%;
}
.enews-widget input[type="submit"] {
background-color: #222;
color: #fff;
font-size: 8px;
font-size: 0.8rem;
margin: 0;
text-transform: none;
width: 100%;
}
}
Romel Apuya comments:
add
.header-image .site-title a, .header-image .title-area, .header-image .site-title{
min-height:95px !important;
}
on the 1024px media query
Romel Apuya comments:
and
.site-header{
min-height:95px !important;
}
also on the 1024px;