Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Columns not displaying correctly

ColumnContact form
    • 7 years, 9 months ago tfussell1
      Participant

      Expired

      I have created a contact page with a row set with 2/3 + 1/3 columns. The content in the 1/3 side is appearing under the 2/3 side. https://globimus.com/clearpathalerts/contact-us/

      Cant figure out why. ??

      In fact, this page is nearly identical to another I’ve built using Tower and their is no problem. Strange. https://clearpathglobal.com/connect/

      Thanks for your help.

    • 7 years, 9 months ago Mirela
      Participant

      Hello,

      The page is under construction mode so i can not check it’s code, however, please try adding this custom css in the page’s custom code box (gear icon on top-right corner):

      .vc_col-sm-8 {
          width: 65% !important;
      }

      Let us know how it goes.

      Best regards!

    • 7 years, 9 months ago tfussell1
      Participant

      Expired

      This reply has been marked as private.
    • 7 years, 9 months ago Mirela
      Participant

      Hello,

      The contact form is itself inside a row. This gives it tha css class of an full width column. See screenshot: https://postimg.org/image/7yxn9onua3/

      So instead of putting all elements inside an inner row in the first column, just add them all in the column. Remove the inner row.
      Screenshot: https://postimg.org/image/8f9xbe3isr/
      So that the column’s css classes can take effect.

      Best regards!

    • 7 years, 9 months ago tfussell1
      Participant

      Expired

      I followed your instructions, but nothing changed and is still unresolved.

      When I remove the contact form, the layout behaves as it should, but once I re-add it everything is removed from the right column and ends up under the left column. Weird, especially since I have a nearly exact same set up here without issue: https://clearpathglobal.com/connect/

      • This reply was modified 7 years, 9 months ago by tfussell1.
    • 7 years, 8 months ago Mirela
      Participant

      Hello,

      I can see what you mean. It’s indeed strange. The second column is set inside the first one when the contact form is entered. So reducing the 2/3 column width, will not result in more space for the 1/3 column. Like it should be normally.
      I can’t tell for sure why is this happening,(most probably a css conflict from the additional plugins) but i managed to set up a work around page for you. Please check here: https://globimus.com/clearpathalerts/contact-test/
      Let us know.

      Best regards!

    • 7 years, 8 months ago tfussell1
      Participant

      Expired

      Great fix, thank you so much!

    • 7 years, 7 months ago tfussell1
      Participant

      Expired

      The fix still works great for desktop, but now that I’m (mostly) done with the site and it’s live, I’m noticing weird things on the mobile version.

      The list items that are on the right side of the page on desktop are running under the contact form in mobile. How can I get the contact form to b under them entirely on mobile?conclearpathalerts.com/contact

      Thanks

    • 7 years, 7 months ago Mirela
      Participant

      Hello,

      From the page you pasted, i don’t see such aligning. The right elements are shown before the contact form. But there is a margin that mixes the two together. You can avoid it by adding this custom css:

      @media (max-width: 840px){
      div.wpcf7 {
          margin-top: -110px !important;
      }}

      Result screenshot: https://postimg.org/image/986rhg6lqz/
      Let us know.

      Best regards!

    • 7 years, 7 months ago tfussell1
      Participant

      Expired

      Your screenshot looks great, but I can’t get mine to look like that. I added the code you provided, but am still having the same problem.

      See image here: https://clearpathalerts.com/wp-content/uploads/2017/11/IMG_5315.png

    • 7 years, 7 months ago Mirela
      Participant

      Hello,

      Do you perhaps have any cache plugin installed? Please flush site’s cache and server’s cache first. if you still can not see the changes, send us some valid wp credentials in a private reply. So we can give it a closer look.

      Best regards!

    • 7 years, 7 months ago tfussell1
      Participant

      Expired

      I put the code you provided in the page’s custom CSS area and it’s working great now. Thank you so much!

Viewing 11 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password