Make Article and DIV.x-main span full width of page

I am unable to find a way to make the Content Area (Article & DIV.x-main) span the full width of the page. I have tried setting the width to 100% but that doesn’t seem to work.

Hello @IT_MiamiCountyOhio_gov,

Thanks for writing to us.

I checked your given site URL it seems that you have added a custom CSS code and you have set the width for the body just because you are not able to make it full width. I would suggest you remove the custom CSS code of the body and check it.

Please note you need to purge all the browser cache or check it in the private mode of the browser.

Thanks

1 Like

Apologies. I did not explain myself well. Please see my screenshot.

<div class="x-main left" role="main"> should span the container but it does not.

Thank you for your help.

Hey @IT_MiamiCountyOhio_gov,

I am not quite sure why it is acting that way and upon checking the inspect element I cannot check which stack you are using. That being said, we need to check your setup properly. To do that, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

Theme - Blank

Hey @IT_MiamiCountyOhio_gov,

The given credentials are not working, please double check and update them with the correct ones.

Thank you.

I made that User an Admin. Should work now. Thank you.

Use the new credentials. I changed the password for the account I initially gave you. Use the test account.

Thanks.

.x-main { width: 100%; } fixes the issue. Sorry if this thread went a little crazy. Still haven’t found a way for a GUI user to resolve this issue.

Thanks

Hello @IT_MiamiCountyOhio_gov,

You are using the default page template. If you want to create your own page template, simply create a Single Layout instead. If you are not familiar with our layout builder yet, please check out this video:

Best Regards.

1 Like

Given that my original inquiry was related to how to get div.x-main to span the entire width of the page using the GUI controls … what do you recommend? Should I start over? Can I apply a Stack to my existing site?

Thanks again for your help. I appreciate it.

Hello @IT_MiamiCountyOhio_gov,

Your custom CSS will affect all the pages on your site or any pages that have the .x-main element class. If I am gonna do it on my site, I would just create a new custom single post layout or a page layout and apply it to the respective page/s without having to add any custom CSS.

Cheers.

How should I “apply it to my site”? Is there a way to automate that process or do I have to hand copy content from original pages to new pages that use the new template?

Hey @IT_MiamiCountyOhio_gov,

Once you have created the custom single layout for your post, it can be applied to all the posts that you have built in Cornerstone. No manual copying.

Best Regards.

I am not seeing how to apply that to the entire site. I’ve searched support docs. Not seeing it.

Hello @IT_MiamiCountyOhio_gov,

It can be found on the left panel Assignments > Conditions. For more details, please check this out:

Or check out this video:

Hope this helps.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.