White Space on Wordpress website to the right when switching to rtl in elementor specific pages
Here is webpage :
site url
tried
html, body {
overflow-x: hidden;
}
but not working
Try adding this to your CSS:
.rtl .elementor-top-section {
left: 0 !important;
width: auto !important;
}
I've tried a bunch of ways to remove this margin on the right of the YouTube Livestream page.
I'm doing this for an extension I'm working on and I'd like the margin to be removed completely from page.
I've already done the following:
margin: 0px !important;
It removed the margin on the left side of the page, but there's still a big chunk of margin on the right side and I have no idea how I should remove it.
Any help would be much appreciated.
The other margin spacing is actually on the elements directly inside #columns, which is #primary & #secondary. Overiding those extends width to the window edges.
div#columns {
max-width: 100%!important;
}
div#primary {
margin: 0!important;
padding: 0!important;
}
div#secondary {
padding: 0!important;
}
.html5-video-container video {
width: 100%!important;
height: auto!important;
}
while the global for the pagination is currently set up as the following:
.pagination {
float: right !important;
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
again, on the other pages it's correctly displayed on the bottom on the page, however, on this particular page with the same exact css, the pagination is at the top where again, I need it at the bottom.
I would recommend looking at this snippet which is the full code needed for a data table with pagination at the bottom.
http://bootsnipp.com/snippets/featured/bootstrap-snipp-for-datatable
I've been trying to customize Blogger's Simple template and have hit a wall in getting the background image for footer-outer to match up - I am still learning CSS and am not sure where the padding on left is coming from or how to get it to completely cover up the repeating background of body-fauxcolumn-outer at the very bottom. Or even if this is the best way to be coding it. Please help!
http://fantasyartofetsy.blogspot.com/
Here's my edited code -
.footer-outer {
width: 1000px;
background: url(http://i1192.photobucket.com/albums/aa324/faeteam/fae-bg-bottom.jpg) no-repeat top center;
background-color: #093e60;
}
.body-fauxcolumn-outer {
background: url(http://i1192.photobucket.com/albums/aa324/faeteam/fae-bg-middle.jpg) center;
background-repeat:repeat-y;
}
Seems better with the following modification:
.content-inner {
10px 60px 0 10px;
}
The background image is now displayed horizontally as intended I guess but there's still text displayed half on the image half on the blue background. Where do you want it to be displayed?
EDIT: maybe also modify that:
.footer-inner {
padding: 80px 15px 0 15px;
}
I've been working on a print page for a client. After playing around for awhile I've found I get an extra blank page. The unusual thing is that if I select "Outline Block Level Elements" in Web Developer for chrome, the extra page disappears. This is all the CSS being used on that page right now:
#page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
body
{
background-color:#FFFFFF;
height: 296mm;
border: 1px solid black;
margin: 0px; /* this affects the margin on the content before sending to printer */
}
.print_A4 {
margin: 0mm;
padding: 0mm;
height: 270mm; /*A4 Size*/
width: 210mm; /*A4 Size*/
}
.A4_content {
margin-left: auto;
margin-right: auto;
margin-top: 44mm;
height: 210mm;
width: 165mm;
}
I've done a lot of googling but I can't see anything related to this. The body border clearly shows the div ending before the end of the first page, however I still get an extra blank page for some reason.
Could it be there is something adding only 1 pixel somewhere? Since you define the page to use full 270 mm height. Even one margin/padding/border would add a new page.
Does it still happen if you decrease this value? If not, then I suggest you take a small bit off this value (you don't use full height anyway.) You can add page-break: after to .print_A4 to prevent a next page from taking the little space left on the previous page.
Really late answer, but I think my contribute can help someone with the same issue I came across making use of CSS to setup a page for printing:
creating a dynamic html content and appending it to the body element with the purpose to print only such content, I realize that only Chrome (version 46) and Opera (version 32) creates an extra blank page at beginning while printing, this only happened when the content height was greater than the page height.
The solution provided by #mewiki solved me a 2-days-of-research-and-test problem.
Indeed Chrome and Opera seemed to have default margins and setting the following rule:
body {
margin: 0 0 0 0;
}
solved the frustrating behavior which was not encountered in other browsers.
Old question, but for people with the same problem here is my solution that fixed it for me.
I found out that the margin-bottom of the body must be set explicitly to zero (Chrome and Safari seem to have a default margin).
body
{
margin: 0px 0px 0px 0px;
}
div.page {
margin: 10px 10px 10px 10px;
page-break-before: none;
page-break-after: none;
page-break-inside: avoid;
}
For each to be printed page start with a <div class="page"> and set the page margins there so the page looks nice.
So because 27.9cm turns into something like 1423.03px I suspect it's causing the print renderer to display an additional pixel. Adding this to my page fixed the issue.
.page-a4 {
width: 21cm;
height: calc(27.9cm - 1px);
}
For anyone dealing with multiple pages. I added each page content in sections then used this:
section {
margin: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
I had a similar problem where the introduction of a page break caused a blank page.
I don't have enough reputation to comment on wiredolphin's post, but using that suggestion, the following worked for me
html, body {
margin: 0 0 0 0;
height: 99% !important;
}
.page {
height: 100vh;
page-break-after: always;
}
I know this doesn't answer the original poster's question, but it's pretty old, and this might help someone.
Also, thanks wiredolphin! You led me in the right direction.
#page {
size: auto; /* auto is the initial value */
margin: 12px; /* this affects the margin in the printer settings */
}
I was facing the same issue and Neograph734's answer gave me an important hint.
I was also getting extra blank pages, and the only thing that worked for me was adding this rule to my css (for print)
*
{
box-sizing: border-box;
}
Then I no longer need to worry about having an extra pixel added when using margin, padding or border.
Once I've added that rule, I only had to adjust the boxes positions and everything worked flawlessly.