Hello,

 

I really need HELP!! I am working on a basic site (www.mandevilleingleside.com) and I am having trouble eliminating the white space under the flash banner (mobile view). I have edited and troubleshooted but am still having trouble figuring this out. Any ideas folks??? The main div is the .home-banner-wrap and then home-banner-sub-full. This was designed using a template. Thanks in advance. If I need to clarify this some, please just let me know.

 

-Desperate "D"

 

Here's some of the CSS for that area:

 

.home-banner-wrap {

width: 940px;

height: 419px;

background: url(images/_global/bg-home-banner.png) 0 0 no-repeat;

position: relative;

margin: 0px auto 0;

padding-bottom: 10px;

}

.home-banner-main {

width:350px;

top:45px;

left:45px;

position:absolute;

}

.home-banner-sub {

width:456px;

height:309px;

background:url(images/_global/shadowBG.png) 0 0 no-repeat;

top:40px;

right:40px;

position:absolute;

overflow: hidden;

}

.home-banner-sub-content {

width:436px;

height:270px;

margin:10px 0 0 10px;

}

.home-banner-sub-full {

width:860px;

height:304px;

background:url(images/_global/shadowBG-full.jpg) 0 0 no-repeat;

top:40px;

right:40px;

position:absolute;

}

.home-banner-sub-content-full {

width:840px;

height:270px;

margin:10px 0 0 10px;

}

.home-banner-sub-full p{

color: #FFF;

}

.home-bnr-jquery {

position:relative;

width:940px;

height:283px;

margin:0 auto;

}

.home-banner-wrap ul {

list-style:none;

width:940px;

height:381px;

background-image:url(images/_global/home-preloader.gif);

background-position:center;

background-repeat:no-repeat;

margin:0;

padding:0;

}

.home-banner-wrap li {

width:940px !important;

height:381px !important;

}

.jquery-pager {

text-align: center;

}

.home-banner-wrap .jquery-pager {

padding-top: 20px;

}

.jquery-pager a {

display:inline-block;

width:15px;

height:15px;

text-indent:-9999em;

outline:none;

background:url(images/_global/global-sprite.png) -740px -179px no-repeat;

margin-right:12px;

}

.jquery-pager .activeSlide {

background:url(images/_global/global-sprite.png) -725px -179px no-repeat;

}

.home_video_preload {

width:100%;

height:100%;

background:url(images/_global/preload-white.gif) center center no-repeat;

}

.big-banner .content_home_video {

padding-top:80px !important;

}

.home-bnr-jquery ul {

list-style:none;

width:940px;

height:283px;

margin:0;

padding:0;

}

.home-bnr-jquery ul li {

width:940px !important;

height:283px !important;

}

.home-jquery-content {

padding-top:45px;

}

.home-bnr-jquery .home-banner-sub {

width:432px;

height:270px;

background:url(images/_global/global-sprite.png) 0 -1188px no-repeat;

top:13px;

right:35px;

position:absolute;

}

.home-bnr-jquery .home-banner-sub-content {

width:404px;

height:256px;

margin:14px 0 0 14px;

}

.home-banner-bottom {

width:404px;

height:7px;

background:url(images/_global/jquery-btm-shdw.png) 0 0 no-repeat;

top:263px;

right:14px;

position:absolute;

z-index:4;

}

.home-bnr-jquery .home-banner-main {

width:375px;

top:40px;

left:45px;

position:absolute;

}

.home-bnr-jquery .home-banner-sub-full {

width:940px;

height:283px;

top:0;

left:0;

position:absolute;

background:none;

margin:0;

padding:0;

}

.home-bnr-jquery .home-banner-sub-full p {

top:0;

left:0;

position:absolute;

background:none;

margin:0;

padding:0;

}

 

 

Here's the source code. If you view on a desktop and drag it to the size of a cell phone you should be able to see what I am talking about as well.

<!-- ***************** - Homepage jQuery Slider - ***************** -->

<div class="home-banner-wrap">

<ul>

<li class="jqslider">

<div class="home-banner-sub-full">

<div class="home-banner-sub-content-full">

