-
petrgoncharuk3Asked on February 21, 2021 at 5:40 PM
Hi! I want to keep desktop view on the mobile devices. And i really don't know how to make it with css. Can you please help me? Because I tried everything and need it to be done in 12 hours :)))
Sending you screenshots. Here is normal pc view (I want to make it exactly the same on mobile, sizes of icons and text can be reduced if needed).Current view on mobile...:
I think you see the difference. Also I wanted to say that there is weird space on the right from image in mobile view. And maybe that is the reason why I can't place the elements like in pc view.
P.S. Please, Save me!!! :)))) -
Jessica JotForm SupportReplied on February 22, 2021 at 12:52 AM
Hi petrgoncharuk3, thank you for reaching us.
The white space beside image is due to the code under @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape).
To clarify, would you like only the product list to display similar to Desktop view, or would you like to apply the desktop view to all your field within your form? Kindly noted that your form is optimized for all screen sizes. The form will not fit properly if it retains the desktop view.
We will wait for your updated response.
-
petrgoncharuk3Replied on February 22, 2021 at 4:36 AM
Hi! It is needed for product list.
-
Richie JotForm SupportReplied on February 22, 2021 at 5:08 AM
You may try this custom CSS
@media screen and (max-width: 480px){
.form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui.show_image .p_image {
float: left;
width: 150px !important;
}
.form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui .form-product-container .form-product-name {
margin-left: -50px !important;
}
}
Screenshot:
Guide:https://www.jotform.com/help/117-how-to-inject-custom-css-codes
Let us know if this fits your requirements.
-
petrgoncharuk3Replied on February 22, 2021 at 6:18 AM
Thanks! But is there any possibility to make the structure exactly like on pc view (sizes can be reduced).
-
Bojan Support Team LeadReplied on February 22, 2021 at 6:51 AM
Greetings.
Please allow me some time to find the solution for you.
As soon as I have more information, I'll get back to you.
Thank you for your patience.
-
Bojan Support Team LeadReplied on February 22, 2021 at 7:15 AM
Please try to add the following CSS to your form:
@media screen and (max-width: 480px) {
.form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui {
border: none;
}
.form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui .p_col {
position: inherit;
}
.form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui .p_col {
position: inherit;
display: block;
width: 35px;
display: block;
float: left;
}
.form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui.show_image .p_image {
max-width: 72px;
max-height: 72px;
min-width: 80px;
display: block;
margin: 0;
float: left;
padding-left: 0;
}
.form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui.show_image .image_area {
min-height: 72px;
max-width: 72px;
}
.form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.show_image .p_checkbox {
margin-top: 22px;
}
.form-line[data-payment="true"] .p_item_separator {
border-top-width: 1px !important;
border-top-style: dashed !important;
opacity: 0.8 !important;
margin: 2px 0px 2px 37px !important;
display: block !important;
width: 100% !important;
}
}
It should result in the following:
Let us know if this solution works for you.
-
petrgoncharuk3Replied on February 22, 2021 at 11:58 AM
Hi! Thank for your help! It is much better now! The final step I need is to reduce padding between sub-label of options and options containers and to put everything on one hight.
I mean that structure-
Image title and price
Image options
It is about that i need image centered with that elements on the right.
Something like this. I think I will be able to enlarge the image to fit perfectly. And can you please tell me how to delete the sub-label of options? -
Bojan Support Team LeadReplied on February 22, 2021 at 1:31 PM
Greetings.
Please allow me some time to provide you with a code. As soon as I have more information, I'll get back to you.
Thank you for your patience.
-
petrgoncharuk3Replied on February 23, 2021 at 11:04 AM
Hi, Bojan! Do you have any updates?
-
Bojan Support Team LeadReplied on February 23, 2021 at 12:19 PM
Greetings.
I apologize for the delay.
Please try to use the following CSS instead of the previous one:
@media screen and (max-width: 480px) {
.form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui {
border: none;
}
.form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui .p_col {
position: inherit;
}
.form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui .p_col {
position: inherit;
display: block;
width: 35px;
display: block;
float: left;
}
.form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui.show_image .p_image {
max-width: 72px;
max-height: 72px;
min-width: 80px;
display: block;
margin: 0;
float: left;
padding-left: 0;
}
.form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui.show_image .image_area {
min-height: 72px;
max-width: 72px;
}
.form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.show_image .p_checkbox {
margin-top: 22px;
}
.form-line[data-payment="true"] .p_item_separator {
border-top-width: 1px !important;
border-top-style: dashed !important;
opacity: 0.8 !important;
margin: 2px 0px 2px 37px !important;
display: block !important;
width: 100% !important;
}
.form-product-description {
display: none !important;
}
.form-product-container span:first-child {
display: inline !important;
}
.title_description {
float: left !important;
margin-right: 10px !important;
margin-top: 4px;
}
}
Let us know if any additional modifications are needed.