Removing Areas

Permalink
Not sure if this is the correct forum for this or not but hi guys,

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

View Replies:
okapi replied on at Permalink Reply
okapi
I would check the HTML source code output of that page with firefox inspector to see what's causing these white gaps.
jamesradcliffe replied on at Permalink Reply
Thanks for this, I've just had a look and there appears to be gaps between my header and subheader sections even though these don't appear in edit mode. The dividers which are 'missing' don't see to appear as elements either?
okapi replied on at Permalink Reply
okapi
Not sure what you mean by "dividers" and "gaps between header and subheader"...

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.
jamesradcliffe replied on at Permalink Reply
Not sure what you mean by "dividers" and "gaps between header and subheader"...

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?
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
Why not give us the website address so we can take a look ourselves?
jamesradcliffe replied on at Permalink Reply
thetransferlist.co.uk
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
The extra large white gap between the blocks is caused by this code in your main.css file
.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;
}
jamesradcliffe replied on at Permalink Reply
Perfect thank you, that's fixed the gap issue!

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!
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
If you want the horizontal rule to be the same color as the page background, you have to change two hr declarations in your main.css file, they are..
.main-footer hr {
    background-color: #373b40;
}
hr {
    position: relative;
    border: 0;
    height: 1px;
    margin: 2.9rem auto 3rem auto;
    background-color: #373b40;
    clear: both;
jamesradcliffe replied on at Permalink Reply
Just had a look and none of this text appear in my main.less file. I tried adding it at the bottom anyway regardless but it doesn't appear to have resolved the issue.
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
Take a look in the theme_supermint/themes/supermint/css/build/hr.less file..
jamesradcliffe replied on at Permalink Reply
Just added this and doesn't appear to have change?
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
Your css file is being accessed from your cache, so you need to flush your cache to get the new file generated.
jamesradcliffe replied on at Permalink Reply
I now receive this: Does it mean anything to you?
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 {
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
Post the content of your main.less file..
jamesradcliffe replied on at Permalink Reply
/* 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;
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
At the bottom of the file locate and delete the two 'code' parts wrapped in [ ] brackets
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;
jamesradcliffe replied on at Permalink Reply
Okay I'm back able to view it now, although now the previously visible horizontal rule has disappeared yet the white gaps are still visible
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
Your main problem is the supermint theme you are using, in my opinion it is far too complicated and unstable.
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.
jamesradcliffe replied on at Permalink Reply
Is there a specific theme that you'd recommend that's as versatile as supermint then?