Jump to content

AFZ

Circle Member
  • Posts

    25
  • Joined

  • Last visited

Everything posted by AFZ

  1. As always, you're a lifesaver, @tuanphan! I really appreciate your assistance again, thank you ❤️
  2. My website is www.zarinaaston.com and my issue is in the footer section. Since Squarespace still doesn't natively support Mailerlite, I'm having to use embedded forms for my newsletter sign up. When I'm in the editor, the spacing of everything looks fine: But when it's on the published desktop website, the spacing is all wonky: The code I'm using for the embedded form is supplied by Mailerlite. I'd love to know how to customize it or fix this annoying spacing issue in Squarespace. Here's the Mailerlite code: <style type="text/css">@import url("https://assets.mlcdn.com/fonts.css?version=1707735");</style> <style type="text/css"> /* LOADER */ .ml-form-embedSubmitLoad { display: inline-block; width: 20px; height: 20px; } .g-recaptcha { transform: scale(1); -webkit-transform: scale(1); transform-origin: 0 0; -webkit-transform-origin: 0 0; height: ; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .ml-form-embedSubmitLoad:after { content: " "; display: block; width: 11px; height: 11px; margin: 1px; border-radius: 50%; border: 4px solid #fff; border-color: #ffffff #ffffff #ffffff transparent; animation: ml-form-embedSubmitLoad 1.2s linear infinite; } @keyframes ml-form-embedSubmitLoad { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #mlb2-12586222.ml-form-embedContainer { box-sizing: border-box; display: table; margin: 0 auto; position: static; width: 100% !important; } #mlb2-12586222.ml-form-embedContainer h4, #mlb2-12586222.ml-form-embedContainer p, #mlb2-12586222.ml-form-embedContainer span, #mlb2-12586222.ml-form-embedContainer button { text-transform: none !important; letter-spacing: normal !important; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper { background-color: #EEE9F2; border-width: 0px; border-color: transparent; border-radius: 4px; border-style: solid; box-sizing: border-box; display: inline-block !important; margin: 0; padding: 0; position: relative; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper.embedPopup, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper.embedDefault { width: 400px; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width: 400px; width: 100%; } #mlb2-12586222.ml-form-embedContainer .ml-form-align-left { text-align: left; } #mlb2-12586222.ml-form-embedContainer .ml-form-align-center { text-align: center; } #mlb2-12586222.ml-form-embedContainer .ml-form-align-default { display: table-cell !important; vertical-align: middle !important; text-align: center !important; } #mlb2-12586222.ml-form-embedContainer .ml-form-align-right { text-align: right; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedHeader img { border-top-left-radius: 4px; border-top-right-radius: 4px; height: auto; margin: 0 auto !important; max-width: 100%; width: undefinedpx; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody { padding: 20px 20px 0 20px; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody.ml-form-embedBodyHorizontal { padding-bottom: 0; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent { text-align: left; margin: 0 0 20px 0; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 { color: #52007a; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 30px; font-weight: 700; margin: 0 0 10px 0; text-align: center; word-break: break-word; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p { color: #000000; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin: 0 0 10px 0; text-align: left; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ul, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ul, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol { color: #000000; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 14px; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol ol, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol ol { list-style-type: lower-alpha; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol ol ol, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol ol ol { list-style-type: lower-roman; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p a, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p a { color: #000000; text-decoration: underline; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group { text-align: left!important; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group label { margin-bottom: 5px; color: #333333; font-size: 14px; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: bold; font-style: normal; text-decoration: none;; display: inline-block; line-height: 20px; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p:last-child, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p:last-child { margin: 0; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form { margin: 0; width: 100%; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow { margin: 0 0 20px 0; width: 100%; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow { float: left; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent.horozintalForm { margin: 0; padding: 0 0 20px 0; width: 100%; height: auto; float: left; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow { margin: 0 0 10px 0; width: 100%; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item { margin: 0; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-formfieldHorizintal { margin: 0; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input { background-color: #ffffff !important; color: #333333 !important; border-color: #cccccc; border-radius: 4px !important; border-style: solid !important; border-width: 1px !important; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 14px !important; height: auto; line-height: 21px !important; margin-bottom: 0; margin-top: 0; margin-left: 0; margin-right: 0; padding: 10px 10px !important; width: 100% !important; box-sizing: border-box !important; max-width: 100% !important; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-webkit-input-placeholder, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-webkit-input-placeholder { color: #333333; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-moz-placeholder, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-moz-placeholder { color: #333333; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-ms-input-placeholder, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-ms-input-placeholder { color: #333333; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-moz-placeholder, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-moz-placeholder { color: #333333; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow textarea, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow textarea { background-color: #ffffff !important; color: #333333 !important; border-color: #cccccc; border-radius: 4px !important; border-style: solid !important; border-width: 1px !important; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 14px !important; height: auto; line-height: 21px !important; margin-bottom: 0; margin-top: 0; padding: 10px 10px !important; width: 100% !important; box-sizing: border-box !important; max-width: 100% !important; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before { border-color: #cccccc!important; background-color: #ffffff!important; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.custom-control-input[type="checkbox"]{ box-sizing: border-box; padding: 0; position: absolute; z-index: -1; opacity: 0; margin-top: 5px; margin-left: -1.5rem; overflow: visible; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before { border-radius: 4px!important; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked~.label-description::after, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked~.label-description::after, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input:checked~.custom-control-label::after, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input:checked~.custom-control-label::after, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox input[type=checkbox]:checked~.label-description::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::after, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-input:checked~.custom-control-label::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input:checked~.custom-control-label::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input:checked~.custom-control-label::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked~.label-description::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox input[type=checkbox]:checked~.label-description::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked~.label-description::before { border-color: #000000!important; background-color: #000000!important; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::after, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::after, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::after, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::after { top: 2px; box-sizing: border-box; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after { top: 0px!important; box-sizing: border-box!important; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after { top: 0px!important; box-sizing: border-box!important; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::after { top: 0px!important; box-sizing: border-box!important; position: absolute; left: -1.5rem; display: block; width: 1rem; height: 1rem; content: ""; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before { top: 0px!important; box-sizing: border-box!important; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-control-label::before { position: absolute; top: 4px; left: -1.5rem; display: block; width: 16px; height: 16px; pointer-events: none; content: ""; background-color: #ffffff; border: #adb5bd solid 1px; border-radius: 50%; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-control-label::after { position: absolute; top: 2px!important; left: -1.5rem; display: block; width: 1rem; height: 1rem; content: ""; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before { position: absolute; top: 4px; left: -1.5rem; display: block; width: 16px; height: 16px; pointer-events: none; content: ""; background-color: #ffffff; border: #adb5bd solid 1px; border-radius: 50%; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after { position: absolute; top: 0px!important; left: -1.5rem; display: block; width: 1rem; height: 1rem; content: ""; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after { position: absolute; top: 0px!important; left: -1.5rem; display: block; width: 1rem; height: 1rem; content: ""; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-radio .custom-control-label::after { background: no-repeat 50%/50% 50%; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-checkbox .custom-control-label::after, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::after, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after { background: no-repeat 50%/50% 50%; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-control, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-control { position: relative; display: block; min-height: 1.5rem; padding-left: 1.5rem; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-input, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input { position: absolute; z-index: -1; opacity: 0; box-sizing: border-box; padding: 0; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label { color: #000000; font-size: 12px!important; font-family: 'Open Sans', Arial, Helvetica, sans-serif; line-height: 22px; margin-bottom: 0; position: relative; vertical-align: top; font-style: normal; font-weight: 700; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-select, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-select { background-color: #ffffff !important; color: #333333 !important; border-color: #cccccc; border-radius: 4px !important; border-style: solid !important; border-width: 1px !important; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 14px !important; line-height: 20px !important; margin-bottom: 0; margin-top: 0; padding: 10px 28px 10px 12px !important; width: 100% !important; box-sizing: border-box !important; max-width: 100% !important; height: auto; display: inline-block; vertical-align: middle; background: url('https://assets.mlcdn.com/ml/images/default/dropdown.svg') no-repeat right .75rem center/8px 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow { height: auto; width: 100%; float: left; } .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 70%; float: left; } .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal { width: 30%; float: left; } .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal.labelsOn { padding-top: 25px; } .ml-form-formContent.horozintalForm .ml-form-horizontalRow .horizontal-fields { box-sizing: border-box; float: left; padding-right: 10px; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input { background-color: #ffffff; color: #333333; border-color: #cccccc; border-radius: 4px; border-style: solid; border-width: 1px; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 0; margin-top: 0; padding: 10px 10px; width: 100%; box-sizing: border-box; overflow-y: initial; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button { background-color: #52007a !important; border-color: #52007a; border-style: solid; border-width: 1px; border-radius: 5px; box-shadow: none; color: #ffffff !important; cursor: pointer; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 14px !important; font-weight: 700; line-height: 20px; margin: 0 !important; padding: 10px !important; width: 100%; height: auto; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button:hover { background-color: #0861af !important; border-color: #0861af !important; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type="checkbox"] { box-sizing: border-box; padding: 0; position: absolute; z-index: -1; opacity: 0; margin-top: 5px; margin-left: -1.5rem; overflow: visible; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description { color: #000000; display: block; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 12px; text-align: left; margin-bottom: 0; position: relative; vertical-align: top; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label { font-weight: normal; margin: 0; padding: 0; position: relative; display: block; min-height: 24px; padding-left: 24px; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label a { color: #000000; text-decoration: underline; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p { color: #000000 !important; font-family: 'Open Sans', Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: normal !important; line-height: 18px !important; padding: 0 !important; margin: 0 5px 0 0 !important; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p:last-child { margin: 0; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit { margin: 0 0 20px 0; float: left; width: 100%; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button { background-color: #52007a !important; border: none !important; border-radius: 5px !important; box-shadow: none !important; color: #ffffff !important; cursor: pointer; font-family: 'Open Sans', Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 21px !important; height: auto; padding: 10px !important; width: 100% !important; box-sizing: border-box !important; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading { display: none; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover { background-color: #0861af !important; } .ml-subscribe-close { width: 30px; height: 30px; background: url('https://assets.mlcdn.com/ml/images/default/modal_close.png') no-repeat; background-size: 30px; cursor: pointer; margin-top: -10px; margin-right: -10px; position: absolute; top: 0; right: 0; } .ml-error input, .ml-error textarea, .ml-error select { border-color: red!important; } .ml-error .custom-checkbox-radio-list { border: 1px solid red !important; border-radius: 4px; padding: 10px; } .ml-error .label-description, .ml-error .label-description p, .ml-error .label-description p a, .ml-error label:first-child { color: #ff0000 !important; } #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p, #mlb2-12586222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p:first-letter { color: #ff0000 !important; } @media only screen and (max-width: 400px){ .ml-form-embedWrapper.embedDefault, .ml-form-embedWrapper.embedPopup { width: 100%!important; } .ml-form-formContent.horozintalForm { float: left!important; } .ml-form-formContent.horozintalForm .ml-form-horizontalRow { height: auto!important; width: 100%!important; float: left!important; } .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 100%!important; } .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal > div { padding-right: 0px!important; padding-bottom: 10px; } .ml-form-formContent.horozintalForm .ml-button-horizontal { width: 100%!important; } .ml-form-formContent.horozintalForm .ml-button-horizontal.labelsOn { padding-top: 0px!important; } } </style> <div id="mlb2-12586222" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-12586222"> <div class="ml-form-align-center "> <div class="ml-form-embedWrapper embedForm"> <div class="ml-form-embedBody ml-form-embedBodyDefault row-form"> <div class="ml-form-embedContent" style=" "> <h4>Want a Free Book?</h4> <p>Sign up with your email address to receive <strong>Enchanter of Dragons</strong> for free, along with the latest news on Zarina Aston’s releases, exclusive bonus chapters, visual guides, and more!</p> </div> <form class="ml-block-form" action="https://assets.mailerlite.com/jsonp/838015/forms/113842904402757059/subscribe" data-code="" method="post" target="_blank"> <div class="ml-form-formContent"> <div class="ml-form-fieldRow ml-last-item"> <div class="ml-field-group ml-field-email ml-validate-email ml-validate-required"> <!-- input --> <input aria-label="email" aria-required="true" type="email" class="form-control" data-inputmask="" name="fields[email]" placeholder="Email" autocomplete="email"> <!-- /input --> <!-- textarea --> <!-- /textarea --> <!-- select --> <!-- /select --> <!-- checkboxes --> <!-- /checkboxes --> <!-- radio --> <!-- /radio --> <!-- countries --> <!-- /countries --> </div> </div> </div> <!-- Privacy policy --> <!-- /Privacy policy --> <input type="hidden" name="ml-submit" value="1"> <div class="ml-form-embedSubmit"> <button type="submit" class="primary">Subscribe</button> <button disabled="disabled" style="display: none;" type="button" class="loading"> <div class="ml-form-embedSubmitLoad"></div> <span class="sr-only">Loading...</span> </button> </div> <input type="hidden" name="anticsrf" value="true"> </form> </div> <div class="ml-form-successBody row-success" style="display: none"> <div class="ml-form-successContent"> <h4>Thank You!</h4> <p></p> <p>Thank you! Please check your inbox for the welcome email with the link to my Bonus Room, which has a master list of all the exclusive extras. If you have not received it yet, please check your Spam folder. Also be sure to add my email to your address book to receive all future emails.</p> <p></p> </div> </div> </div> </div> </div> <script> function ml_webform_success_12586222() { var $ = ml_jQuery || jQuery; $('.ml-subscribe-form-12586222 .row-success').show(); $('.ml-subscribe-form-12586222 .row-form').hide(); } </script> <script src="https://groot.mailerlite.com/js/w/webforms.min.js?v2d8fb22bb5b3677f161552cd9e774127" type="text/javascript"></script> <script> fetch("https://assets.mailerlite.com/jsonp/838015/forms/113842904402757059/takel") </script> Thank you in advance!
  3. @tuanphan Do you have any thoughts on this?
  4. I'd really like it to stay on the same page and change according to what gets selected, rather than redirecting to individual pages if at all possible.
  5. Thanks for weighing in! I'm glad you were able to make that work for you. Unfortunately, this option displays too much text that detracts from the book covers, the images are the wrong size and shape, a lot of results would spill over into pages that would have to be clicked through, and the drop down list would be so long with the list of tropes/identities that it'd be impractical for my specific needs. I really am looking for something specifically formatted like the link I provided. Thank you, though! I hope someone else finds that helpful for their situation 🙂
  6. I saw a really amazing feature on a fellow author's website, where they had a list of romance tropes and character types that you can click on and it automatically sorts their books that have only that trope (I.e., sort all books by instalove and remove the non-instalove ones. If you click friends-to-lovers next, it removes the instalove books and only shows friends-to-lovers book covers and nothing else). It's not tied to being in a store, but a regular page listed under their Books tab, which is where I would like to have one as well: https://www.rhyswritesromance.com/tropes I have almost 30 books in my backlist, so this would be an incredibly helpful feature for my website instead of only having an alphabetical list of all my books by series with text and buttons like I do here: https://www.ariellazoelle.com/ariella-zoelle-all Is there a way for me to mimic this automatic responsive sort by category/type on a non-store page on my website for displaying book covers that are hyperlinked to their respective pages? Thanks!
  7. Thank you, that worked perfectly! I appreciate your help, as always, @tuanphan ❤️
  8. Sorry, I thought the URL was listed! It's www.ariellazoelle.com
  9. I wanted a full width image card that was 50/50 split with the text on my homepage without overlap. I managed that, but it completely broke my mobile view by making the card bubble a narrow strip. In mobile view, I want a full width picture on top, and the card text below the picture and not overlapping like the default. This is the code I have so far: // Image Card Full Width // section[data-section-id="63a0b33ac03b662d662d002d"]{ overflow-x: hidden !important; overflow-y: hidden !important; .content-wrapper { padding: auto !important; margin: 0px auto; display: contents; } .sqs-layout .sqs-row .sqs-block { padding-bottom: 0px !important; padding-top: 0px !important; }} .sqs-block-image-figure { .image-inset { height: 100% !important; width: 90% !important; } .sqs-image-shape-container-element { height: 100% !important; } .intrinsic { width: 60% !important; } .image-card-wrapper { width: 36% !important } } @media screen and (max-width:767px) { .image-block.sqs-block-image .design-layout-card { display: flex !important; -ms-justify-content: space-between !important; justify-content: space-between !important; } .sqs-block-image .image-block-outer-wrapper.image-block-v2 .intrinsic { width: 125% !important; } figcaption.image-card-wrapper { margin-top: 15px !important; padding-left: 55% !important; padding-right: 55% !important; } [data-section-id="63a0b33ac03b662d662d002d"] .image-block figure { max-width: 100% !important; } } I'd really appreciate help! Thank you in advance!
  10. As always, @tuanphan, you have been a TREMENDOUS help. I'm so appreciative of your time and efforts. Thank you for fixing that infuriating problem! ❤️
  11. Site URL: https://www.ariellazoelle.com I haven't made any recent changes to the coding on my website for almost two months, but I did add a new product to my store this week. For some reason, the header with all the navigation links is missing at the top when you visit my website in both desktop and mobile views. When I open the page in Squarespace, this is what I see, where the header is still missing: But as soon as I hit Edit, the header shows up: But when I click save, the header disappears again. What is causing it not to display and how do I fix this? I don't understand how adding a new book to my store could cause this error, and I didn't make any coding changes when I added the new product. This is making my website literally unusable, so I'd really appreciate help! Thanks. Edit: If you go to https://www.ariellazoelle.com/cart the header appears, but you can't click on anything and none of the drop down menus work or any of the colors change as per my CSS. But if you go to https://www.ariellazoelle.com/sunnyside the header is still missing: I don't know if that helps clarify anything, but I'm at a total loss.
  12. Thank you, that worked perfectly! I appreciate you always helping me out!
  13. Site URL: https://www.ariellazoelle.com/store I'm getting ready to launch my store and I'm having some trouble with my quantity sizing and the position of my custom icon for the cart. If someone adds 20 or more items to the cart, the number touches the cart. I'd like to introduce a little spacing between them to make it easier to read and so I can make the quantity number a bit bigger as well since that's really tiny. This is the code I'm currently using on the website: // Custom Cart Icon // .header .header-actions-action--cart .icon { background: url(https://static1.squarespace.com/static/5e8fc901cd14a73a8f1347b3/t/62d97302475e0e3628b75aad/1658417923056/Cart+Thicker.jpg) center no-repeat; stroke: transparent !important; content: ""; background-size: contain; } // Text Under Cart Icon // .header .header-actions-action--cart .icon:after { content: "CART"; color: #FF61D7; font-size: 15px; font-weight: 900; text-align: center; margin-top: 10px; margin-bottom: 0px; letter-spacing: 0px; width: 100% !important; display: inline-block; } // Cart Item Number // .icon-cart-quantity { font-size: 1em !important; font-weight: 900; text-align: right; } .sqs-cart-quantity { color: #FF61D7; } Any advice on how to fix the cart quantity spacing with the icon would be very much appreciated! Thank you!
  14. Thank you, that worked perfectly! How would I get the font on that button to match the rest of my buttons? My normal buttons are Archivo Black, 400 weight, 1rem, text transform uppercase. But that button is in a really thin, lightweight font, which you can see them here when they're stacked . Thanks again!
  15. Site URL: https://www.ariellazoelle.com/store/p/play-by-heart-signed Because I sell autographed books, when you hit Add to Cart on a product page, it pops up a form asking buyers to type in how they would like it personalized. The form Add to Cart button is black and I can't figure out how to change it to #A034FE to match the rest of the buttons on my website. I'd appreciate any help on how to make that change with CSS. Thanks!
  16. I want to do this code for the Cart page button on https://www.ariellazoelle.com/cart for consistency to match all the other buttons on my site. I also want to do the hover effect on the Cart page button:
  17. Oh, that works beautifully, thank you! And thank you for such a fast answer! ❤️ As a follow-up question, what is the code string for making changes to the Cart page button before the { symbol? Thank you!!
  18. Site URL: https://www.ariellazoelle.com/store I would like the sidebar navigation in my store to have the active link change color to #65C5EE, but I can't figure out what code to use to make do it. I could successfully get it to change colors with the hover to purple, but the active link color change to capri blue has me stumped. Any help would be appreciated! Thank you for your help.
  19. I tried logging into Safari. For some reason, there were a bunch of blank squares from Twitter between the newsletter and the social media links when I logged into settings through Safari that didn't show in Chrome. Once I deleted that, the icons started showing up in Chrome again. I have no idea how that resolved it, but it thankfully did. Thanks!
  20. Site URL: https://www.afzoelle.com/extra-af Sometime in the last two or three weeks, my social media icons have disappeared from the footer of my website and my contact page, even though I haven't touched them since early May and they were functioning as they should. I removed the CSS that I had for them thinking maybe something got updated and that broke, but they did not come back. Here's how the space looked on my published website in my footer: When I go into settings, the block still says "Social Links," the links are visible, but the box itself is empty. When I go to add a new social links block, there's no option for it anymore. Likewise, on my contact page, it's the same thing. On the published page, it's showing as blank, but when I click on edit, the empty social links box is there. They are not the same color as my background, so it's not something silly like that. The social media icons in my navigation header have been unaffected by this and are totally fine. I still have not put back the CSS for the regular icons until I can fix the issue. Any advice on how to fix this would be appreciated. Thank you!
  21. Thank you, @tuanphan that worked beautifully! I sincerely appreciate your helpful tips!
  22. Site URL: https://www.afzoelle.com/extra-af I recently switched over to 7.1 and I can't seem to find a way to make the logo on my lock screen bigger. It defaults to smaller than the lock, which isn't helpful at all. I'm assuming I need to add code to the Lock Page Code Injection to make that happen, but I'm not sure what. Any advice would be greatly appreciated. Thank you!
×
×
  • 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.