CSS Full Width Responsive Form

  • Resolved yanike

    (@yanike)


    3 years, 7 months ago

    Here’s the CSS for making your forms full width responsive.

    @pluginCreator, I think the structure needs to be redone to be following:
    cf7b-section
    – cf7b-row
    — cf7b-col

    .cf7b-section {
	display: flex;
  flex-direction: column;
	align-content: stretch;
	width: 100%;
	flex-wrap: nowrap;
}

.cf7b-col {
	display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.cf7b-row {
	flex: auto;
  padding: 0 4px;
}

@media screen and (max-width: 767px) {
  .cf7b-row  {
    flex: 100%;
    max-width: 100%;
  }
}
    • This topic was modified 3 years, 7 months ago by yanike.
    • This topic was modified 3 years, 7 months ago by yanike.
    • This topic was modified 3 years, 7 months ago by yanike.
Viewing 4 replies - 1 through 4 (of 4 total)

  • Dear @yanike,

    Thank you for interests of our plugin, we will inform our developers team about your comment.

    Sincerely,

    Dear @yanike,

    Thanks for your comment, but we’ll keep our structure for now and discuss this case again if our structure gets in the way of the form styles.

    Sincerely,

    How to Create 2 col in PC and 1 col in Mobile? If I use the above code, there is 1 column on both phone and PC

    Update: I got it done

    • This reply was modified 3 years, 5 months ago by thehinhcom.

    Dear @yanike,

    Thanks for your comment, we have added a new task to make the form responsive to different screen sizes, it will be included in our future updates.

    Sincerely,
    Webconstruct team

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS Full Width Responsive Form’ is closed to new replies.