right scroll bar appearing and need to remove it - css

I'm a newbie and need to remove the scroll bar at the bottom of this website.
I also need the body to be centered.
http://selfcateringholidaycottagecornwall.seesites.biz/
Many thanks

First: what screen size are you on?
The reason that you get a scrollbar at the bottom of the page probably is because your screen resolution is low.
When I go to your link, I don't have a scrollbar (this is at screen resolution: 1920x1080 and with Firefox 28.0).
A possible solution is to use the max-width: attribute to your 's to prevent your website from being too large.
Is this what you mean? If not, could you clarify your problem?

Related

unwanted horizontal scrollbar in Divi Theme

so I am making my first website in WP using Divi Theme and suddenly this horizontal scrollbar shows on 14' screen that hasn't been there before. When I view it on tablet or phone or 17' plus screens there is now scrollbar at all. I am not aware that I have done anything particular for it to be displayed. I tried to check width settings, but it doesn't seem to be the real issue. My website is https://vonofit.cz/en/home/ also as website screenshot I would really appreciate any advices as I am beginner to this. Many thanks anyone.
Jan
This is occurring because something is making the page container larger than the browser window, which makes the scroll bar appear so the user can scroll to see the excess space. I didn't identify what is causing the issue, but an easy fix would be to add a line of css to the stylesheet that will make the page overflow hidden. Something like this should work:
div#page-container {
overflow:hidden;
}

mobile navigation doesn't fix on scrolling

I'm working for a responsive website on a slider like FB App. It works fine, but if the user scrolls, the open navigation moves with the content. I'm trying to put position: fixed to the element. This works,but if the navigation element is larger than the screen the rest of the content cannot reached. Example: http://lucie-hauri.com.beethoven.ch-meta.net/ (just put the screen to a width of about 300px an the mobile Icon appears, click on it for example).
Has anyone an idea how to fix this?
Thanks for help, regards
Thomas
I don't know if this is the cause, but you have a javascript error (check the console), which may break things up.

Responsive Web Design.. Unwanted Right Padding/Margin on Ipad

Hi guys as the title says.. i keep getting this horriable right margin when i go down to ipad viewport size and when i view it on the ipad hence you get horizontal scroll bars.. major issue and quite annoying... But when i get down to the view of iPhone it goes away.. really strange.. can any one please help..... you can check it out here
I've deleted all elements from the page and i still get the problem.. so annoying
Click Here to View Problem
In your css, your section and footer style rules have a negative margin left and right. I took them out and it seemed to fix it for me. Perhaps look to see if you have some in your header as well?
I'm not sure why you have a negative margin here, but if you absolutely need this margin at higher window sizes, look into adding these rules into your ipad breakpoints.

Horizontal Scroll Bar Issue - On Smaller Screens

I'm working on http://www.lceonline.co.uk
When working on a smaller screen res, anything less than 1000px, I'm getting a horizontal scroll bar appear. This happens on all browsers.
I've tried
overflow-x : hidden;
but then the web pages' background doesnt repeat, it just seems to be one large gray background. It also is a css-3 property, One i'd rather try and avoid.
I've had a look at the sites' DIV tags and still cant see what is actually causing the problem. I havent built this from scratch, someone else worked on it before me and I feel they have used too many containers.
Can someone provide me with a possible solution on how to get rid of it?
Thanks
Your issue is that
#page-container and #page-container2 both have width:1000px;
If you remove the width from both of those the scrollbar disappears, as does the centring and the gray background.

CSS: How to Solve this "Site-Is-Too-Big" Challenge?

I suspect my question may be too general, but I hope someone with expertly knowledge of CSS could help me work out a solution.
My site looks acceptable (to me) in high-resolution monitors (1920X1080) – but on smaller-resolution screens the left site doesn't fit - and even though the horizontal scrolling appears eventually of you make the window smaller, but it appears "too late" and doesn't include anything left of the main content panel.
That's the particularly I'm particularly concerned about. There are other resolution-related problems, too.
Here's the site:
http://www.cybart.com/bscg/
I would appreciate it if you could take a look – and would be grateful for suggestions / recommendations / advice from CSS masters!
Here's how I understand your problem:
If someone goes to your website on a smaller screen, maybe 1024x768 or something, there's no scroll bar's appearing.
You need to set up a minimum width / height for a div container for the page content. Then if the browser is narrower than that you'll get the scroll bar.
I suggest instead that you make one div tag that won't be wider than say, 950 and put a nice background behind it instead. No one wants to scroll left or right in the browser.
Use width and height css tags on a div containing the page content.
I have a lower resolution screen... and I see the issue.
You might consider shrinking the size of the main content section and then shifting over the nav.
Or -- better -- auto center your main section using margin:0 auto; and then position the left nav accordingly.
The scrolling bars issue has to do with page overflow. You might be using overflow:hidden and when the page doesn't fit the browser doesn't show the scrollbars.

Resources