Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Overflow issue. The site keeps scrolling and scrolling…

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #253152
    Konspaul
    Participant

    Hey,

    This site https://jaanavuola.com/peppi-ja-pepin-hevonen/ is having overflow issue. For some reason the scrolling doesn’t end when the content is ending. I have tried multiple different combinations of

    overflow: type-here-anything
    

    without any success. Could you please check the site out and see what is wrong there? You will notice the problem when you scroll to the bottom of the site and then will scroll back up.

    The issue is effecting only the blog posts which is very strange as the layout is completely similar to other pages like https://jaanavuola.com/portfolio/ where you don’t have any overflow problems.

    Thanks.

    #253162
    Atelierbram
    Participant

    On line 652 of your style.css there is overflow: scroll set on .content. You want to get rid of that.

    .content {
      float: right;
      width: 50%;
      /* overflow: scroll; */
    }
    

    On line 610: .content-sidebar-wrap, has flexbox set on that container with no additional flex-properties applied, which seems strange to me. Maybe try to temporarily disable that one as well.

    .content-sidebar-wrap {
      /* display: flex; */
      /* height: 100vh; */
    }
    
    #253171
    Konspaul
    Participant

    Thank you for your help.

    The scrolling issue was fixed by adding

    body {
        overflow: hidden;
    }
    

    The flex attribute is there to display the elements side by side so I can’t remove it. Also I can’t take away overflow: scroll from .content as otherwise the whole site would be scrolling and I only want the actually content part and the rest of the content (menu and featured image) to be fixed.

    #253180
    Atelierbram
    Participant

    Still curious about what exactly caused the endless scrolling issue. Maybe it has something to do with the fact that the entire layout is done with flexbox in combination with fixed height elements? The float: right on .content works now only as a fall-back for older non-flexbox supporting browsers like IE; it isn’t doing anything in contemporary flexbox-supporting browsers, but that’s OK.

    An idea might be to target .content separately for the blogroll-page, like .page-template-page_blog .content { width: 50%, overflow-y: scroll; }.

    Another idea is to try to recreate this layout with the new grid-layout module, just implemented in Chrome and Firefox. Can have your cake and eat it too: leave the flexbox layout as it is now, and put the code for grid-layout within a support-featured test media-query: could be an interesting undertaking IMO, and could mean an alternative solution to fix the endless scrolling problem as well.

    #253245
    Konspaul
    Participant

    When thinking of process how to achieve this design one option was to use floats and other flexbox. Floats would probably have worked well aswell.

    Here is a screenshot of early design map if you are interested http://imgur.com/a/Ctc0G

    I’m also interested what caused the problem because:

    This http://jaanavuola.com/portfolio/ page didn’t have the issue
    An this https://jaanavuola.com/mustangs/ did have.

    To my knowledge the layout is exactly the same. The upper one is a page and other is a post.

    Here is a fanny article about strange CSS issues https://medium.com/@isaaclyman/8-css-gotchas-to-start-your-morning-off-right-c5daade0731d. It is not an answer but a solace ;)

    #253247
    Konspaul
    Participant

    “Another idea is to try to recreate this layout with the new grid-layout module, just implemented in Chrome and Firefox.”

    Everything that is new in CSS is usually not supported in all browser so I don’t like to use it.

    #253279
    Atelierbram
    Participant

    Everything that is new in CSS is usually not supported in all browser so I don’t like to use it.

    I don’t think you get my point.

    @supports (display: grid) {
    
      .container-grid {
        display: grid;
        grid-template-columns: /* grid stuff */
      }
    
    }
    

    This @supports (display: grid) { /* stuff */ } is the @supports feature test media-query: it only targets browsers who do understand the new CSS grid layout module. Hence my remark about “having your cake and eat it too“; one can leave the rest of the layout in the CSS as it is, everything within the @supports feature-query will override it, but only for the newest up-to-date browsers: the old browsers won’t be affected by it.

    #253286
    Konspaul
    Participant

    Ou, I see. This is something new to me. Have not yet used @supports in any of my projects.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.