We have incorporated your css in the custom.css file so that the banners on each page would not have a huge space between them and the page content which is below them. However, depending on the width of your screen (browser window) there remains a huge gap which you will see on the pages below when you lessen the width of your browser manually. this happens on

this page: (random banner image)
www.oasiswebdevelopment.com/lifestyle/
and this page: Zen Tools Slide Show
www.oasiswebdevelopment.com/lifestyle/index.php/about
and this page: ( a banner module)
www.oasiswebdevelopment.com/lifestyle/index.php/rentals


but not on this page:
www.oasiswebdevelopment.com/lifestyle/index.php/events/arts-and-crafts-conference

Can you help with this problem..Please see attached jpg

Thank you so very much,
Elizabeth

Here is the CSS in the custom.css file that we have already incorporated:
www.oasiswebdevelopment.com/lifestyle/index.php/events/arts-and-crafts-conference

*fixes the subpages so that there is not too much space between banner and content*/
#maincontainerwrap.topmargin {
margin-top:280px
}

/*fixes the home page so that the banner is a longer length*/
.itemid-101 #maincontainerwrap.topmargin {
margin-top: 360px;
}

you can see the item-id on the body tag via the source code view - each page has a unique item-id (see, above, .itemid-101.

Try adding these media queries

@media (max-width:480px) {
.itemid-101 #maincontainerwrap.topmargin {margin-top: 0px;}
#maincontainerwrap.topmargin {margin-top:0px}

}

Thank you but look what happens now.. (see attached):
Thank you for your continued help.
Here is all the css in custom.css so far.

/*fixes the home page so that there is not too much space between banner and content*/
#mainWrap #maininner {padding-top:0;}
section.article-content.clearfix {margin-top:0;}

/*fixes the subpages so that there is not too much space between banner and content*/
#maincontainerwrap.topmargin {
margin-top:280px
}

/*fixes the home page so that the banner is a longer length*/
.itemid-101 #maincontainerwrap.topmargin {
margin-top: 360px;
}

@media (max-width:480px) {
.itemid-101 #maincontainerwrap.topmargin {margin-top: 0px;}
#maincontainerwrap.topmargin {margin-top:0px}

}

Is that a tablet?

Cheers
Paul

yes it is a tablet (too much space between the banner and the content; if I view it on a cell phone now I do not even see the banner.

thank you for your continued help!



Elizabeth

If you want to see the banner on mobile you will need to adjust the values for the margin-top as required for the home and other pages

e.g

@media etc etc
#maincontainerwrap.topmargin {
margin-top: 80px;
}

for this page www.oasiswebdevelopment.com/lifestyle/index.php/rentals

to target a tablet you will need to use a different max width value than for a mobile so it targets a tablet

Combined with a different margin-top value so you can see the image but without excess space below it

Cheers
Paul

Dear Paul et al.

You are probably really sick of me by now.. I don't blame you... I feel like I am jury rigging everything to make it work.. when someone more well versed in t-3 framework and zen tools could have made it right in the first place.

Is there any way I could pay someone there to one of each type of page (i.e., random home page) page with a banner, page with a zen tools slide shoe etc. so that all have no unwanted white spaces on desktop tablet or cell phone..

This has been very frustrating for me although you really have been a tremendous help.
I would be happy to pay someone.. to do it and then I can learn from what they have done.

I would even be happy if instead of fixing what is broken.. if they wanted to start these pages from scratch.. but by using the banners that I have in the media manager.

Thank you for all you are doing.. you are the best.. I don't know when you guys sleep..

Please let me know..

Elizabeth

Hi Elizabeth,

Do you plan to have banners two different heights?

one height for the Home page and one different height for all the other pages?

Cheers
Paul