Author Topic: how to remove spacing between sections ?  (Read 6142 times)

Offline donthecat

  • Newbie
  • *
  • Posts: 29
  • Karma: +2/-0
  • You aint Cool if you aint Green...
    • View Profile
how to remove spacing between sections ?
« on: March 23, 2018, 06:29:48 PM »
Pls check the screenshot attached...

I'm trying to remove the strip of space above the Category Menu and make it flush with the header strip...

I've tried playing around with the CSS in the stylesheet file, but I'm not able to get that gap to disappear...

I even tried some -40px margin definitions  :D, but nothing works....

I checked the Layout and I don't see any Disabled Blocks also in that zone... so what is creating that extra (60px?) of gap in between ?

Pls advice...


You aint Cool if you aint Green...

Save Earth ! It's the Only Planet with Chocolates !!

Offline donthecat

  • Newbie
  • *
  • Posts: 29
  • Karma: +2/-0
  • You aint Cool if you aint Green...
    • View Profile
Re: how to remove spacing between sections ?
« Reply #1 on: March 24, 2018, 08:39:02 AM »
any help would be appreciated... We are planning to launch the store asap...

Many Thanks
You aint Cool if you aint Green...

Save Earth ! It's the Only Planet with Chocolates !!

Offline yonghan79

  • Jr. Member
  • **
  • Posts: 56
  • Karma: +17/-0
    • View Profile
Re: how to remove spacing between sections ?
« Reply #2 on: March 25, 2018, 11:00:56 PM »
Hi, have you clear the cache after modifying the css file? What's your site URL btw?

Offline donthecat

  • Newbie
  • *
  • Posts: 29
  • Karma: +2/-0
  • You aint Cool if you aint Green...
    • View Profile
Re: how to remove spacing between sections ?
« Reply #3 on: March 26, 2018, 02:12:07 PM »
yonghan79... Yeps… I keep clearing the cache after any changes I make...

http://gendermale.in/index.php … Not yet open to public....
You aint Cool if you aint Green...

Save Earth ! It's the Only Planet with Chocolates !!

Offline Sam_78

  • Sr. Member
  • ****
  • Posts: 270
  • Karma: +42/-1
    • View Profile
Re: how to remove spacing between sections ?
« Reply #4 on: March 26, 2018, 02:43:46 PM »
Are you using any template? if yes then you should change CSS in extension/your_template/storefront/....   the url you gave is not the actual store we need to see actual site then only we can guide you which file and line to change

Offline donthecat

  • Newbie
  • *
  • Posts: 29
  • Karma: +2/-0
  • You aint Cool if you aint Green...
    • View Profile
Re: how to remove spacing between sections ?
« Reply #5 on: March 26, 2018, 02:51:20 PM »
Sam_78... I'm sorry.. My bad...  this is the URL... http://gendermale.in/shopzone/index.php

Yeps, I'm hacking the CSS in my template in the extension folder only. Thanks !

I've attached the CSS file for reference...

« Last Edit: March 26, 2018, 02:54:23 PM by donthecat »
You aint Cool if you aint Green...

Save Earth ! It's the Only Planet with Chocolates !!

Offline Sam_78

  • Sr. Member
  • ****
  • Posts: 270
  • Karma: +42/-1
    • View Profile
Re: how to remove spacing between sections ?
« Reply #6 on: March 26, 2018, 05:02:29 PM »
If you inspect your header the class navbar is getting margin-bottom:20px; from bootstrap.css:4153 if you want you can remove it or else you can write inline CSS in your_template\storefront\view\default\template\common\header.tpl  line:2 chagne it to <div class="headerstrip navbar navbar-inverse" role="navigation" style= "margin-bottom:0px;">

Offline donthecat

  • Newbie
  • *
  • Posts: 29
  • Karma: +2/-0
  • You aint Cool if you aint Green...
    • View Profile
Re: how to remove spacing between sections ?
« Reply #7 on: March 26, 2018, 07:51:23 PM »
I tried both options... but didn't get the desired results...

the 1st one does no changes to the layout on the desktop... but the appearance on Mobile is warped now with the Category Menu aligned 20px higher...

the 2nd does reduce around 10px of space, but still does not flush with the header-strip...

I feel its something to do with the category menu... there is a unidentified 20px above and below the actual menu (encompassed by section id="categorymenu")

Its 5.20am in Chennai and I'm gonna hit the sack... need to figure this out sometime this afternoon.
You aint Cool if you aint Green...

Save Earth ! It's the Only Planet with Chocolates !!

Offline Sam_78

  • Sr. Member
  • ****
  • Posts: 270
  • Karma: +42/-1
    • View Profile
Re: how to remove spacing between sections ?
« Reply #8 on: March 27, 2018, 11:06:42 AM »
Its not unidentified look at your style.css #911

#categorymenu {
    margin: 20px 0 20px 0;
    clear: both;
}

remove this if you don't need it

Offline donthecat

  • Newbie
  • *
  • Posts: 29
  • Karma: +2/-0
  • You aint Cool if you aint Green...
    • View Profile
Re: how to remove spacing between sections ?
« Reply #9 on: March 28, 2018, 04:43:14 AM »
Many Thanks Sam...

I missed that CSS declaration somehow …. I changed the top margin to a negative and its beautifully flushed with the header strip.

just a small query... Why is that declaration under Featured Products and not part of the earlier declaration ?

and is there a documentation for the CSS anywhere ? I searched but couldn't locate it...

Thanks once again...
You aint Cool if you aint Green...

Save Earth ! It's the Only Planet with Chocolates !!

Offline Sam_78

  • Sr. Member
  • ****
  • Posts: 270
  • Karma: +42/-1
    • View Profile
Re: how to remove spacing between sections ?
« Reply #10 on: March 28, 2018, 09:34:19 AM »
I believe there is no documentation for CSS as we can always use inspect element from our browser. Don't worry you will figure this out it's pretty straight forward. I am glad I was of some help. Have a nice day!

 

Powered by SMFPacks Social Login Mod