ACSS 101.02: Establishing & Manipulating Your Site's Content Width

Content Width is the maximum width that you want content to be able to go when placed inside a default section container. It's important to establish a content width so that the vast majority of your content isn't too wide, too narrow, or random [ick].
Now, just because you've set a default content widht doesn't mean all content has to be that maximum width. We'll cover breakout content in a future lesson. We'll also cover adjusting element width on-the-fly in a future lesson.
Today's lesson is isolated to:
What is Content Width
Default Content Width
The Content Width Class
The Content width Variable
"Content Width Safe"
Manipulating Content Width for Pages/Templates/Sections
To be clear, this is not the technique for simply changing the width of specific elements on the fly. This lesson only relates to setting and manipulating the default content/containment width of a website.
---
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
Interested in using Frames on your sites and accessing the private Frames support and strategy community? Get a license here: getframes.io
Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel: / @gearyco

[@Headlikeanorange84]

Pleasantly surprised to see lesson 2 uploaded so quickly after the first one. Thanks Kevin!

[@dahunsi]

Great tutorial and introduction. Love the custom body class concept. Would love to see how to break out specific elements like images and block quotes in a blog post.

[@LupusDesign]

Theory is one thing, but when you combine it with real world examples, this make one's understanding more than theoretical. Love the practical examples and the clarity of your delivery.

[@isaurasotoca]

Always learning something new, even from the more basic lessons!! 😊 Thank you Kevin for doing all the great content you always do! Excited for the next one!! 🎉

[@matthollub4977]

I did not see that floating indicator in the bottom right without you pointing it out (this feature is sick btw). It would be super helpful if after installing a.css, users opening up the builder for the first time would be offered the choice to go through a short sequence of tutorial tips to accelerate the learning curve. Also, I just bought both of your products and I'm psyched to keep learning how to use a.css & frames through this series of videos. Cheers man, you rock!

[@davidwalls2304]

In the tradition of all prior lessons (PB101 & ACS101), you start with the simple topics and make sure we have the foundation set before moving on to more complicated topics. Even though this was an early lesson, I've still picking up great ideas that I hadn't previously thought of.

[@abdulwaheedorg]

Thank you so much for uploading the 2nd tutorial so quickly.

[@PapaG-0101]

I am really learning a lot about web best practices, and I recently upgraded to ACSS. I plan to use it on all future projects. I am also watching and building along with your build videos. All your videos really help to explain web best practices and the value of ACSS. Thank you very much for your time and sharing all the information that you do. Mad respect. 🖖

[@RobCooper]

That was really great. I'm away for 2 weeks on a cruise so will be binging the next ones when I get back.

[@eucalyptech]

Very useful, as I started to redesign my web site ! Thank you Kevin 🙂

[@kristoffernygard7255]

Thank you, Kevin! I'm learning so much each time :D

[@ceescoenen]

Thank you! Perfect showing all the principals.

[@itspraveensharma]

Great Tutorial ....

[@nostressirish2767]

brilliant stuff kevin- thank you

[@Jim.Hummel]

This is great! I get so juiced from these videos...just like I started an IV drip with a caffeine syrup drip! I sure hope that there's a way to share ACSS configurations (export/import) as sharing SCSS snippets would be highly valuable. Thanks, Kevin!!

[@AutomaticCSS]

Yes, it's coming.

[@AutomaticCSS]

Right now you can share the export json for the entire dashboard if you want. But we're going to make it so you can export individual areas, like colors.

[@Jim.Hummel]

@@AutomaticCSS - Excellent! That makes sense but from this particular video, I was thinking specifically how convenient it would be to sync/share the SCSS snippets a la WP Codebox. Thank you, Kevin!

[@AutomaticCSS]

@@Jim.Hummel Which snippets do you mean?

[@Jim.Hummel]

@@AutomaticCSS - Specifically, things like .content-width--narrow that I'd likely use globally, but PHP & JS scripts as well. I know it's not in your purview but I'd love it if ACSS could replace WPCodebox functionality. I'm thinking back to your Creating a Blueprint video where you added publicly available snippets with a couple of clicks.

[@KshitijShah89]

Lesson 2 already. Woohoo! Question - If you apply a body class, can you still have content break out?

[@AutomaticCSS]

For sure

[@alfian_ridwan]

The variable override on a class is something I didn't think of - easy to make custom width "templates" for reusability with classes. Also - the third tab on Arc's sidebar, "Icons", curious to know what icon sets do you use?

[@AutomaticCSS]

HugeIcons

[@michaelakubas]

Hi Kevin, thank you for videos. One question, you talk about little icon in bricks builder, where I can turn on? Thank you.

[@AutomaticCSS]

Turn on what?

