Ecommerce Shopify WordPress Discussion

Mobile responsive column on contact form 7

I'm new here. I have a problem with a form I made, I needed it to wrap the field one below the other in the cell phone version, but they are next to each other, how do I make this happen? Picture of the form This is the website I'm editing: https://netcredbrasil.com.br/pre-cadastro-de-parceria/ I tried using break inside in css, but it didn't work
You have not included source code in your question, so I can’t provide an answer for your specific situation (unless you edit your question to improve it). But I can give a general answer which illustrates how I solve this problem in my own work. A new CF7 form, by default, contains a name field and an email field. The relevant part of the default source code looks like this: <label> Your name [text* your-name autocomplete:name] </label> <label> Your email [email* your-email autocomplete:email] </label> ... To make this pair of fields responsive, so that they display beside each other on wide screens and stack vertically on narrow screens, start by adding a wrapper element around them: <div class="two-col-responsive"> <label> Your name [text* your-name autocomplete:name] </label> <label> Your email [email* your-email autocomplete:email] </label> </div> ... Then style the wrapper as a grid and use media queries to vary the number of columns. .two-col-responsive { display: grid; grid-template-columns: auto; /* one column */ gap: 0 5vw; } @media (min-width: 500px) { .two-col-responsive { grid-template-columns: 1fr 1fr; /* two columns */ } }

February 4, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.