issue with spacing after using grid columns css

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/

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

Hi there,

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

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

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%;
}

thanks! that worked awesome. appreciate it.

You're welcome :)

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!

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.

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. :)

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

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.

ok thanks ive posted on CF7 support will see

thanks
John

ok thanks ive posted on CF7 support will see

No problem. :)