Hello!
Please tell me how to get rid of a white space bar just underneath the bg image (a tutor with a boy) on a main page in English section of the site.
Here:
https://repetit.moscow/en/
Hi Kotkowski
It looks as though there is a div with an ID of main site that is the culprit. It doesn’t appear to hold any text so i would recommend removing it from the site. This will then resolve the issue.
1 Like
As mentioned above you have an element with an id if #mainsite that holds multiple html elements many of which have padding and margins applied not to mention some default non breaking spaces all adding to the height of that space.
If you are going to add content inside of #mainsite then you will not see a gap because you will have content in there.
Indeed you can see the background color of mainsite anyway which shows its not an actual gap but just the space the element is taking up.
If #mainsite is to remain empty then remove it or if you can’t edit the template set the display of #mainsite to none.
1 Like
Hi,
I looked at the page and compered it with the Russian home page that doesn’t have the white-space:
(EDIT)
Please see my next post with a corrected solution!
The HTML in this post was affected by me using the Inspector tool, I had accidently moved the English footer into the main-site div.
(/EDIT)
The Russian home page lacks the “main-outer”:
The English home page has a white-space caused by that div:
<div id="mainsite" class="clearfix">
<div class="main-outer clearfix">...</div>
<!--BOTTOM A B C D Module-->
<div class="footer-outer" style="padding:10px 0">...</div>
</div>
First option is to:
– Either edit the HTML to remove the “main-outer” div together with its children as in the Russian homepage by deleting the div or add an inline style to it:
<div id="mainsite" class="clearfix">
<div class="main-outer clearfix" style="display: none;">...</div>
<!--BOTTOM A B C D Module-->
<div class="footer-outer" style="padding:10px 0">...</div>
</div>
– Or edit the CSS to remove the rendering of it:
.home-page .main-outer {
padding: 40px 0;
background: #f9f9f9 url(...) repeat-x top;
position: relative;
display: none; /* added to ignore the html */
}
The second option is to:
– Remove the “mainsite” div as @oli_d111 and @PaulOB already suggested.
Then the two home pages would still differ in structure, but that wouldn’t matter if you choose to remove the rendering of “mainsite” all together on pages with a body class named “home-page”.
E.g:
.home-page .mainsite {
padding: 40px 0;
background: #f9f9f9 url(...) repeat-x top;
position: relative;
display: none; /* added to ignore the html */
}
I would recommend the last option. 
1 Like
Following my second option above would loose the footer on the Russian home page!
The correct second option is to remove the rendering of the “main-outer” div on pages with a body class named “home-page”:
.home-page .main-outer {
padding: 40px 0;
background: #f9f9f9 url(...) repeat-x top;
position: relative;
display: none; /* added to ignore the html */
}
(OT)
Now back to watch the distractingly exiting live Curling EM on TV! 
1 Like
Unfortunately nothing works. I think it’s probably some adjustment in CSS I had made long time ago to a Russian section which I forgot to also add to an English one.
Then I suggest adding the display:none by a style attribute directly in the HTML on the English home page:
<div id="mainsite" class="clearfix">
<div class="main-outer clearfix" style="display: none;">...</div>
<!-- main-site end -->
<!--BOTTOM A B C D Module-->
</div>
<div class="footer-outer" style="padding:10px 0">...</div>
Everything is the same as it used to be.
Is the posted link going to the same page that you try this on?
Could you maybe update the linked page so it can be debugged?
In my browser’s Inspector tool both the CSS and the HTML style attribute works.
I can’t find the relevant rule-block change in your posted css file (or in the online file).
In the online original template file it could be found at line 343, but the code is not properly indented so it could be hard to spot:
.main-outer{padding:40px
0;background:#f9f9f9 url(data:image/gif;base64,R0lGODlhOwAyAKIAAPn5+fv7+/z8/P39/f7+/vr6+v///wAAACH5BAAAAAAALAAAAAA7ADIAAAO1aLrc/jDKSau9OOvNu/9gKI7kQ5xoqq5s675wLM90bd94ru987//AoHDIGhiPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4KVgTC6bz+i0es1uu9/wuHxOr9vv+Lx+z++jA4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmoUFnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLmiALy9vr/AwcLDxMXGx8jJysvMzc7P0NHS09S9CQA7) repeat-x top;position:relative}
Should I try adding that code to custom.css?
Yes, insert the added css in a rule-block with the suggested selector I posted ( .home-page .main-outer) to override the theme, that is the proper way to customize a theme. 
Nope… it doesn’t work. I think the reason for that white rectangle is different… Because in Russian section that issue doesn’t exist. Why is that?
The div “main-outer” does not exist in the Russian home page. It is probably deleted from the html.
So maybe I should delete it from English section’s HTML somehow?
To re-phrase the question… Maybe there’s a way to get rid of some content to make that div disappear. There must be something that keeps it there. I don’t remember deleting anything in the Russian part…
That was the thought.
Though if you get an update for the theme, the update might restore the original structure and you need to remake the changes you’ve done in the previous code.
The way to avoid having eventual theme updates ruin the customization are to create a child theme that is automatically inserted in the theme css.
If you want to make a child theme I can point you to some tutorials.
Edit:
Answers you former post.
There wouldn’t be any updates for that particular template.
Then just delete that div to make the same as the Russian home page.
How to delete the div?