lapanimation Posted June 2, 2023 Posted June 2, 2023 (edited) I am having trouble specifically targeting the "mobile version" of my lightbox form. I have my site running with CUSTOM CSS for pretty much every section. I am unable to TARGET my lightbox form "mobile version", but only the actual form contents, my CSS for targeting the OPEN FORM button in "mobile version" works. I can give you my login information if needed. Hoping to resolve this, it is the last step for making my site operational basically. The problem is on the LOCATIONS page, dealing with the BEGIN QUOTE button. Hoping to have separate CSS sections to customize the OPEN FORM button and also the inner FORM contents, including the SUBMIT button. Thanks for your time in advance. It is greatly appreciated. https://www.lapanimation.com/locations password: lapanimation Edited June 2, 2023 by lapanimation
tuanphan Posted June 3, 2023 Posted June 3, 2023 Hi, Which code did you use for desktop? We can add query code for mobile Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
lapanimation Posted June 5, 2023 Author Posted June 5, 2023 I have attached screenshots, they are the beginnings of my separated areas for desktop and mobile. I have my entire websites coding in two different areas (desktop above mobile). Same code / different section for mobile. I can not figure out why I can' target the mobile form. MOBILE CODE BEGIN (SAME AS DESKTOP BUT CHANGED FONT SIZES ETC.) //LOCATIONS_ROGERS & ANDREWS_AUGUSTA_START// //locations_rogers & andrews_augusta_infopanel// section[data-section-id="64399f685682fd05e043bb9d"]{ h1 {font-family: 'WorkSans_Black'; font-size: 16px; letter-spacing: 0.001em; line-height: 1px; color: black;} h2 {font-family: 'WorkSans_Black'; font-size: 13px; letter-spacing: 0.001em; line-height: 1px; color: red;} h3 {font-family: 'WorkSans_Black'; font-size: 38px; letter-spacing: 0.001em; line-height: 50px; color: black;} h4 {font-family: 'WorkSans_Black'; font-size: 24px; letter-spacing: 0.001em; line-height: 30px; color: black;} p {font-family: 'WorkSans_Thin'; font-size: 17px; letter-spacing: -.03em; line-height: 12px; color: black;} //locations_rogers & andrews_augusta_infopanel// //_location title box_// #block-yui_3_17_2_1_1685548508079_5277{ background-color: white; box-shadow: 2px 2px 5px black;} //_location title box_// ////_LIGHTBOX FORM_//// //_form title_// .sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper .form-title { font-family: 'WorkSans_Black'!important; font-size: 50px!important; text-align: center; color: pink!important;} //_form title_// //_form border_// .sqs-modal-lightbox-content .lightbox-inner .lightbox-content { border: none; padding: 40px; border-radius: 15px;} //_form border_// //_form margins_// .form-wrapper .field-list .fields { margin: 0px 0px 0px -2%;} //_form margins_// //_close button style_// .sqs-modal-lightbox-content .lightbox-inner .lightbox-content .lightbox-close { position: absolute; color: white; background-color: black; font-family: 'WorkSans_Black'!important; font-size: 25px !important; top: 35px; right: 35px;} //_close button style_// //_field titles_// .sqs-block-form .field-list .title, .form-wrapper .field-list .title { font-family: 'WorkSans_Black' !important; font-size: 14px!important; color: black!important;} //_field titles_// //_field descriptions_// .form-wrapper .field-list .description { font-family: 'WorkSans_Bold'!important; font-size: 20px !important; color: black!important; letter-spacing: 0.001em!important;} //_field descriptions_// //_field captions_// .form-wrapper .field-list .field .caption { font-family: 'WorkSans_Bold'!important; font-size: 20px!important; color: black!important; letter-spacing: 0.001em;} //_field captions_// //_field boxes_// .form-wrapper .field-list .field .field-element { font-family: 'WorkSans_Black'!important; width: 100%; padding: 14px; margin: 6px 0px 4px; background-color: #D3D3D3!important; font-size: 3em!important; line-height: 10px; box-sizing: border-box; border-radius: 5px; color: red !important; border-left: none; border-right: none; border-top: none; border-bottom: none;} //_field boxes_// //_checkbox field list font_// .form-wrapper .field-list .field.checkbox label, .form-wrapper .field-list .field.radio label { font-family: 'WorkSans_Bold'!important; font-size: 40px!important; color: red!important;} //_checkbox field list font_// //_SELECT pull-down menu contents_// .form-wrapper .field-list .field select { font-family: 'WorkSans_Black' !important; font-size: 20px !important; padding: 10px 10px; border: none; border-bottom: none; background-color: #D3D3D3; color: black;} //_SELECT pull-down menu contents_// //_INPUT & placeholder text_// .form-wrapper .field-list .field .field-element { font-family: 'WorkSans_Bold'; font-size: 1.2rem!important; color: black!important;} //_INPUT & placeholder text_// //_FORM_title text_// .form-wrapper .field-list .section .title { font-family: 'WorkSans_Bold'!important; font-size: 20px!important; color: black!important;} //_line section title text_// //_FORM_description text_// .form-wrapper .field-list .description { font-family: 'WorkSans_Bold'!important; font-size: 20px!important; color: black!important;} //_line section description text_// //_REMOVE FOCUS-shows when clicking on a form field_// .form-wrapper .field-list .field .field-element:focus { outline: none !important; //removes default outline background-color: #D3D3D3!important;} //_REMOVE FOCUS-shows when clicking on a form field_// //_FORM_ACCESS BUTTON_STYLE_// button.lightbox-handle { width: 100%; background-color: red; font-family: 'WorkSans_Black'!important; font-size: 22px!important; color: white!important;} //_FORM_access button_STYLE// //_FORM_SUBMIT BUTTON_style_// section[data-section-id="64399f685682fd05e043bb9d"]{ .button.sqs-system-button.sqs-editable-button { color: #726b6a !important; background-color: transparent !important; border: 1px solid #726b6a !important; font-family: adobe-garamond-pro; font-weight: 600; font-style: normal; letter-spacing: 0em; text-transform: none; line-height: 1.6em;}} //_FORM_SUBMIT BUTTON_style_// //_lightbox_upload file button_// .field-list .title a { background-color: red!important; border-radius: 3px; margin-left: 10px; padding: 10px 10px; color: white; letter-spacing: 0.001em; font-size: 12px; font-family: 'WorkSans_Black';} //_lightbox_upload file button_// } //_lightbox form_// //locations_rogers & andrews_augusta_infopanel// MOBILE CODE END (SAME AS DESKTOP BUT CHANGED FONT SIZES ETC.)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment