Support » Plugin: Contact Form 7 Style » contact form not responsive

  • jms1017

    (@jms1017)


    I want the form to occupy 2 columns for wide screens and a single column for mobile screens, so I used CSS grids to style the form. However the form is broken on mobile, all the fields get smashed together. I added a media query
    @media (max-width: 767px) {
    .wpcf7-form.cf7-style {
    width: 100%!important;
    }
    }
    specifically, the entire form is wrapped in <div class=”grid-cont”> and then the left column is further wrapped in <div class=”grid-item-1″> and the right column wrapped in <div class=”grid-item-2″>
    The CSS is as follows:
    div.grid-cont {display: grid;
    grid-template-columns: 48% 48%;
    grid-template-rows: auto;
    grid-column-gap: 15px;
    margin-top: 20px;}

    div.grid-item-1 { grid-column: auto;
    grid-row: auto;
    }
    div.grid-item-2 { grid-column: auto;
    grid-row: auto;
    }

    Any help / suggestions on how to make the form 2 columns for desktop and single column for mobile?

    On older websites, I have used “floats” to make 2 columns responsive, but I hate to think that I need to revert to this older method….
    Thanks!

    The page I need help with: [log in to see the link]

  • You must be logged in to reply to this topic.