In Aberdeen Fixed, if the screen is smaller than the width of the page (either through window resizing or a lower-resolution monitor) and then the page is scrolled to the right, the page content beyond the narrow-width limitation is simply not there.

In the attached screenshot you'll see that some words and letters are simply cut off where the edge had been before scrolling right, even though it is now scrolled into visible range.

This happens in Safari, IE, and FF.

CommentFileSizeAuthor
#6 horizontalfix.patch299 bytesbchoc
aberdeenHscroll.png93.11 KBbchoc

Comments

ishmael-sanchez’s picture

ishmael-sanchez commented
Assigned: Unassigned » ishmael-sanchez
Status: Active » Needs work
ishmael-sanchez’s picture

ishmael-sanchez commented
Status: Needs work » Needs review

Hello bchoc,

I refined the CSS can you kindly test to make sure it work for you? Below is the section of code I changed, everything was in the layout section.

/**
 * Layout.
 */
#wrapper-header {
  background: #f9f7ed url(images/bg-header.gif) repeat-x left bottom;
  margin-top: 25px;
}
#header {
  width: 60em;
  margin: 0 auto;
  height: 5em;
  position: relative;
  text-align: left;
  background: #f9f7ed url(images/bg-header.gif) repeat-x left bottom;
}
#header-block {
  position: absolute;
  top: 0.5em;
  right: 0;
  width: 48em;
  height: 1.6em;
}
#wrapper-main {
  background: #fff url(images/bg-main.gif) repeat-x 0 0;
  overflow-y:hidden;
}
#main {
  width: 60em;
  margin: 0 auto;
  padding-top: 1.6em;
  text-align: left;
  background: #fff url(images/bg-main.gif) repeat-x 0 0;
}
#topbar {
  min-height: 1em;
}
#sidebar-left {
  width: 14em;
  margin: 2.2em 1.4em 0 0;
  float: left;
}
#sidebar-right {
  width: 14em;
  float: right;
  margin-top: 2.2em;
}
#center {
  width: 100%; /* if #center is the only column */
  float: left;
}
.sidebar-right #center, .sidebar-left #center { /* if #center shares full width with one other column */
  width: 43em;
}
.two-sidebars #center { /* if #center, #sidebar-first and #sidebar-second are all present */
  width: 25em;
}
.sidebar-left #content, .sidebar-right #content, .two-sidebars #content { 
  float: right; 
}
.two-sidebars #content { 
  width: 43em;
}
#footer {
  clear: both;
  margin: 0 auto;
  padding-top: 2em;
  text-align: center;
}
bchoc’s picture

bchoc commented

Certainly. While the code you've given did not solve the issue for my installations, I noticed that you removed the overflow-y:hidden line from the #footer section. I tried removing that line from #wrapper-main as well, and that did seem to solve the problem. As far as the sites I have available to test, setting #wrapper-main {overflow-y:visible} caused the content to be visible when horizontal scrolling was used. Why that is the case, I don't know. I haven't observed any negative side-effects from changing that line yet.

ishmael-sanchez’s picture

ishmael-sanchez commented

Hello bchoc,

Thanks for testing, can you post the code in the does work for you or attach a patch file is possible.

ishmael-sanchez’s picture

ishmael-sanchez commented
Status: Needs review » Fixed

Alright, I will include the overflow-y:hidden as a comment in the CSS but the code on my dev site seems to be fixed.

bchoc’s picture

bchoc commented
Status: Fixed » Needs review
StatusFileSize
new horizontalfix.patch299 bytes

Sorry I took awhile to get back to this. The patch is attached, and it's really simple. Only one line of CSS change was required, all of the code changes from comment #2 seemed to have no effect for better or worse. However, this patch seems to resolve the issue by itself.

ishmael-sanchez’s picture

ishmael-sanchez commented
Status: Needs review » Patch (to be ported)

Hi bchoc,

Thanks for this.

ishmael-sanchez’s picture

ishmael-sanchez commented
Status: Patch (to be ported) » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.