Resizing the column widths

Hi there @soberpaddy,

Thank you for using the plugin.

Depending on the complexity of the form that you’ve created, for example if it is a single row that has been defined using the plugin, you could go with something similar to:

.gfield.gfmc-column.gfmc-field:nth-child(1) {
  max-width: 25%;
}

This would allow the first column to have a width set to 25%.

You could also specify a Custom CSS Class in Gravity Forms on the particular Row Start element, such as short-row and then add the CSS (similar to that seen above):

.gfield.gfmc-column.gfmc-field.short-row {
  max-width: 25%;
}

Which would limit it to the specific row.

The above can be manipulated to flex to your requirements. More complex forms will require further alteration of the above CSS.

If you are still encountering issues, and are able to provide your form (link to existing form, or export of .json file), with supporting information regarding your specifications, then it may be possible to generate a more tailored response.

Hope that helps. ??

Kind regards.

Thank you @webholism
That has worked nicely – adjusted it to the right proportions for my needs.
Here is the page: https://staging.friendsofthekoala.org/adopt-a-koala/

I was wondering how I can update the settings for the mobile responsiveness – particularly on tablets – it seems to disable itself for phones but I cannot figure out the middle range sized devices.

Can you advise how I can do that please?

Hi @soberpaddy,

Thank you for the prompt response, and for confirmation that the CSS is working for desktop.

Would you be able to place the CSS that has been created in alignment with what was shown above, into an @media media query? Perhaps something like:

@media screen and (min-width: 600px) and (max-width: 900px) {
  .gfield.gfmc-column.gfmc-field:nth-child(1) {
    max-width: 25%;
  }
}

The values of min and max width will need to be specified according to your requirements.

Please advise if this is of any use, or if there are problems with this approach. Thank you.

Also, I looked at the link that you provided, but was not certain where Needed to look on the page, and which elements were to be modified. If you are able to provide additional clarification if you need to contact us again? Thank you.

Thank you for your detailed attention on this @webholism
Unfortunately I could not get that to work properly.

I am using the form on the second row down – using image choices to allow customers to select a koala.

It looks fine on desktop and mobile phones, but on tablet it looks very skewed.
Any suggestions would be appreciated!

Cheers!

Hi @soberpaddy,

Thanks for the response. I realise that the CSS provided previously was incorrect, but on investigation of the adoption row that you highlight, that some additional alteration may be necessary.

Would it be possible for you to provide a JSON export of the form (https://docs.gravityforms.com/exporting-a-form-from-gravity-forms/) to [email protected]?

Thank you for your time and assistance in this matter.

Hi @soberpaddy,

I have been dong some additional investigation on some local simple form designs, and I wonder if you could try the following on your end, and provide feedback on the outcome?

@media screen and (max-width: 1024px) {
  .post-11160 .gfmc-container {
    align-items: stretch !important;
    flex-direction: column !important;
    justify-content: space-around !important;
  }
}
@media screen and (min-width: 1025px) { 
  .post-11160 .gfield.gfmc-column.gfmc-field:nth-child(2) {
  max-width: 23%;
  padding: 0px 10px;
  }
}

This would replace the previous code that was inserted.

Thank you for your time and hope to receive a response at your earliest convenience.

Kind regards.

• This reply was modified 1 year, 10 months ago by WebHolism.