If you want to achieve this, you can utilize the following CSS code:
.buttonfloat-small div a.fl-button {width:100%}
.buttonfloat-small div {margin:0!important}
Alternatively, you can target the nodes directly like so:
a.fl-button {width:100%}
.fl-node-5907a486bf15a > .fl-module-content {margin:0}
By applying these styles, your design will resemble this image: https://i.stack.imgur.com/epv0B.png
Note that the important override in the first div is essential to eliminate the 20px right margin from ".fl-node-5907a486bf15a > .fl-module-content". Directly calling on it omits the need for the important tag (hence both examples).
To ensure the full-width appearance only kicks in at specific breakpoints, insert the CSS into your Media Queries section, such as:
@media (max-width: 768px){
.buttonfloat-small div a.fl-button {width:100%}
.buttonfloat-small div {margin:0!important}
}
For changing "Call Us On" to "Call Now," implementing JQuery might be effective. Here's an example:
$(document).ready(function() {
var button = $(".buttonfloat-small div a.fl-button span.fl-button-text"),
resize = function() {
if (window.matchMedia('(max-width:767px)').matches) {
button.html("Call Now 0330 838 1828");
} else {
button.html("Call Us On 0330 838 1828");
}
};
$(window).resize(resize);
resize();
});
This script checks the width and updates the text accordingly, even upon window resizing.
Check out this JSFiddle demo: https://jsfiddle.net/awwy5ram/1/
Feel free to reach out if you need further assistance!