How to increase the width of the button and setup a condition for 'Image Upload Preview” widget?

I have two questions about this form and I put the details in an attached Screenshot to better explain.

Here's the CSS I already added for the “Image Upload Preview” Widget:

.btn-upload {

display:none

}

.btn-select {

    height: 60px;

    padding: 0 30px;

    color: #6b6b6b;

    font-size: .9rem;

    border-radius: 2px;

    border: solid 1px #1c3549;

    background: #fff;

}

.progress {

    width: 100%;

    background: #d7d7d7;

    position: relative;

    display: none;

}

Here's the Main CSS I already edited for the Form:

.form-label.form-label-auto {

    display : block;

    float : none;

    text-align : center;

    width : 100%;

}

.form-required {

    color : #ffffff;

}

.form-line-error .form-error-message {

    background-color : #1D3648;

}

.form-line-error .form-error-message .form-error-arrow {

    border-bottom-color : #1D3648;

}

.form-line-error {

    background-color : #ffffff;

}

body, .form-all {

    background : none !important;

}

.form-all {

    margin-left : 100 !important;

}

.jotform-form {

    padding : 0!important;

}

.form-line-error .form-error-message {

    background-color : none;

}

.form-line-error .form-error-message .form-error-arrow {

    border-bottom-color : #ffffff;

}

.form-line-error {

    background-color : #ffffff;

}

.supernova .form-all {

    border : 0 !important;

    box-shadow : none !important;

    -moz-box-shadow : none !important;

    -webkit-box-shadow : none !important;

}

.form-line.form-line-active {

    background-color : #ffffff;

}

.form-buttons-wrapper {

}

.form-pagebreak {

    border-top : none;

}

.form-pagebreak {

    border-top : none;

    background : none;

}

#form-pagebreak-back_16 {

    display : none;

}

input#input_18_1000,  input#input_18_1000 + label {

    display : none;

}

.form-submit-button:hover {

    background : #1c3549 !important;

}

.form-submit-button:active {

    -moz-box-shadow : 0 0px #000 inset;

    -webkit-box-shadow : 0 0px #000 inset;

    box-shadow : 0 0px #000 inset;

}

.form-textbox {

    max-width : 400px;

    margin-left : 10px;

}

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    .form-all {

        width : 100%!important;

    }

    .form-textbox {

        margin-left : initial !important;

    }

    .form-all .form-submit-button {

        width : 100% !important;

    }

}

}

.form-label-top {

    display : none;

}

.form-error-message {

    color : #E5C181 !important;

    background-color : #ffffff !important;

}

#input_2 {

    letter-spacing : 4px;

}

.form-line-error .form-error-message {

    background-color : #ffffff!important;

    font-size : 13px !important;

    font-weight : 300 !important;

    color : #e5c181;

    box-shadow : none;

    padding-top : 0!important;

    padding-bottom : 20!important;

}

.form-line-error .form-error-message .form-error-arrow {

    border-bottom-color : #ffffff;

}

.form-line-error {

    background-color : #ffffff;

}

.form-line-error input:not(#coupon-input), .form-line-error select, .form-line-error textarea, .form-validation-error {

    border : 1px solid black !important;

    box-shadow : 0 0 2px transparent !important;

}

.form-button-error {

    color : #e5c181;

    font-size : 15px !important;

    font-weight : 300 !important;

    display : inline;

    text-align : left;

}

div.form-error-arrow {

    display : none;

}

.form-error-message img {

    display : none;

}

#label_13 {

    display : none;

}

#cid_22 div.qq-upload-button {

    width : 100%!important;

    height : 50px!important;

    padding : 20px 10px 0px 10px!important;

    color : #6b6b6b!important;

    font-size : 17px!important;

    border-radius : 2px!important;

    border : solid 1px #1c3549!important;

    background : #fff!important;

}

#label_20 {

    display : none;

}

#label_19 {

    display : none;

}

#label_16 {

    display : none;

}

Please try adding the following CSS code the Custom CSS section of the widget to increase the width of the button of the widget.

#pickImage {

    width: 400px;

}

Please add the following CSS code to the form to set the width of the textarea field.

#id_21 {

    width: 575px;

    margin-left: 10px;

}

It seems the Show/Hide conditions are not working with the widget. This could be due to the widget is being loaded in an iFrame. Let me check this further and get back to you if I could find any workaround in this regard.

Thanks!

Thanks. That corrected the issue on Desktop, but on Mobile both the Button
Fields and Tex Area Field now overflow the bounderies (see attached
screenshots).
Could you please help me to correct it on mobile?
Thanks!
Sam
*Sam Unruh*
Owner, Unruh Furniture
cell: 816.808.5259
...

Please try replacing the CSS code injected earlier to the custom CSS section of the widget with the following.

.button-container {

    width: 100%;

}

Additionally, please add the following CSS code to the form so that the text field shall be displayed responsive.

@media screen and (min-width: 10px) and (max-width: 540px){

    #cid_21 {

        width: 55% !important;

    }

}

It looks like that you have attached the screenshot to the reply email. Please note that the images attached to the reply email cannot be posted back to the forum post. If you need to attach the screenshot to the forum post, we request you to open this thread using the URL https://www.jotform.com/answers/1679187 and see the image below to attach the images to the post.

Thanks!

Thanks so much!
*Sam Unruh*
Owner, Unruh Furniture
cell: 816.808.5259
...

Any luck figuring out the conditional logic question?
Sam
*Sam Unruh*
Owner, Unruh Furniture
cell: 816.808.5259
...

I have checked the form again to set the condition using the Upload preview widget. However, the widget doesn't seem to be returning any value before submitting the form to work with the conditions. The condition shall be working normally with the normal file upload field.

Thanks!

Thanks for checking.
*Sam Unruh*
Owner, Unruh Furniture
cell: 816.808.5259
...