Radio button and text aligned

43
August 31, 2018, at 05:40 AM

I've got a problem with the alignment of my radiobuttons and the text. The radiobutton is displaying at the right of my label, I want it under my label. Anyone have a suggestion on how to accomplish? Obviously I'm missing something... Under here I posted what i want to accomplish and ofcourse the CSS code because it's in there.

This is how it looks now:

This is what I want:

.field-imagetypetwo{display: none;} 
 
 
input[type=radio].form-check-input:focus{outline: none; box-shadow: none} 
.form-check-input:before{transition: opacity .3s ease, transform .2s cubic-bezier(1, -0.74, 0, 0.6);} 
.form-row{margin-left: -15px; margin-right: -15px} 
 
.custom-radio input {margin: 0px} 
.custom-radio {position: relative; margin: 5px; width: 18px; height: 18px; border-radius: 50%;} 
.custom-radio:after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: 1px solid #cdcdcd; background: #fff; border-radius: 50%; pointer-events: none; } 
.custom-radio-dot:before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 5px; 
    height: 5px; border-radius: 100%; background: #41206d; z-index: 1; opacity: 0} 
.custom-radio input:checked + .custom-radio-dot:before {opacity: 1; transform: translate(-50%, -50%) scale(1)} 
.custom-radio input {z-index: 2; opacity: 0;} 
 
 
 
 
 
.form-wrapper .form-group.col-sm-8{padding-right: 7.5px} 
.form-wrapper .form-group.col-sm-4{padding-left: 7.5px} 
.form-wrapper input{  vertical-align: middle} 
.form-wrapper input:not([type='radio']){height: 45px; padding-left: 10px} 
.form-wrapper input.ccm-input-date{width: 100% !important;} 
.form-wrapper .form-control:focus {box-shadow: none;border-color: #cccccc;} 
 
.form-wrapper ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
    color: #333; font-size: 14px; font-family: 'Open Sans'; font-weight: 300; 
} 
.form-wrapper ::-moz-placeholder { /* Firefox 19+ */ 
    color: #333; font-size: 14px; font-family: 'Open Sans'; font-weight: 300; 
} 
.form-wrapper :-ms-input-placeholder { /* IE 10+ */ 
    color: #333; font-size: 14px; font-family: 'Open Sans'; font-weight: 300; 
} 
.form-wrapper :-moz-placeholder { /* Firefox 18- */ 
    color: #333; font-size: 14px; font-family: 'Open Sans'; font-weight: 300; 
} 
 
 
 
