• Resolved yezzz

    (@yezzz)


    Here’s some improvements and suggestions:

    td.wp-greet-form is width:66% which restricts width in narrow screens, and max-width:100% doesn’t help there.

    In the @media section add width:100% to td.wp-greet-form

    td.wp-greet-form {
    width:100%;
    }

    If you have a theme with large margins, like mine, you may want to remove the form padding, and optionally add some negetive side margin. Add this to the @media section:

    div.wp-greet-form {
    padding:0px;
    /* margin: 0 -10px; */
    }

    If you only want the image a little bigger, add some negative margin to the side of the image wrapper, eg. add this to the @media section:

    .wpg_image {
    margin:0 -10px;
    }

    https://wordpress.org/plugins/wp-greet/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter yezzz

    (@yezzz)

    Also, I’ve wrapped the preview and display template content in a .wp-greet-card div, allowing styling the card itself. Very useful for small screens.

    Also, the various non-breaking spaces between sender/receiver name are preventing line-wrap, thus causing the surname to wrap to next line on small screens. Just replacing them with a space works fine in Firefox, chrome and IE.

    Plugin Author tuxlog

    (@tuxlog)

    Thanks for this tutorial. I will consider it during my next responsive changes.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsive styling’ is closed to new replies.