Adsbridge Landing Page templates for mobile

[Thrawn$]

Hi there,

I started using the Adsbridge platform lately and noticed that their templates for mobile landing pages are not responsive, they don't display properly on multiple devices.

Do you have an idea on how to fix that?


thanks,

 

[Nick AdsBridge]

Greetings, Thrawn$ !

Thank you for your question.
To make your landing pages responsive you need to add a responsive.css file to them.
To add this file switch the editor to CSS tab and press the "Attach file" button.
All the settings are the following:

@Media screen and (max-width:900px) {
/* Default */
.lp-root {
max-width: 100% !important;
width: auto !important;
text-align: center;
}
.lp-block {
position: relative !important;
top: 0 !important;
left: 0 !important;
height: auto !important;
background-size: contain;
width: auto !important;
}
.lp-block-content {
position: relative !important;
top: 0 !important;
left: 0 !important;
height: auto !important;
max-width: 100% !important;
}
.lp-image {
position: relative !important;
top: 0 !important;
left: 0 !important;
height: auto !important;
max-width: 100%;
}
.lp-text {
position: relative !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: auto !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lp-button {
position: relative !important;
top: 0 !important;
left: 0 !important;
background-repeat: no-repeat !important;
margin: 10px auto;
max-width: 100% !important;
}
.lp-box {
position: relative !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: auto !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lp-html {
position: relative !important;
top: 0 !important;
left: 0 !important;
height: auto !important;
width: 100% !important;
}
.lp-html-container {
width: 100% !important;
height: auto !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lp-form {
position: relative !important;
top: 0 !important;
left: 0 !important;
height: auto !important;
width: 100% !important;
}
.lp-form-label {
float: none !important;
clear: both !important;
width: 100% !important;
text-align: left !important;
display: block !important;
}
.lp-form-input, .lp-form-select, .lp-form-textarea {
float: none !important;
clear: both !important;
width: 100% !important;
}
/* Additional Classes */
.hidden {
display: none !important;
}
/* Settings */
.lp-block {
padding: 10px !important;
}
.lp-image {
margin: 10px !important;
}
.lp-text {
padding: 0 10px !important;
margin: 10px 0 !important;
text-align: center !important;
}
.lp-box {
padding: 10px !important;
}
/* Form */
.lp-form .lp-form-row .lp-form-label {
width: 100% !important;
float: none !important;
margin-bottom: 2px;
}
.lp-form .lp-form-row .lp-form-input,
.lp-form .lp-form-row .lp-form-select,
.lp-form .lp-form-row .lp-form-textarea,
.lp-form_label-left .lp-form-option-list {
width: 100% !important;
float: none !important;
text-align: left;
}
.lp-form .lp-form-validation-message {
position: relative !important;
top: 0 !important;
left: 0 !important;
text-align: left;
}
}

Please, copy these settings and save them as CSS file.


Feel free to ask if there will be more questions.

 

[Thrawn$]

Thank you @Kate but that CSS file just messed up all my landing pages

 

[Thrawn$]

Ok I figured it out, thanks again @Kate