.field-radios label, 
.form-wrapper label{font-weight: 300; font-family: 'Open Sans'; font-size: 14px;} 
/*.form-wrapper .field-radios label.control-label.form-check-label p{display: inline}*/ 
div.ccm-block-type-form div.form-group label.control-label {display: inline-block} 
.form-wrapper .field-radios .form-check-label{vertical-align: -2px; line-height: 1; margin-left: 5px;} 
.field-radios .form-check-label{margin-right: 20px;} 
.fields .field-imageoptionradio label{ 
    line-height: 1; 
    vertical-align: middle; 
    margin-bottom: 0px; 
    margin-left: 10px; 
    margin-right: 15px; 
} 
.field-textwithoutinput {margin:0;} 
.field-textwithoutinput h2{font-size: 50px; line-height: 1; font-weight: bold; margin-bottom: 15px;} 
.field-textwithoutinput h3, 
.field-textwithoutinput h3 span{font-size: 30px !important; line-height: 1; font-weight: 300; margin-bottom: 30px} 
.field-imageoptionradio{margin-bottom: 30px;} 
.row-checkbox .checkboxList .row{margin-bottom: 30px} 
.row-checkbox .checkbox{padding-left: 0px; margin-top: 0px; margin-bottom: 0px;} 
.row-checkbox  .form-group{margin-bottom: 0px;} 
.row-checkbox input[type="checkbox"]{height: auto; margin-top: 10px;} 
.upload-file:last-of-type{margin-bottom: 30px;} 
.fields .row .col-sm-12{padding-top: 30px;} 
.field-select select{margin: 30px 0;} 
.form-actions .btn{height: auto !important;} 
.upload-file img{display: inline;} 
.upload-file img + span{vertical-align: middle} 
.upload-file .btn-file{background: #f8f7f5; padding: 5px 20px; border-radius: 50px; font-size: 16px; color: #333333} 
.upload-file .fileinput-exists .btn-file{background: #ace192} 
.upload-file .btn-file input{height: auto} 
.upload-file .btn-file:hover, 
.upload-file .btn-file span:hover, 
.upload-file .btn-file input:hover{cursor: pointer} 
.fileinput.fileinput-exists{position: relative} 
a.close.fileinput-exists{margin-left: 20px; position: absolute; top: 50%; transform: translateY(-50%);} 
.upload-file .col-sm-4{padding-right: 0px} 
.col-md-4.col-sm-7.col-xs-7.field-imagetypeone{padding-right: 0px} 
 
.checkboxList .col-xs-10.col-sm-11{padding-left: 0px} 
@media all and (min-width: 1200px){ 
    .col-md-5.col-lg-4.col-sm-7.col-xs-7.field-imagetypeone{padding-right: 0px;} 
} 
 
@media all and (min-width: 992px) and (max-width: 1199px){ 
    .fileinput-filename{max-width: 70%} 
    .row.upload-file, 
    .fileinput-new{font-size: 12px;} 
    .upload-file .btn-file{padding: 5px 10px;} 
} 
 
@media all and (min-width: 768px) and (max-width: 991px){ 
    .col-md-7.col-lg-8.col-sm-5.col-xs-5.field.field-imagetypeone{padding-left: 0px;} 
    .row.upload-file .fileinput-filename{max-width: 120px; padding: 0 5px;} 
    .row.upload-file .btn-file {max-width: 150px; display: inline-block;padding: 7px 7px; line-height: 1;} 
    a.close.fileinput-exists{right: -30px;} 
} 
 
@media all and (max-width: 767px){ 
    .form-actions{text-align: center; margin-bottom: 40px} 
    .upload-file-img + p{font-size: 12px;} 
    .field-textwithoutinput h2{word-break: break-all; font-size: 33px;} 
    .field-textwithoutinput h3{font-size: 24px !important;} 
    .form-wrapper .form-group.col-sm-4{padding-left: 15px;} 
    .form-wrapper .form-group.col-sm-8{padding-right: 15px;} 
    .upload-file .btn-file{font-size: 12px; padding-left: 10px; padding-right: 10px} 
    .upload-file .fileinput-exists .btn-file{max-width: 87px;display: inline-block; white-space: nowrap;padding: 0 8px;} 
    .upload-file .btn-file input{height: 100%} 
    a.close.fileinput-exists{right: -25px; font-size: 18px} 
    .fields .col-md-8.col-sm-5.col-xs-5.field.field-imagetypeone{padding-left: 0px} 
} 
@media all and (max-width: 375px){ 
 
 
}

READ ALSO
Webpage loading slowly in Mozilla

Webpage loading slowly in Mozilla

I have designed a webpage which has a youtube video embeded in itIt also has one map built using polymaps js libary and several graphs using d3 framework

52
How to quickly pinpoint which CSS setting causes an issue, given before and after its state?

How to quickly pinpoint which CSS setting causes an issue, given before and after its state?

At present, I'm developing a Web Application, using Angular 5 with Material (https://materialangular

53
Overflow scroll in React

Overflow scroll in React

This is really weird issue

45
issue with CSS for mat-input and mat-form-field

issue with CSS for mat-input and mat-form-field

I tried doing a stackblitz but it doesnt accept my <mat-form-field> and <mat-label> tags without errors, I imported the needed components but it won't work

140