I have tried this:
html, body {
margin: 0px;
padding: 0px;
width: 100%;
}
There is a small white column to the right side of the page, so there is a horizontal scrollbar. I want to see all the contents in a page so that I do not need horizontal scrollbar and I do not need that extra small white column of a page. How can I remove horizontal scrollbar in wordpress with css or what should I do to remove that horizontal scrollbar and that extra small white column?
Add overflow-x: hidden; to your css to hide the horizontal scroll.
Related
Is there any way to remove the horizontal scroll ?
There is no content towards the right but the area remains blank and scrolling comes .
The styles for modal are :
.ticketModal {
width: 1000px;
min-width: 1000px !important;
overflow: hidden;
max-width: 1000px;
}
You should add in your css overflow-x: hidden; to your main div or class, this will help you to remove horizontal scroll
If you don't want the horizontal scroll in the entire app. Simply add
*{
overflow-x: hidden;
}
This will remove the horizontal scroll for all the DOM elements
I am trying to implement a grid onto this page. Because the Wordpress page uses overflow:hidden to the layout it will need to remain as is.
Out of curiosity, I tried
.content-container, .content {
overflow:visible
To see if it will reveal the entire grid that was cut off and it did, but also revealed what I am trying to hide through the layout, a spare bit of page.
Is there any way that I can reveal the whole grid without having to allow the overflow?
It cuts off the sides because .container's width is set to a fixed value of 1170px. If you set .container's width to 100% all content will be stretched.
.page-id-2099 .container {
width: 100%;
padding-right: 0px;
padding-left: 0px;
}
This will work:
.page-id-2099 .content-container, .page-id-2099 .content
{
overflow: visible !important;
}
I have a div which works to divide content up on my page. I need it to have horizontal padding and vertical margin to space out my content.
The problem is that the CMS puts this div on the page even when it doesn't have content. When this happens I need the div to behave as if it wasn't on the page and not add any spacing between the other divs which do have content.
When I tested this on my site it seemed like horizontal padding and vertical margin achieved this. However the demo below behaves differently:
div {
padding-left: 50px;
padding-right: 50px;
margin-top: 100px;
margin-bottom: 300px;
}
https://jsfiddle.net/m3xfspj8/
I have a page with the following HTML structure...
<html>
...
<body>
<div class="wrapper">
...
</div>
</body>
</html>
The .wrapper is being set at min-width: 1100px for reasons I won't go into. Therefore when the browser is resized to less than 1100px I want a horizontal scrollbar to appear.
My CSS is as follows:
html {
overflow-x: scroll;
height: 100%;
}
body {
overflow: auto;
}
.wrapper {
min-width: 1100px;
margin: 0 auto;
}
For some reason the only horizontal scrollbar showing is one when you've scrolled vertically down to the bottom of the page, and it appears sort of "within" the main browser frame, above the main browser horizontal scroll area. I want the main horizontal scrollbar of the window to be the one that is available.
Here is a diagram of my problem: http://oi62.tinypic.com/r06m1z.jpg
And a codepen: http://codepen.io/anon/pen/ocxvs
Thanks in advance for any help!
Its because your document (body) isnt stretched to the full height of the viewport (html), you need to assign height:100vh, also remove your overflow settings so you dont get 2 scrollbars appearing (one on body one on html).
Simply change your CSS to:
html,body{
height:100vh;
width:100vw;
margin: 0;
padding: 0;
}
I've tried so many things on this page
https://boycottplus.org/campaign/reclaim-our-time-say-no-time-wasting-websites
On the right column, I can't get a padding or margin of 10px between it and the left column without a scroll bar appearing. I've tried using a wrapper div but everything I do seems to bring the scroll bar :-/
The style I am focusing on
.subsection .inner {
padding-left: 10px;
}
in firefox
Add overflow:hidden to your body style.
Are you setting width and padding on the same element?
For example, if you have:
.subsection .inner {
width: 100%;
padding-left: 10px;
}
then the total width of the inner div will be 100% + 10px, which will result in a scroll bar.
If you want to remove scrollbar in horizontal direction, then use overflow-x: hidden; in that particular HTML element, keeping your vertical scrollbar intact.