Mobile view - shaded text box running off page

Evening,

Mobile view - shaded text box running off page.

How can I resolved this?

Using coding in text: <div style="background-color: #f7f7f7; padding: 1.0em; width: 45.0em; margin: 1.0em 0; border: solid 1.0px #cccccc;">

I will change all over to to the X theme ‘container’ apart from the last task.

How can I make the X theme version look like this? X one is bulky and makes the text look ugly

Code:

[content_band bg_color="#f7f7f7" border=“all”] [container] [custom_headline style=“margin: .25;” type=“left” level=“p” looks_like=“p” accent=“true”]Task 1 - Go to Google and type[/custom_headline] [/container] [/content_band]

Thanks.

Hi there,

Thanks for writing in.

You mean you wish to create a shortcode equivalent of that <div> structure? I recommend a simpler one, please add this to your global custom CSS

.boxy {
background-color: #f7f7f7; padding: 1.0em; width: 45.0em; margin: 1.0em 0; border: solid 1.0px #cccccc;
}

Then add boxy to your custom headline’s Class input/attribute. Example

[custom_headline style="margin: .25;" type="left" level="p" looks_like="p" accent="true" class="boxy"]Task 1 - Go to Google and type[/custom_headline]

And with cornerstone builder, just inspect the element and find Class input field.

Cheers!