[Resolved] Sticky Side Bar doesn’t work (if I use left & right side bar both)

Home Forums Support [Resolved] Sticky Side Bar doesn’t work (if I use left & right side bar both)

Home Forums Support Sticky Side Bar doesn’t work (if I use left & right side bar both)

  • This topic has 5 replies, 3 voices, and was last updated 3 years ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1573322
    Jinkwon

    Hi, Generate Press.

    I am using CSS as below.
    .inside-right-sidebar aside:last-child,
    .inside-left-sidebar aside:last-child
    { position: sticky }

    It works great if I use the right side bar only
    https://www.oppadu.com/%ec%97%91%ec%85%80-%eb%ac%b8%ec%84%9c-%ec%b4%88%ea%b8%b0%ed%99%94-%ea%b8%b0%eb%8a%a5/

    However, it does not work if I use the side bar left&right both.
    https://www.oppadu.com/question/?uid=9026&mod=document&pageid=1

    May I ask how I can solve it?
    I want to make the last child of both side bar sticky.

    Thank you!
    Best regards,

    #1573631
    Elvin
    Staff
    Customer Support

    Hi,

    The CSS doesn’t work on the other page because the .inside-right-sidebar and .inside-left-sidebar has a inline style of height: auto !important;.

    Take a look at this: https://share.getcloudapp.com/8LunnOgX

    This inline height style is preventing the inside sidebar wrappers from stretching its height to the content height meaning the sticky ad doesn’t have vertical space to move around.

    #1578056
    Jinkwon

    Hi, Elvin

    Thank you for your kind advise and the video.
    I looked at my page to edit the in-line CSS in ‘.inside-right-sidebar and .inside-left-sidebar’, however I couldn’t find the way to edit this.
    I tried to add CSS code at CSS style with !important like below,

    .inside-right-sidebar, .inside-left-sidebar { height: 100% !important }

    However it seems the in-line CSS is prior than CSS file I wrote.

    May I ask how I can edit the in-line CSS code at child-theme?

    Thank you!
    Best regards,

    #1578390
    David
    Staff
    Customer Support

    Hi there,

    the inline style of height: auto !important; is not part of the Themes CSS. This is being injected by another plugin. Generally i see this when plugins that add pop-up modals or sticky elements such as Social shares do this.

    You would need to eliminate which plugin is causing this by disabling one at a time.

    If you can’t do that then you would need to use a plugin like Sticky Anything.

    #1745862
    Jinkwon

    Hi Generatepress

    Thank you for your kind answer.
    Problem has been solved.
    I found out that Google Ads force to add ‘Height: Auto! Important’ style when the ads size is responsive. (it seems only specific size force to add it)

    I fixed this issue as I changed the ad settings to fixed size.

    https://support.google.com/adsense/answer/9183363

    I hope this might help to others.

    Thanks

    #1746267
    David
    Staff
    Customer Support

    Great to hear that – and thank you for sharing the solution!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.