Hi Kev and Jade,
Let me clear these things up, first, let’s forgot about the custom function code given on the other thread since you did not successfully implement it and its not the cause of the Scrape nonce check failed error.
What you’re trying to do should have been easy to achieve in X and Cornerstone, but it becomes a bit complicated because of your custom CSS, specifically that one you show above to limit the max-width and container on the entire site, you could have been set that under Theme Options > Layout and Design > Site Max Width.
Now you would say, that this will limit the pages (and banner images) max-width as well. No, it will not if you use a Blank - No Container | Header, Footer page template, and turn off the Row’s Global Container option.
Take a look of this example page, this is a copy of your about us page but using a Blank - No Container | Header, Footer page template, as you can see I was able to have a fullwidth banner and a contained text without applying a custom CSS on it.
So how did I do this? I simply turn off the Row’s Global Container on those banners and remove the section margins on it.
Now your next question might be, why are the second and third images are not fullwidth.
That is because those images are not big enough, to begin with, it only has 1150px of width, if you’re expecting your site to be viewed on large screens, you should have uploaded high-quality images, try 1600px by 900px images next time.
Can we force these small images to go fullwidth? Yes, we can with a custom CSS, but please keep in mind that this will stretch the image and it may look a bit blurry.
Add this to the Image Element CSS area to force it to go fullwidth, only use this if don’t want to re-upload your images.
$el.x-image,
$el.x-image img {
width:100% !important;
}
Please keep in mind that sometimes customization is like a double edge sword, it helps you with something but breaks some things.
Hope this shed some lights,
Cheers!