Removing Areas
PermalinkI'm only just starting with Concrete5 so apologies in advance if this is a very simple question. I'm currently building my website and have completed the homepage, however, when I view it white gaps appear which are not there in Edit mode. These appear where two of the three horizontal rules are located and where there are blank areas left.
To rectify this I've tried altering the background colour of the horizontal rule blocks but this doesn't appear to have fixed the issue. I have also attempted to remove the blank un-needed areas but there doesn't seem to be an option for this. I've tried looking in the Stacks & Blocks, Global Areas section but these areas do not appear here.
Has anyone experienced this before or have any recommendations to fix this?
Thanks in advance.

Are you talking about the horizontal rule block? What theme are you using? Did you check CSS of your theme against C5 styles for possible interferences?
Why did you title your question "Removing Areas"? Did you really mean "areas"?
It is difficult to get a picture of the problem based on the information available.
Are you talking about the horizontal rule block? What theme are you using? Did you check CSS of your theme against C5 styles for possible interferences?
Why did you title your question "Removing Areas"? Did you really mean "areas"?
It is difficult to get a picture of the problem based on the information available.
Apologies, by dividers I mean the horizontal rule block yes.
The gaps i mention are the areas that appear to me in edit mode.
I'm using the supermint theme.
I will check this now as I hadn't though of this!
I titled my question removing areas as I thought that the blank areas left which I cannot remove may be causing the issue. I hope that explains more?
.padding-space-s { padding: 2.3rem; }
If you want to hide the horizontal rule but leave the margins in place change this
hr { position: relative; border: 0; height: 1px; margin: 2.9rem auto 3rem auto; background-color: #9ea8ad; clear: both; }
To this
hr { position: relative; border: 0; /* height: 1px; */ margin: 2.9rem auto 3rem auto; background-color: #9ea8ad; clear: both; }
Sorry I don't want to remove the horizontal blocks at the top and bottom. I want them to remain there but have the same background colour as the rest of the page. It appears exactly like this in edit mode but doesn't on the actual page for some reason. Do you have any idea why this may be?
Thanks for everything so far!
.main-footer hr { background-color: #373b40; } hr { position: relative; border: 0; height: 1px; margin: 2.9rem auto 3rem auto; background-color: #373b40; clear: both;
An unexpected error occurred.
in main.less on line 49, column 1 47| @import "build/addons.less"; 48| /* Fixing */ 49| @import "build/hacks.less"; 50| 51| [code] 52| .main-footer hr {
@import "presets/defaults.less";
@import "build/mixins.less";
// @import ~"@{preset-fonts-file}";
@import "build/scaffolding.less";
@import "build/hr.less";
@import "build/typography.less";
@import "build/images.less";
@import "build/page.less";
@import "build/accordion.less";
@import "build/tabs.less";
@import "build/ribbon.less";
@import "build/navigations.less";
@import "build/navigation-full-screen.less";
@import "build/alerts.less";
/* Import Blocks */
@import "build/blocks.less"; // small block code
@import "build/blocks/page-list.less";
@import "build/blocks/tags.less";
@import "build/blocks/image-slider.less";
/* Import Addons */
@import "build/addons/slick-theme.less";
@import "build/addons/mmenu-theme.less";
@import "addons/button/button-util.less";
@import "addons/button/button-flat.less";
@import "addons/button/button-plain.less";
@import "addons/button/button-push.less";
@import "addons/hint.less";
@import "build/area-classes.less";
@import "build/responsive.less";
@import "build/ribbon.less";
// @import "build/stack.less";
/* Misc */
@import "build/misc.less";
/* Print */
@import "build/print.less";
// jQuery addons
@import "build/addons.less";
/* Fixing */
@import "build/hacks.less";
.main-footer hr { background-color: #373b40; } hr { position: relative; border: 0; height: 1px; margin: 2.9rem auto 3rem auto; background-color: #373b40; clear: both;
So that it looks like this..
/* Import our theme variables. */
@import "presets/defaults.less";
@import "build/mixins.less";
// @import ~"@{preset-fonts-file}";
@import "build/scaffolding.less";
@import "build/hr.less";
@import "build/typography.less";
@import "build/images.less";
@import "build/page.less";
@import "build/accordion.less";
@import "build/tabs.less";
@import "build/ribbon.less";
@import "build/navigations.less";
@import "build/navigation-full-screen.less";
@import "build/alerts.less";
/* Import Blocks */
@import "build/blocks.less"; // small block code
@import "build/blocks/page-list.less";
@import "build/blocks/tags.less";
@import "build/blocks/image-slider.less";
/* Import Addons */
@import "build/addons/slick-theme.less";
@import "build/addons/mmenu-theme.less";
@import "addons/button/button-util.less";
@import "addons/button/button-flat.less";
@import "addons/button/button-plain.less";
@import "addons/button/button-push.less";
@import "addons/hint.less";
@import "build/area-classes.less";
@import "build/responsive.less";
@import "build/ribbon.less";
// @import "build/stack.less";
/* Misc */
@import "build/misc.less";
/* Print */
@import "build/print.less";
// jQuery addons
@import "build/addons.less";
/* Fixing */
@import "build/hacks.less";
.main-footer hr {
background-color: #373b40;
}
hr {
position: relative;
border: 0;
height: 1px;
margin: 2.9rem auto 3rem auto;
background-color: #373b40;
clear: both;
I would suggest two things:
1. You try another theme.
2. Learn how to use the browser console 'inspect' facility, just right click on any part of a web page to see what css etc. is being used in the page.
You can un-tick css declarations to see what the affect might be and even add your own declarations.