Weird effect when window (or screen) is small

  • Unknown's avatar
    gctwnl · Member ·

    I’m using Forefront

    I have stable in my front page. When my front page is getting narrow, I suddenly get a visible table border that I really did not ask for.

    Is there CSS code that enables me to turn that effect off? No border, whatever the width?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    krutidugade · Member ·

    Hi there,

    I visited your site ‘rnaea.wordpress.com’ and realised it uses theme Fortune and not Forefront as you mentioned.
    If you wish to remove the border appearing between recent posts then add the CSS code snippet below : 

    .site-content .grid-wrapper .recent-post, .grid-wrapper .grid-sep {
border: none;
}

    To enable CSS Customiser you need to buy either of Premium or Business upgrade plan. Only these 2 plans offer Advanced Design Customisation feature.
    Read more about Custom CSS here:
    https://en.support.wordpress.com/custom-css/

    Let me know if you need further help!

  • Unknown's avatar
    gctwnl · Member ·

    I have Premium.

    But I wasn’t after the border between recent posts. This is in the main text body of the front page (home page). If you make that narrow, a full border appears around both buttons. That border is not the same as the border between recent posts.

    Not, you only see that border around the buttons appear if you make the page small.

  • Unknown's avatar
    gctwnl · Member ·

    Sorry, mistake, Fortune indeed. I’ve been looking at so many themes to find what I need that I lost track of the names.

  • Unknown's avatar
    siobhyb · Member ·

    Thanks for clarifying! I can see that border is being added to the table’s surrounding div tag, and you can use the following custom CSS to remove it:

    .table-responsive {
    border: none;
}
  • Unknown's avatar
    gctwnl · Member ·

    Thank you. Now this Custom CSS sets this for the entire site. I would like to keep the default behaviour for all tables but this one (as it is a special case). What I tried before was adding style="border:none" to all the elements (div, table, etc) of the html but it did not help. Why did that not work?

  • Unknown's avatar
    siobhyb · Member ·

    The theme automatically generates a surrounding div around your table in order to make it responsive to different devices. Although you can’t edit this automatically generated HTML in your page’s editor, you could target your home page using the .home class.

    The following CSS would hide the border around the table only on your home page:

    .home .table-responsive {
    border: none;
}

    In general, we recommend using custom CSS over inline styles as it’s easier to maintain and change in the future. You could remove the style=”border:none” from your editor, and instead add the following custom CSS to hide the borders from all tables on your home page:

    .home .table>tbody>tr>td {
    border: none;
}
  • The topic ‘Weird effect when window (or screen) is small’ is closed to new replies.