[@TobiasGronbach]

Nice!

[@nostressirish2767]

00:01 Automatic CSS allows flexible customization of content width. 02:15 Establishing a consistent content width is crucial for a good user experience on websites. 06:59 Establish content width for website's main pages. 09:15 Using 100% width and setting content width for website elements 13:09 Using the concept of content width safe to prevent content from touching the edge of the screen 15:05 Implementing content width using utility classes and custom classes. 18:56 Customize content width for multiple templates easily 20:36 Easily manipulate content width at template, page, and section levels 24:17 Utilize custom body class to define content width 25:59 Adjusting content width easily for different pages and templates Crafted by Merlin AI.

[@AutomaticCSS]

💪🏻

[@philippepperell9951]

Yet another great tutorial, Kevin, thank you. Any thoughts about when 3.0 might be out of beta?

[@AutomaticCSS]

2-3 weeks hopefully.

[@AutomaticCSS]

It's safe to use on new projects, just not completely safe to upgrade existing sites yet.

[@MusicJunkieVideos]

Super stuff thx

[@alex_vie]

Great tutorial again! But I would have a question please: Is the very helpful RMB context menu not available anymore? Do we have to go back to typing? It was amazing to work with.

[@AutomaticCSS]

The right click menu is still available

[@alex_vie]

@@AutomaticCSS Great❤

[@christianmagill3829]

When you change content width on the body class, wouldn't that also affect the header and footer if they are also restricted to the same width?

[@AutomaticCSS]

Yes that’s usually the goal. It can easily be overwritten though in edge cases.

[@them00nitself]

Uh I need that math so bad. Is there an article for how content width, safe or narrow are calculated?

[@AutomaticCSS]

You set content width in the dashboard

[@koperkuba]

Nice tempo:)

[@Giulo91]

Hi Kevin, can I create the narrow class and decrease the content-width value as a percentage so that if I change the content-width the narrow class adapts automatically?

[@AutomaticCSS]

should work!

[@Giulo91]

@@AutomaticCSS I tried this --content-width: calc(var(--content-width) * 0.8) but it doesn't seem to work. What is the right way to do it?

[@SiteswithNatalie]

@kevin at 20:24 why did you use the "ch" as the content-width? Thank You!

[@AutomaticCSS]

For long form content it’s best to set the width roughly by the number of characters in a line, since the focus is on the text. It ensures good readability even if text size changes.

[@Horatiu-w3g]

Hello, please help me! I can't see the shortcut for ACSS Panel. Can you help me understand how to enable it, please?

[@AutomaticCSS]

You mean the floating icon? It only shows up in the builder. On the front end you open ACSS with the admin toolbar link.

[@PeterHeck]

Do I need ACSS 3.0 in order to define such new utility classes? Tried it in WPCodebox2 as SCCS snippet, but this doesn't work...

[@AutomaticCSS]

No but it’s easier and faster in ACSS.

[@PeterHeck]

@@AutomaticCSS Thanks - need to see, why this is not working when defining it in WPCodebox2...

[@curtm275]

When you apply the content-width variable to the body in the template settings - does it also apply to the header and footer of the site?

[@AutomaticCSS]

If you use containers in those areas yes

[@PeterEller]

hey how would this work on a site that I've already build with too many classes that I want to clean up and replace with ACSS classes? Also when is V3 being released?

[@AutomaticCSS]

How would which part work? If you want to clean up classes you've made, you can use the bricks global class manager for that.

[@backgrounds4everyone275]

Hi Kevin or anyone else who can help. I am following along to build my first project in Bricks and using ACSS. The variables are not coming up for me automatically and I am pretty sure I missed something. I looked in the manager and I only see the ACSS classes, no variables. Thoughts?

[@AutomaticCSS]

You mean when you right click a settings input?

[@backgrounds4everyone275]

@@AutomaticCSS I typed the var (--content-width) in the width field for the container on theme settings and it did not auto populate as I was typing. I clicked to look in the class/variables manager and the classes were there but no variables. The width of the containers changes to what iI set it to in AutomaticCSS. This is my first time using so I am not sure if something was wrong.

[@backgrounds4everyone275]

@@AutomaticCSS I feel really dumb. But On the videos I saw Kevin typing the names of the variables and they were auto populating. When I typed them they did not auto populate and since I saw the category for automatic css in the class manager I assumed they would be stored in the variables manager and I didn't see them. Anyway, right clicking is how you work it and I should probably read directions. Thank you for responding and now I am on the right track. Even though I am pretty embarrassed. 😖

[@AutomaticCSS]

@@backgrounds4everyone275 Hmm. Please post details and perhaps a screenshot or screen recording in the support community and we can help you there pretty quick. Hard to do on KZbin.