How to reduce or remove the space between modules?

Hello,

I am using the storefront template for my current project and I am trying to figure out how to remove or reduce module spaces that are not being used by any modules. I have the breadcrumb, top1, top2, mainbody_top, mainbody, main_bottom, sidebar, bottom1, bottom2, bottom3, bottom4, bottom5 and lang module spaces that are not being used. How do I get rid of or reduce their respective spaces to tighten up the website? Your help will be greatly appreciated.

Using Joomla 3.4
URL: www.now-i-know-why.com

Best Regards,
RJ

Could you please mark those spaces on a screenshots?

Hello,

Thanks for your reply. Attached is a pdf of the screen shots of the spaces where I don't have any modules installed and don't really need those spaces. Let me know if there is a solution to getting get rid or reduce the spaces.

Screen-Shot#1.jpg

Screen-Shot#2.jpg

Screen-Shot#3.jpg

Thx,
RJ

I'm not pretty sure what you mean. If you don't post any module in particular module position - it will not display at all and there will be no empty space.

Ok let me see if I can explain this a little better. Yes, you are correct. If I don't post any modules in that particular module position it will not display, however there is some space allocated for that spot. For instance, on the home page I only want the video to display, but beneath the video there is some spaces between the bottom of the video and the footer. The module spaces are empty, but it takes up space. I want to tighten up the website where the bottom of the front page video is closest to the footer. Everything in between shall be reduced or rid of. I have attached a screenshot of what I'm talking about.

Screen-Shot#4.jpg

URL:
http://www.now-i-know-why.com
RJ

First thing - you have one additional paragraph just under the video itself - please disable tinyMCE and check source code - you will see it.
Then frontpage header has some bottom margin, please edit: /templates/gk_storefront/css/override.css and add at its end:

Code: Select all

.frontpage #gkHeader {
    margin: 0;
}


Remember to enable "CSS override" in template settings - advanced section.

Finally to quickly remove gkPageContent just from the frontpage, use this code:

Code: Select all

.frontpage #gkPageContent {display: none;}


This should help on the frontpage.

Ok, I have disabled the tinyMCE editor, but I can not seem to locate the additional paragraph. I looked at the source code, but I don't see where the additional paragraph is located.

I have inputted the ".frontpage #gkHeader {
margin: 0;
}"
as directed and also put in the ".frontpage #gkPageContent {display: none;}" in the overide.css file. It seems that the space has been reduced some, but there is still some space there. I'm guessing it's from the additional paragraph, but I can not locate the paragraph. I don't have any additional articles, so I do not know where to delete the additional article to reduce the space even more. Thanks for all your help thus far.

Source code: view-source:http://www.now-i-know-why.com/

Your help will be greatly appreciated,
RJ

Also, I noticed that bottom spaces are still there, such as bottom 1 through 5. Can I input .frontpage #bottom1 {display: none;} into the override.css file to remove bottom 1 space and so forth? Do you think that will work?

Thx,
RJ

I have attached a screenshot of what I see on my end for your insight.

URL: http://www.now-i-know-why.com

Screen-Shot#5.jpg

RJ

I don't know what html content you see, but there are no bottom1-5 modules rendered on your page (I have checked source code and rendered html dom tree).

Now there is a little of spacing made by footer:

Code: Select all

#gkFooterNav {
    margin: 40px auto 30px auto;
}
#gkFooter > div {
    padding: 32px 0;
}


You can reduce it this way:

Code: Select all

#gkFooterNav {
    margin: 40px auto 30px auto;
}
#gkFooter > div {
    padding: 0;
}


The additional paragraph is there:

Screen Shot 2015-11-30 at 18.53.43.png

You can see it highlighted in blue. I is somewhere in gkGrid generated module position.

Last thing is to reduce homepage .box element spacings:

Code: Select all

.frontpage .box {
    margin: 0;
    padding: 20px 20px 0;
}


Thanks,

I will try this and let you know the results. Thanks again for all your help.

RJ

Thank you! I have tried your instructions and it worked. Thanks alot.

RJ

Ok. Is there anything else I can help you with regarding this topic?

No. I think we are good to go from this point.

Thanks again,
RJ

Ok, feel free to post new forum threads if you have any other questions - it allows us to answer faster.

Thx