Jump to content

I am having trouble targeting my lightbox form contents for "mobile version". PASSWORD: lapanimation

Recommended Posts

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 by lapanimation
Link to comment
  • Replies 3
  • Views 326
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.)

LPN_Website Screenshot_mobile viewng of form.png

LPN_Website Screenshot_Desktop start.jpg

LPN_Website Screenshot_Desktop viewing of form.jpg

LPN_Website Screenshot_mobile start.jpg

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.