-2

I am trying to figure it out why my website is scrolling horizontally on small devices. I have tried to change a lot of css, but still, nothing happens. Would you please have a look at this My website

I guess you can inspect my code. If it is something wrong, let me now

All in One
  • 5
  • 5
  • 1
    I checked your website out with many different sizes and it seemed fine on all. – Carter May 17 '17 at 13:49
  • About how much pixels we talk if you say small devices. On my phone everything works fine. So after inspecting it I would say on very small devices `.boxcolumn` can affect the horizontal scrolling because of it's absolut width of `320px` – julianstark999 May 17 '17 at 13:50
  • how to make it responsive then? – All in One May 17 '17 at 13:52
  • of course I could check your website, if you're willing to pay my hourly rate of 100$ :D :P – ad_on_is May 17 '17 at 13:53
  • 2
    Try adding overflow-x:hidden; css style in body. – Nadir Laskar May 17 '17 at 13:54
  • @AllinOne don't use this `.boxcolumn` stuff. You're still using bootstrap so make realize that `.boxcolumn` design with `.panel` – julianstark999 May 17 '17 at 13:55
  • @NadirLaskar has your solution. Just tested and that worked perfectly. I'd post it as the answer Nadir, you'll get an upvote from me. – trav May 17 '17 at 13:58
  • use `max-width:320px` on the `.boxcolumn` so if the screen is smaller than 320px it will shrink automatically so no scroll . or you could use `overflow-x:hidden` /// plus be careful, in your `boxcolumn` ( only place i checked) you have a lot of empty `p` tags. that's not a good practice – Mihai T May 17 '17 at 14:00
  • 1
    @trav okay, I am adding it as answer if it works for you.. – Nadir Laskar May 17 '17 at 14:01

2 Answers2

2

If you don't want any overflow-x in your page you can hide all overflow in the x direction on the html body for a quick solution.

If at any place inside the body you want a overflow-x just add the css style overflow-x:auto; to that element with some defined max-width property.

To solve the issue try adding overflow-x: hidden; css to the body.

body{
   overflow-x: hidden;
}
Nadir Laskar
  • 4,012
  • 2
  • 16
  • 33
0

I checked the site on multiple sized devices and browsers and it all looks fine.

Be sure you are not looking at a cached version of the CSS, which will make you think that your CSS changes are not having an effect!

See here: Stylesheet not updating

Community
  • 1
  • 1
Tom Abbott
  • 1
  • 3
  • There is definitely an issue with the view. It only seems to show up when the view is just under 360px in width. From that down to 320px, there is a large white space on the right when scrolling. Had this issue with Chrome a while back, easily something that's over looked. – trav May 17 '17 at 14:00
  • I tested it on the smallest device I could find to hand - an iphone 5c (320 px) and it was loading as expected. – Tom Abbott May 17 '17 at 14:06
  • Just did the same, tested it on multiple devices and I'm totally still seeing that good ole white space. Except when applying Nadir's fix. – trav May 17 '17 at 14:15