how to remove spacing between sections ?

[donthecat]

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  , 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...

[donthecat]

any help would be appreciated... We are planning to launch the store asap...

Many Thanks

[yonghan79]

Hi, have you clear the cache after modifying the css file? What's your site URL btw?

[donthecat]

yonghan79... Yeps... I keep clearing the cache after any changes I make...

http://gendermale.in/index.php ... Not yet open to public....

[Sam_78]

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

[donthecat]

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...

[Sam_78]

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;">

[donthecat]

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.

[Sam_78]

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

[donthecat]

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...

[Sam_78]

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!