Styling Account Registration with Custom profile fields

[Macarius]

@vapvarun, @zarko, I have added some extra fields to my Registration page and it now looks very very long. I need to display the Profile Details besides the Account Details to avoid scrolling. I tried the following CSS but had no luck.
#buddypress .standard-form #basic-details-section, #buddypress .standard-form #blog-details-section, #buddypress .standard-form #profile-details-section, #buddypress .standard-form .security-question-section{
width:20%; float:left;}

#register-page .register-section, #register-page .security-question-section{
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
//* clear: both;*/
float: left !important;
font-weight: 400;
margin: 0 auto 25px !important;
/*max-width: 400px;*/
padding: 24px;
text-align: left;
width: 40% !important;
}

Please see image attached to understand how long my Registration page has become and the need to display them besides each other.

Thanks

[Anonymous]

Hi @donmacarius, It looks fine at our end please provide your website link to provide you exact css code to remove the extra box layout in each section.

Regards

[Macarius]

Hi @pallavi, please see my site: http://africantailor.myfashionafrica.com/register/

[Anonymous]

Hi @donmacarius, Please try this css code:

div#register-page #basic-details-section input {
    height: 30px !important;
    margin-bottom: 20px !important;
}
div#register-page .register-section, div#register-page .security-question-section {
    padding: 10px 15px !important;
}

Regards

[Macarius]

Hi @pallavi, Thanks for the help but that didn’t solve my problem. Please see the image attached. I want to display them besides each other so the user doesn’t have to scroll.

See image attached.

[Anonymous]

Hi @donmacarius, Okay we will provide you correspond css to make the box in same line..as it is custom work therefore, will take little time…

I will get back to you in next 24hours..

Regards

[Anonymous]

Hi @donmacarius, Please add this css code:

@media screen and (min-width:767px){
#register-page #basic-details-section, div#register-page #profile-details-section.register-section, #buddypress #register-page .security-question-section {
  clear: none !important;
  float: left !important;
  margin-right: 2% !important;
  width: 32% !important;
}
}

Regards