Reducing the gap between modules

October 2012 Joomla Template
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Tue Oct 29, 2013 11:23 am
Reply with quote
Report this post
Hi there,
I am using startup template and I am really happy with the results.

However, I would like to shrink the gap between certain elements in the template.

For example, the vertical gap between the text in the image show module and the "Find Out More" button and also between the "Find Out More" button and the image shown below it.

I would also like to just shrink the gaps between the modules generally on the homepage and would welcome a pointer on how to do this.

The website url is http://www.wooshping.com

Many thanks for any help you can provide,
Rupert
User avatar
Junior Boarder

GK User
Tue Oct 29, 2013 12:19 pm
Reply with quote
Report this post
Could You please post screenshots and mark those gaps?
Would You like to remove them completely or just reduce (if reduce, hoe much)?
User avatar
Moderator

GK User
Tue Oct 29, 2013 12:29 pm
Reply with quote
Report this post
Thank you!

Attached is the screen shot showing the 2 areas I want to reduce. I don't know by how much exactly. I'd like to experiment to find the right balance. Is that possible?



Thanks again!
Rupert
User avatar
Junior Boarder

GK User
Tue Oct 29, 2013 12:35 pm
Reply with quote
Report this post
Hi again,
Image upload seemingly not working so here's the link. http://www.wooshping.com/images/screen%20shot%20showing%20gaps.jpg

Hope it's ok.

Thanks again!
User avatar
Junior Boarder

GK User
Tue Oct 29, 2013 4:30 pm
Reply with quote
Report this post
To use forum attaching option You need to first upload the file and next to place it inline, but the screen you provided will do.
User avatar
Moderator

GK User
Tue Oct 29, 2013 4:33 pm
Reply with quote
Report this post
Please edit: /templates/gk_startup/css/override.css and add at its end:
Code: Select all
.gkIsWrapper-gk_startup .gkIsText span.gkLine {
margin: 10px auto 10px auto !important;
}


Play with both 10px values to modify the top gap.

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

GK User
Tue Oct 29, 2013 4:36 pm
Reply with quote
Report this post
Oh, to fix the bottom gap you need one declaration more:
Code: Select all
#gkIs-gk-is-87, #gkIs-gk-is-87 .gkIsImage {
    height: 880px !important;
}


This way you reduce size of whole element, and image under the button is attached to bottom of elements container.
User avatar
Moderator

GK User
Tue Oct 29, 2013 4:41 pm
Reply with quote
Report this post
WOW - That's FANTASTIC!! Than you so much. Worked an absolute treat!! :-)

Thanks you so much again. Most appreciated!

Best wishes,
Rupert
User avatar
Junior Boarder

GK User
Tue Oct 29, 2013 4:47 pm
Reply with quote
Report this post
I'm glad I could help you :)
If You will have any other questions, feel free to post new forum threads.
User avatar
Moderator

GK User
Sun Jun 22, 2014 5:27 pm
Reply with quote
Report this post
I need to reduce the gap between gk news modules. my website is colombofrontpage.com
User avatar
Fresh Boarder

GK User
Sat Jun 28, 2014 11:37 am
Reply with quote
Report this post
Hello,

@lankatruth2012 - please open the template.css file and please change the following code:

Code: Select all
#gkMainbody .box {
margin-bottom: 30px;
}


to:

Code: Select all
#gkMainbody .box {
margin-bottom: 0px;
}


or even:

Code: Select all
#gkMainbody .box {
margin-bottom: -10px;
}
User avatar
Administrator


cron