Table disappearing under sidebar

Hi there,

On my Wiki page, I have a table that disappears under the sidebar as the browser window shrinks. Is there anyway to stop that?

http://www.euresearchwiki.org/wiki/research/uk-budget-contributions-to-the-eu

Thanks!

Oliver

  • Adam Czajczyk
    • Support Gorilla

    Hey Olivier,

    I hope you’re having a nice day!

    This happens because the table width is set to 768 pixels. You should be easily able to fix this and make the table responsive by using this CSS rule:

    .incsub_wiki_content table {width:100%!important;}

    As editing theme’s files directly isn’t a recommended way of doing this, you may want to use this free plugin:

    https://wordpress.org/plugins/simple-custom-css/

    The plugin lets you add your own custom CSS rules to your site.

    I hope that helps!

    Cheers,

    Adam

  • Oliver
    • Design Lord, Child of Thor

    Ah, some progress! I have adjusted the table via the 'text' editor and set the table to 100%. The problem is now slightly better – but there is still some overlap.

    At a certain point (~1040px) the sidebar suddenly 'leaps' over the content then at ~971px it disappears under the content. Is there a way to make the sidebar go underneath at 1040px? That would resolve these problems easily…

  • Adam Czajczyk
    • Support Gorilla

    Hey Olivier,

    I’m glad that you’ve managed to solve this!

    As for why it didn’t work at first. I’ve checked your site’s code once again and I’m pretty sure that this is because of “hard-coded” table width. If you’d remove the table width completely via text editor, the CSS code should work. However, there’s no need to do this now as it’s working :slight_smile:

    As for sidebar overlapping. I’ve found that this is because for screen resolutions lower than 1069px there’s a margin added to sidebar. Just add the code below through the Simple Custom CSS plugin and it should remove this margin therefore making entire table visible.

    @media (max-width:1069px) {

    .widget-area {margin-right:0px!important;}

    }

    Cheers,

    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hey Olivier,

    Thanks for the information!

    Please take a look at your child theme’s style.css file. You should fine a few media queries there starting with something like this:

    @media (max-width: 1599px) {

    You may want to try adding this line to each of them and see if it helps:

    .widget-area {margin-right:0px!important;}

    This is because “media queries” is a way to recognize the current screen resolution of the device. The CSS is altered on this basis. It’s possible that one of that some of them are “overlapping” therefore affecting this particular resolution.

    Let me know please how it went!

    Cheers,

    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hey Olivier,

    Let me get back to the original issue for a moment, would you mind?

    I’ve just checked your site with various screen resolutions using Chrome and Firefox browsers and it seems to be working quite fine for me: no “overlapping” whatsoever. This leads me to a question: do you check it under some specific browser/OS configuration or a specific device that could behave differently?

    Please advise!

    Cheers,

    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.