Stacking columns including form on mobile

  • Unknown's avatar
    donyapress · Member ·

    Hi,

    I have created two columns on the Get in Touch page of my blog using theme Maisha, one of the columns being made up of the Contact Form 7 plugin.
    The theme and plugin are responsive but I would like
    to stack the columns so the form rows don’t break on a mobile device.

    Would anyone know how to do that?

    Thank you

    <div style="width:40%;padding:0 10pt 0 0;float:left;">
<p style="text-align:center;">  <strong>Have a project?</strong></p>
<p style="text-align:left;">You can easily get in touch with us by email, phone or Skype, any day of the week.</p>
<p style="text-align:left;">If you are looking for a quote, let us know what your word count is, where applicable, and when it is due for by using this form or by emailing us your document, and we will get back to you swiftly.</p>
<p style="text-align:left;">We look forward to hearing from you.</p>
<p style="text-align:left;"><img class="alignnone wp-image-582 size-medium" src="https://akrosstranslations.files.wordpress.com/2015/12/full-script-signature6.png?w=300" alt="" width="300" height="74" /></p>
<p style="text-align:left;"></p>

</div>
<div style="width:40%;padding:0 10pt 0 0;float:right;">
<p style="text-align:center;"><strong>Tell us about it</strong></p>
[contact-form][contact-field label='Name' type='name' required='1'/][contact-field label='Company' type='text'/][contact-field label='Email' type='email' required='1'/][contact-field label='Subject' type='text' required='1'/][contact-field label='Message' type='textarea'/][/contact-form]
<p style="text-align:center;"></p>

</div>

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, you mention the Contact Form 7 plugin, which we cannot use here at WordPress.com, This would lead me to believe you are talking about a self-hosted installation of WordPress. For self-hosted WordPress sites using Maisha, post in the WordPress.org Themes and Templates forum and tag your topic with wpcom-theme.

    For general questions on self-hosted WordPress.org installations, visit http://wordpress.org/support/.

    The differences between WordPress.com and WordPress.org.

    In general, you would want to assign a CSS class to each of the divs and remove any inline styling you have done. You would then create CSS rules for the general styling and then also create Media Queries to make the width of each of the divs go to 100% at whatever width you desire. This would be a general simplified example. I worked off the WordPress.com site you referenced.

    In the page: 

    <div class="col-left">...</div>
<div class="col-right">...</div>

    In the CSS: 

    .col-left {
float: left;
width: 40%;
padding: 0 10pt 0 0;
}
.col-right {
float: right;
width: 40%;
padding: 0 10pt 0 0;
}

    Then this would be the media query to take things to one column (I arbitrarily chose 1024px). 

    @media screen and (max-width: 1024px) {
.col-left, .col-right {
float: none;
width: 100%;
padding: 0;
}
}
  • Unknown's avatar
    donyapress · Member ·

    Perfect, thanks ever so much for your precious help, once again, thesacredpath. What I meant is that Maisha says they use the Contact Form 7 plugin for their theme on their demo site.

  • Unknown's avatar
    thesacredpath · Member ·

    Ah, yes they do on the self-hosted version of Maisha. We have our own contact form that we built in-house that we use on all of our themes here.

    Glad that worked for you.

  • The topic ‘Stacking columns including form on mobile’ is closed to new replies.