lapanimation
Member-
Posts
15 -
Joined
-
Last visited
lapanimation's Achievements
-
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.)
-
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
-
Yes. I am under the impression that I need to write a source code line, as the screenshot below shows for my custom font files. I am wanting the source code for custom images, so I can use textures as backgrounds or gifs in certain areas due to size changes. Hopefully this makes sense. Sorry for the late response. @font-face {font-family: 'WorkSans_Black'; src: url('https://static1.squarespace.com/static/6324b1c9fb6a995e4f496a1d/t/63a269ab3c6d585a59b3b80a/1671588267330/WorkSans_Black.ttf');} *that is my source code setup for fonts* / What is the image version?
-
I apologize for the late response. www.lapanimation.com / password: lapanimation I am using numerous gifs for my website, and have been unable to use the CUSTOM CSS coded method vs. using the fluid engine upload. It may be that one is not better than the other. But I would like to be able to put in different size/layout GIFS for mobile & desktop if possible. I am looking for best result if there is anything other than making sure you file size is not to large. Thanks for your time.
-
lapanimation reacted to a post in a topic: trying to equally separate my logo / navigation links / social buttons & center those items as a whole
-
Ziggy reacted to a post in a topic: trying to equally separate my logo / navigation links / social buttons & center those items as a whole
-
lapanimation reacted to a post in a topic: trying to equally separate my logo / navigation links / social buttons & center those items as a whole
-
I've been able to go in multiple times and try to piece together code from other peoples examples of code for getting the navigation bar on one line. But there is always a small issue in spacing. .header-actions.header-actions--right { width: 10%; } /* Nav one line */ .header-title-nav-wrapper { flex: 1 0 90%; } .header-layout-nav-center .header-nav { width: 100% !important; flex: 1 1 100%; } This was the last code I attempted.
-
lapanimation reacted to a post in a topic: trying to equally separate my logo / navigation links / social buttons & center those items as a whole