horizontal scroll bar missing from the website - css

WEBSITE LINK
The above link was a responsive site in the start. But due to the nature of the content, had to add a lot of tables etc and now when i zoom in the website on my browser ,it is does not show any horizontal scroll bars and same goes for when i try to view it on my phone.
i tried different ways like adding overflow-x:auto to the body and removing all the overflow: hidden but still am unable to see my whole website enlarged.
any help would be much appreciated

Remove this:
body {
overflow-x: hidden;
}
and this
#art-main {
overflow: hidden;
width: 100%;
}

The problem is that main div (art-main) is containing everything and is defined as:
overflow: hidden;
width: 100%;
So if you resize the page, the div is adapting his size to fit the screen, and the content that is outside that size is cutted out.
I think you should work on this.

Related

fluid columns with 100% height image

I'm trying to set up a fluid column layout for a site I'm working on. I'd like to do this without javascript, but it's looking like that might end up being the easiest option. Regardless, anyone know how to get this done with CSS?
Both columns need to fill the browser height. The left column contains an image with an aspect ratio of 2:3, with height: 100% and width: auto, so the left column's width will change depending on how tall the browser is. The right column needs to fill the remaining space.
I saw a trick using float:left and overflow: hidden that's working great, except the divs do not resize themselves correctly when the browser window is resized.
Here's a simplified fiddle to demonstrate the problem, with the CSS below:
.left-column {
float: left;
}
.left-column img {
height: 100%;
display: block;
width: auto;
}
.right-column {
box-sizing: border-box;
padding: 20px;
overflow-x: hidden;
overflow-y: scroll;
}
.left-column, .right-column {
height: 100%;
}
https://jsfiddle.net/v7unnhnc/2/
It seems like .left-column doesn't resize itself automatically. Any ideas?
basically your code works ok. You may add display:inline-block to your left column and you will see the img container adapt when resizing vertically, however the text won't flow properly this time.
The problem (if a problem) is that the width of your container (left one).. the one with your width:auto (and you don't really need to add it to your css as your image will set the width of the container when overflow is hidden.. when floating) won't understand the resize of the img without reloading the page even if you visually can see it.
But it's important to know as many web developers these days are too much focused into (imho) making a responsive design while resizing the window that GOAL is not that. The main goal is your web to adapt to whatever window size your users (or future users) have at the moment they load your web. And your code is right on that.
Just people like us may go into a web and start resizing manually the window to check the responsiveness.. and even then, the vast mayoritie of us with just check it resizing on the x-axis.
The chances you have to get someone notice your web not working ok when resizing the window (y-axis) is... well, I hope you have SOO many pepople noticing. that will mean you have a lot of visitors.

Twitter bootstrap footer too low

I'm using Twitter bootstrap with a template I purchased. I had to do a bit of work to get the footer to appear and look acceptable, but now it is always too low.
What I mean is, white space will always be added so that the footer is below the bottom of the screen - you always have to scroll down to see it.
Here's a link to the site. You only need to look at the homepage to see the problem.
If you want to remove the extra white spacing that is causing your page to grow more then it should, just remove:
body {
padding-bottom: 40px;
padding-top: 60px;
}
#wrap {
min-height: 100%;
}
html, body {
height: 100%;
}
If what you are trying to achiev with the footer, is to allways stick it on the bottom of the page you should follow a technique called sticky footer something like this
The problem seems to be that you have the #wrap element set to 'min-height: 100%;'. If you are ok with the footer just being at the bottom of the content rather than the bottom of the page then removing that should be an easy fix.

Why is the full page background in WordPress hiding the page scroll bar?

