resizing radio images changed the rest

  • Resolved hollaceday

    (@hollaceday)


    1 year, 5 months ago

    I’ve been trying to switch to Forminator after the current plugin I use doesn’t have all the things I need. Now I require, just on this form, that the images show up exactly as it is right now. I have used a code I’ve found on a different topic and edited it to my liking.

    .forminator-field .forminator-radio {width:260px !important; height:290px !important;}
.forminator-field .forminator-radio .forminator-radio-image {width:260px !important; height:260px !important;}
.forminator-field .forminator-radio .forminator-radio-image span {width:250px !important; height:250px !important;}
 .forminator-field .forminator-radio .forminator-radio-label {margin-top:180px !important;}
.forminator-field .forminator-radio .forminator-radio-bullet {margin-top:180px !important;}

.forminator-field .forminator-checkbox {width:260px !important; height:280px !important;}
.forminator-field .forminator-checkbox .forminator-checkbox-image {width:260px !important; height:260px !important;}
.forminator-field .forminator-checkbox .forminator-checkbox-image span {width:250px !important; height:250px !important;}
.forminator-field .forminator-checkbox .forminator-checkbox-label {margin-top:200px !important;}
.forminator-field .forminator-checkbox .forminator-checkbox-box {margin-top:200px !important;}

    Only issue is that when you scroll down to ‘anything additional,,,’, you can see that it has effected the other radios/checkboxes. I sadly have no idea how to fix this as I’m not code savvy.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Williams – WPMU DEV Support

    (@wpmudev-support8)

    Hi @hollaceday

    I hope you’re well today!

    So you only want this code to affect images for “Pick which style & size you’d like”, right?

    To do so, simply add radio field ID to each of your CSS lines. This particular radio choice is radio-1 so do it like that

    #radio-1 .forminator-field .forminator-radio {width:260px !important; height:290px !important;}
#radio-1 .forminator-field .forminator-radio .forminator-radio-image {width:260px !important; height:260px !important;}
#radio-1 .forminator-field .forminator-radio .forminator-radio-image span {width:250px !important; height:250px !important;}
#radio-1  .forminator-field .forminator-radio .forminator-radio-label {margin-top:180px !important;}
#radio-1 .forminator-field .forminator-radio .forminator-radio-bullet {margin-top:180px !important;}

    You may need to clear cache on site (if there is any) but it should work out of the box.

    Note also: since you are using images with radio buttons but not with checkboxes, you do not really need those lines

    .forminator-field .forminator-checkbox {width:260px !important; height:280px !important;}
.forminator-field .forminator-checkbox .forminator-checkbox-image {width:260px !important; height:260px !important;}
.forminator-field .forminator-checkbox .forminator-checkbox-image span {width:250px !important; height:250px !important;}
.forminator-field .forminator-checkbox .forminator-checkbox-label {margin-top:200px !important;}
.forminator-field .forminator-checkbox .forminator-checkbox-box {margin-top:200px !important;}

    Best regards,
    Adam

    Thread Starter hollaceday

    (@hollaceday)

    hi @wpmudev-support8

    this has worked wonders! Thank you very much

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘resizing radio images changed the rest’ is closed to new replies.