<img src="images/flashpic2.jpg" alt="" width="840" height="270" />

</div><!-- end home-banner-sub-content-full -->

</div><!-- end home-banner-sub-full -->

</li>

<li class="jqslider">

<div class="home-banner-sub-full">

<div class="home-banner-sub-content-full">

<img src="images/flashpic5.jpg" alt="" width="840" height="270" />

</div><!-- end home-banner-sub-content-full -->

</div><!-- end home-banner-sub-full -->

</li>

<li class="jqslider">

<div class="home-banner-sub-full">

<div class="home-banner-sub-content-full">

<img src="images/flashpic1.jpg" alt="" width="840" height="270" />

</div><!-- end home-banner-sub-content-full -->

</div><!-- end home-banner-sub-full -->

</li>

<li class="jqslider">

<div class="home-banner-sub-full">

<div class="home-banner-sub-content-full">

<img src="images/flashpic3.jpg" alt="" width="840" height="270" />

</div><!-- end home-banner-sub-content-full -->

</div><!-- end home-banner-sub-full -->

</li>

<li class="jqslider">

<div class="home-banner-sub-full">

<div class="home-banner-sub-content-full">

<img src="images/flashpic4.jpg" alt="" width="840" height="270" />

</div><!-- end home-banner-sub-content-full -->

</div><!-- end home-banner-sub-full -->

</li>

</ul></div>

<p>

<!-- end home-banner-wrap -->

<!-- ***************** - END Homepage jQuery Slider - ***************** -->

<!-- header-area -->

</div><!-- end rays -->

</div><!-- end header-holder -->

</div><!-- end header -->

I don't see any "media queries" in your css?

 

If you don't know about that.... google "responsive webdesign tutorials" and "media queries"

There are media querys on his website. The responsive side of things works fine.

 

The problem with your spacing is .home-banner-wrap has margin applied to it. So on the small screens you want to reduce the margin-top of this element.

 

By the way your CSS needs some serious re-factoring. Way too much use of !important, when I see lots of important it's like a red flag. The only time you should EVER use !important is when you know for certain that this property will never change and you don't want another developer accidentally overriding it. You should not use it because of specificity issues like you are having in your page, it makes your code unnecessarily difficult to maintain and update.

 

Have a read through this post by a css guru who explains where the css in your page could do with a rethink http://csswizardry.com/2012/11/code-smells-in-css/

Thanks!! I am going to look over this post.

 

Also, here is some of the media query. Do you see what I need to add or take away by looking at this?

 

}

@media (max-width: 768px) {

#tt-mobile-menu-button{

overflow:hidden;

}

#tt-mobile-menu-button span{

margin-left:0 !important;

margin-right:20px !important;

float:right;

width:auto !important;

padding-right:35px !important;

}

.medium_button{

padding-right:17px;

}

.medium_button span{

padding-left:18px;

}

.large_button span{

padding:21px 0 23px 33px;

}

}

@media (max-width: 500px) {

.home-banner-wrap .home-banner-sub-full,

.home-banner-wrap .home-banner-sub-content-full{

width:100% !important;

}

}

@media (max-width: 479px) {

body{

min-width:inherit !important;

}

.home-banner-wrap .home-banner-sub-full,

.home-banner-wrap .home-banner-sub-content-full{

width:100% !important;

}

.iphorm-inner .message-element{

width:255px !important;

}

.iphorm-inner{

padding-right:0 !important;

}

.iphorm-container{

width:auto !important;

}

.content_full_width.contact_iphone_content{

padding:0 !important;

}

#footer_bottom{

position:relative;

padding-bottom:50px;

}

#footer_bottom .info{

overflow:visible;

}

#footer_bottom .top-footer{

bottom: -50px;

padding: 0;

position: absolute;

right: 20px;

}

#footer_bottom .top-footer a{

margin:0;

}

}

I told you exactly what to do in my above post.

 

 

 

The problem with your spacing is .home-banner-wrap has margin applied to it. So on the small screens you want to reduce the margin-top of this element.

Thanks so much! I appreciate the help.