I am having trouble with a full page background in a test wordpress site. I can't get the page scroll bar to appear.
Any help would be appreciated.
[EDIT]
The issue is you added the following to your body tag.
position: fixed;
Remove that line and everything should work then.
That is probably because there is no need for a scrollbar because the page doesn't extend the full height of your screen resolution.
I just figured this out myself:
I changed this for the background image:
position: absolute;
to
position: fixed;
and deleted
overflow: hidden;
This allows the scroll bar to appear and the fixed background position makes the background stay in place. The background still re-sizes perfectly, this just lets your content scroll.
Then add the following to do away with the horizontal scroll that appears:
overflow-x: hidden; /*Horizontal scrollbar*/
-ms-overflow-x: hidden; /*IE 8 horizontal scrollbar*/

CSS Disabled scrolling

I came across an issue with one of our web sites:
In IE9 the page had a vertical scrollbar, but you couldn't use the mousewheel, arrow keys, pgup/pgdwn to scroll. The only way to scroll was to actually click/hold and move the scrollbar.
I removed the following from the css:
{
overflow-x: hidden;
}
Then scrolling worked as usual. Has anyone else come across this? It seems odd as overflow-x should hide the horizontal scroll bar? Why would it effect the vertical?
I have tried this on a test page and it acts as expected. So it must be a combination of things.
Try using the following code snippet. This should solve your issue.
body, html {
overflow-x: hidden;
overflow-y: auto;
}
overflow-x: hidden;
would hide any thing on the x-axis that goes outside of the element, so there would be no need for the horizontal scrollbar and it get removed.
overflow-y: hidden;
would hide any thing on the y-axis that goes outside of the element, so there would be no need for the vertical scrollbar and it get removed.
overflow: hidden;
would remove both scrollbars
I use iFrame to insert the content from another page and CSS mentioned above is NOT working as expected. I have to use the parameter scrolling="no" even if I use HTML 5 Doctype

Css aligning/scroll bar problem

yes another problem with this scroll bar
alright so I started the website over again that was mentioned here
and I am having problems with this scroll bar again
alright so all I have is a single image in a div tag
<div align="center" id="SuggestionBox">
<img src="images/SuggestionBox.jpg"/>
</div>
this code displays right but
when I make the browser window small enough that the full image can not be seen it doesn't give me a scroll bar to see the whole image
hopefully this makes sense
I am using firefox
EDIT:
I tried overflow:scroll and it did not work
this was the outcome
and this happened in the middle of the page
I also tried 'overflow:scroll' on the body of the page through css and all it did was show disabled scroll bars that did not change no matter the size of the browser
also some people are a bit confused
so
this picture might help
notice how the image is not fully shown
well, I want there to be scroll bars in case the user wants to see the whole image
but they're not appearing
also here is all my css code:
body
{
background-image:url("images/background.jpg");
}
a:hover
{
color:#FF0000;
}
table
{
background-color:#FFFFFF;
}
#SuggestionBox
{
position:relative;
right:375px;
}
thanks
Good Luck
get it?
I may not be understanding your question, but it looks like your problem is that you've disabled scrolling in the body but would like the div to scroll. #lukiffer's answer is right. When you resize your browser, however, the scrolling div, which is a fixed size, isn't overflowing because its content still fits.
Are you wanting your "SuggestionBox" div to anchor to the page so that it resizes along with the page? That would enable it to change sizes as the browser does and thus add scroll bars when its content doesn't fit:
#SuggestionBox
{
position: absolute;
/* Change these to establish where to place the div. All zeroes
means it fills its whole container */
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
}
Update:
I don't get what #SuggestionBox is supposed to be. If you're just wanting a centered image link, you could get rid of the div and just have this as your markup:
<a id="SuggestionBox"></a>
And for that <a/>, you could have the following CSS:
#SuggestionBox {
display: block;
width: 100px; /* Or whatever the width is */
height: 100px; /* Or whatever the height is */
background-image: url(images/SuggestionBox.jpg);
margin: 0 auto;
}
If your reason for having the div was to give your link a right margin of 375px, your CSS could have the margin set to 0 375px 0 auto instead.
If you use this simple HTML/CSS, your body should be able to scroll normally (unless you have other CSS or HTML that you haven't posted that's breaking it).
div#SuggestionBox { overflow:scroll; }

Resources