I have a website based Wordpress and for some strange reason when I open it through my iPhone or any other mobile device I only see the background of the site and only if I scroll a lot to the right I can see the full site.
I attached a screenshot so you can all see what I mean or just try opening http://sivantalmor.com and see by yourself.
Is there CSS I can use to fix this problem?
I'm not 100% sure what's causing this, but this seems to work:
Add the overflow-x: hidden; property to your div#main
Like so:
<div id="main" role="main" style="overflow-x: hidden;">
</div>
Edit:
The problem is here:
<div class="audio-player" style="direction: ltr;"></div>
You could remove direction: ltr; that's the one causing all this. But then you'll have to fix some margins for the element wrapping the album photo.
The exact problem is in the audioplayer part (#soundcheck_audio_player_widget-2).
Inside is the link .jp-pause, which is positioned wide outside the div to the left.
This causes the page to generate a long scrollbar to the left.
You can add overflow: hidden; to this Class: .jp-controls-wrap
.jp-controls-wrap {
overflow: hidden;
}
It does the trick!
Related
I am new to HTML and CSS and am creating a website for a basic university course. For a project, I have created 8 div cards highlighting the planets of the Solar System but cannot get the cards out of this fixed/unscrollable position.
This is the link to the current page state:
https://hollandtheperson.com/dight/250/website/planets.html
Any tips on how to fix this?
You have added overflow: hidden; for the CSS in the body tag, which hides the scrollbar essentially making the scroll feature unusable, if you remove it then it should work.
You can set the overflow-x instead of overflow to hidden, like so:
...
overflow-x: hidden;
...
This disables horizontal scroll but allows vertical scroll
The problem isn't really with it being fixed in place, but i can see why you got that impression.
You're using overflow: hidden; which means "if something doesn't fit, snip it off".
So, because the overflow has cut away everything wasn't already within the viewport - there is now nothing outside the viewport, and hence, no reason to allow scrolling.
Fixed the .card height and add overflow-x: hidden which give you scrolling card. Sample code given below:
.card{
// add additional code
height: 350px;
overflow-x: hidden;
}
Hi can see that you have added items in css of body tags which i guess you should remove in order make it scrollable feature those are
height: 100vh;
overflow: hidden;
Please check if that works hopefully it should be.
I would like to hide the scrollbar if the the user is not scrolling, meaning if the user scrolls, the scrollbar should appear (only the scrollbar not the scroll track), while if the user does not scroll it should disappear. I sort of had that setup for a long time, but than I made some changes to my page and now the page always shows the scrollbar (if there is more content than one page can cover). Unfortunately I don't know what I did to make this feature go away? I played around with overflow in the css, but overflow: hidden just removes all scrolling possibilities. Here is a fiddle which shows my current setup
https://jsfiddle.net/jsmnsLm7/ (please make the window big, so that you can see all of the features of my navbar setup)
as you can see I use
overflow: hidden
in the body and
overflow: scroll
in the main.
thanks for your help
carl
try following css:
overflow:auto;
It worked for me :)
This will do what you're looking for
http://rocha.la/jQuery-slimScroll
Or you could just show the scrollbar when you hover over the area using CSS only;
This worked for me;
<style>
#ID {
overflow-y: hidden;
}
</style>
#ID:hover, #ID:active, #ID:focus {
overflow-y: auto;
}
</style>
<div class="ID"></div>
There isn't a way to do this outside of a scripting languege as far as I know, but the JavaScript you use for this is super simple.
Start off with a CSS style of:
#ID {
overflow: hidden
}
Then in your div in the HTML use this command
<div id="ID" onmouseover="this.style.overflow='scroll'"
onmouseout="this.style.overflow='hidden'"
this will cause your scroll button to appear when the user hovers over the div, but then disappear again when the user hovers away from the div.
If you are using bootstrap, it is pretty simple - There is a default Scroll class to which you can apply the style overflow: auto.
<div class="Scroll" style="overflow: auto" >
.......
</div>
Based on this https://stackoverflow.com/a/40857678/15992537 answer I made this:
.categorias::-webkit-scrollbar-thumb {
height: 6px;
background: #ff3d1d;
border-radius: 10px;
visibility: hidden;
}
.categorias:active::-webkit-scrollbar-thumb {
visibility: visible;
}
this worked in my case because my div is draggable, so the thumb shows when i drag and move it, but with JS you probably can make it apear based on events like page scroll for example.
use overflow: auto
The overflow property has the following values:
visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary
I have a web page that is longer than the standard screen. When I open it in the browser there is no vertical side scroll bar that allows the user to move down the page. I tried using the line overflow:scroll; but it seems it is ignored. I have a header and a line of buttons, then the content is in three sections. I have the overflow:scroll within the first BODY line like this: body overflow:scroll class="plugin webkit chrome win Locale_en_US"
How do I force the scroll bar to appear and where should it be properly placed?
Sorry, it's been years since I've done html or any kind of coding so bear with me.
The overflow is a css attribute, meaning that it should be in a style tag, or even better, in an external css file ( http://www.w3.org/TR/html401/present/styles.html )
In your case it would be:
<body style="overflow: scroll" class="plugin webkit chrome win Locale_en_US">
Use css style='overflow: auto;'. If not works, find any element, that is overflow: hidden; and apply overflow: auto to it. Or add JSFiddle
i'm using this in my project, i created a css like this
div.scrolled {
width: 1150px;
height: 620px;
overflow: scroll;
}
and in my html file i only identify what area i want to introduce into my div and i do this
<body>
<div class="scrolled">
here goes wath you want
</div>
</body>
and you will have your scroll in 'y' align, hope i helped you
I am currently building a website for Bearskin Group ....
The site is pretty much done, I am creating it with the GoDaddy online builder....
BUT - I have this stupid horizontal bar scroll coming up that id like to diasble...
I have tried using:
style="overflow-x: hidden"
&
div {
overflow-x:hidden;
overflow-y:hidden;
}
Can anyone help me remove this?
Thanks
Dan
This is because you are using huge width.
#wsb-element-233156931 .wsb-image-inner div {
height: 60px;
overflow: hidden;
position: relative;
width: 2904px; /*remove it*/
}
or
change overflow:auto to overflow:hidden in class wsb-canvas-page-container
Also I noticed you are using image (check below), can't you remove the image or use a background-color to fill the color.
<div class="customStyle"><img style="width:2904px;height:60px;" alt="" src="//nebula.wsimg.com/b7fd20f21ba2c36e5ef9f39ea2613e8e?AccessKeyId=D238BA178C5B0342ADD7&disposition=0&alloworigin=1"></div>
I ran into the same problem. It turned out to be an element that was sticking out with an invisible box. You can define page restrictions but if a shape, text box or element is protruding into the edges it automatically overrides your restrictions and creates more room. Eliminating these should shrink your page back down to normal and eliminate the horizontal scroll.
I was working on this website when I encountered a problem. It seems that if that when you scroll on the white sidebar on the left, the whole page is scrolls somewhat.
How can I stop this? I think the problem has something to with overflow, but I'm not sure how to resolve it.
You have a wpstats image on the footer which cause that scrolling.
Add the following to your css
#wpstats {
display: none;
}
If you notice, you'll see that except for a approximately 5px section in the bottom, the rest of the page is fluid, i.e., resizes dynamically as the browser windows resizes.
This annoying space is getting caused by an ill-placed image. The exact code responsible is:
<img id="wpstats" src="..." alt="">
To fix this, just add this code to your CSS files:
#wpstats {
display: none;
}
Or add it inline as so:
<img id="wpstats" src="..." alt="" style="display:none;" />
The width of your webpage is hard-coded and in this case is more than the browser width. You can add this to your CSS files:
body {
overflow-y: hidden;
}
which will basically just hide anything that goes out of the screen.
SO really needs to get CSS highlighting...