[Resolved] issue with spacing after using grid columns css

Home Forums Support [Resolved] issue with spacing after using grid columns css

Home Forums Support issue with spacing after using grid columns css

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1381004
    John MacKenzie

    so ive used the code from here to create a css table in a contact form 7 form.
    https://docs.generatepress.com/article/creating-columns/

    the problem is now that any spaces or br lines I try yo add after the grid doesnt seem to work.
    Also the text i have below the grid will depending on browser width end up beside one of the columns if the screen is not wide enough… how can i solve these issues?

    Thanks!

    John

    #1381123
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Your <br/> tags do exist (right-click + Inspect the page to see them). However, you’re better off using CSS margin-bottom to create gaps.

    The other issue is likely because that method of creating columns uses floats, which need to be clear. That article will likely be removed soon as GeneratePress moves towards using flexbox instead of floats.

    Perhaps a plugin like this would be useful?: https://wordpress.org/plugins/cf7-grid-layout/

    #1381148
    John MacKenzie

    hi tom

    i started with that but it takes over the whole form and it has be done in their silly layout way, and i found it very cumbersome to work with. can i simply clear the floats in my next div tag somehow? ill try margin bottom too

    can i do it with flexbox instead?

    thanks

    #1381450
    David
    Staff
    Customer Support

    Hi there,

    what is the layout you’re after ? Might be doable with flex.

    #1381770
    John MacKenzie

    thanks i just need the 3 column box across and not have the text below it bump up against it if i resize the window down causing one column to be on another line if that makes sense? when that happens the text from below it prints off to the right of the column.

    thanks!!

    J

    #1382283
    Tom
    Lead Developer
    Lead Developer

    Flex is pretty easy:

    <div class="flex-container">
        <div class="inner-box">
            ...
        </div>
    
        <div class="inner-box">
            ...
        </div>
    
        <div class="inner-box">
            ...
        </div>
    </div>

    Then the CSS:

    .flex-container {
        display: flex;
    }
    
    .inner-box {
        width: 33.333%;
    }
    #1382369
    John MacKenzie

    thanks! that worked awesome. appreciate it.

    #1383206
    Tom
    Lead Developer
    Lead Developer

    You’re welcome 🙂

    #1619174
    John MacKenzie

    just wanted to open this up again as for some reason the contact form fields i have in the flex box do not appear anymore??

    any ideas?

    thanks!

    #1619213
    John MacKenzie

    so actually it appears that the watermark or placeholder text of contact form 7 is causing the whole field to disappear! any ideas how to get a watermark in the fields and not have them disappear?

    tried using watermark or placeholder in the CF7 settings. just in case you have come across this as i know its not your issue as i tried with twenty twenty and same thing.

    #1619240
    Elvin
    Staff
    Customer Support

    Hi,

    I’m not exactly sure I understand what you mean.

    Can you specify which part of the form field isn’t appearing? Nothing seems wrong on my end as shown here:
    https://share.getcloudapp.com/qGulmZOo

    tried using watermark or placeholder in the CF7 settings. just in case you have come across this as i know its not your issue as i tried with twenty twenty and same thing.

    It’s always best to contact the plugin developer if you encounter issues with their plugins. 🙂

    #1619329
    John MacKenzie

    Sorry where you see the grid of 3 columns with one field under it there are actually 4 fields under each of those headings. They are set with watermark and don’t show up. The one that does show i removed the watermark. Thanks. J

    #1619384
    Elvin
    Staff
    Customer Support

    Sorry where you see the grid of 3 columns with one field under it there are actually 4 fields under each of those headings. They are set with watermark and don’t show up. The one that does show i removed the watermark. Thanks. J

    This is definitely a plugin issue as there’s no element being rendered when I’ve checked the page source.

    You’ll have to search for a plugin that can work with what you’re trying to do, unfortunately.

    #1619419
    John MacKenzie

    ok thanks ive posted on CF7 support will see

    thanks
    John

    #1619422
    Elvin
    Staff
    Customer Support

    ok thanks ive posted on CF7 support will see

    No problem. 🙂

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