[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Need CSS fix for unnecessary padding on home page

Posted on 2012-08-21
Medium Priority
Last Modified: 2012-09-02
I would like some help with writing the necessary css to fix approximately 200px left by a blank 'feature' area of a gantry-framework template.

I will supply url in subsequent post.
Question by:TonyCabone
  • 4
  • 3
LVL 22

Expert Comment

by:Kim Walker
ID: 38316100
Modify the style at line 120 of template.css to read:
.feature, .feature div, .feature p {
    height: 0;
    margin: 0;
    padding: 0;

Open in new window

This will change the div with class "feature" to have a height of zero with no margin or padding. It will also change all div and p tags contained in that div to the same zero height, margin and padding.

If you cannot modify the template.css file, create a separate file with the above css and load that file after template.css in the header of your page.

Author Comment

ID: 38316281
ok great thank  you. A smaller gap still exists, is there any way to close it up?
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

LVL 22

Expert Comment

by:Kim Walker
ID: 38316992
Try adding the following just below the style you just modified:
.homepage-icons .rt-block { margin: 0; }

Open in new window


Author Comment

ID: 38323265
No good mate still there
LVL 22

Accepted Solution

Kim Walker earned 1800 total points
ID: 38324636
The entire "rt-showcase" div is a house of cards. It contains unnecessary margins and padding that is being overcome by relative positioning. Are you in control of that section or is it being generated elsewhere?

Relative positioning moves an elements contents in relation to the hole it creates on the page. That's what's generating the extra space below the section. The div that contains the homepage icons is actually below the white box to its right, but the icons themselves have been relatively positioned -36px to offset its own 15px top and bottom padding and the padding and margin of the video above it.

The only thing I can suggest other than redoing the entire section is to modify the css style on line 244 of templates.css. Change the value for top from -36px to -24px and add a margin-top of -12px. You can adjust as needed so that the values for top and margin-top add up to -36px.

As I said, it's a house of cards with margins and padding pushing things down and to the right and relative positioning bring them back. I highly recommend redoing it if you can.
LVL 13

Assisted Solution

by:Andrew Derse
Andrew Derse earned 200 total points
ID: 38345820
Are you using the free version of Gantry or the paid version?  I noticed you also had a question on the speed of your site.  If you are a RT member...I would be asking the RT support team for help with these questions...just my 2 cents worth.  I tend to get the best support from them as they created the themes/framework and know how to tweak it to your liking.

Author Comment

ID: 38359603
Good point NUKIT, it's the free template but I'm an RT member so will go there for help.

xmediaman I thank you for your help- I thought I was overdoing the relative positioning. Your suggestion has done the trick for now but I will re-do the template when I have time.

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month18 days, 21 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question