Keep the 2-column layout even from mobile view

[joe09]

Hi,

I’m customizing my contact form using the column layout I found in a topic at this url Layout guides.
Am I looking at the right source?
Is the grid layout managed with these CSS classes?

I would like the last 2 fields (acceptance and Submit) to stay on 2 columns in the mobile view, as in the desktop view, instead they both occupy a single column.
How can I do?

Here my code

<div class="x-column x-sm x-1-3">
	<label> Nome
    [text* your-name] </label>
</div>
<div class="x-column x-sm x-1-3">
	<label> Telefono
    [tel* telephone class:form-tel] </label>
</div>
<div class="x-column x-sm x-1-3 last">
	<label> Email
    [email* your-email] </label>
</div>

<label> Messaggio
    [textarea your-message] </label>

<hr class="x-clear">

<div class="x-column x-sm x-1-2">
	[acceptance accept-this-1] Autorizzo Privacy [/acceptance]
</div>
<div class="x-column x-sm x-1-2 last">
[submit "Submit"]
</div>

Thank you

[ruenel]

Hello Guiseppe,

Thanks for posting in!

You will need to remove the x-sm class so that the columns will be preserve even on smaller screen sizes. It would also best if you wrap your columns with the container element. Hence, your final code might look like this:

<div class="x-container">
    <div class="x-column x-1-3">
        <label> Nome
        [text* your-name] </label>
    </div>
    <div class="x-column x-1-3">
        <label> Telefono
        [tel* telephone class:form-tel] </label>
    </div>
    <div class="x-column x-1-3 last">
        <label> Email
        [email* your-email] </label>
    </div>
</div>
<div class="x-container">
    <label> Messaggio
        [textarea your-message] </label>

    <hr class="x-clear">
</div>

<div class="x-container">
    <div class="x-column x-1-2">
        [acceptance accept-this-1] Autorizzo Privacy [/acceptance]
    </div>
    <div class="x-column x-1-2 last">
        [submit "Submit"]
    </div>
</div>

Kindly let us know how it goes.

[joe09]

Thank you Ruenel!

[tristup]

Hi Guiseppe,

Glad that we are able to help you.

Thanks