Fluid Container with Max Width Content

Sometimes a website design will call for what appears to be a regular container sitting inside a fluid container. Here is a quick way to achieve that with a dash of CSS.

fluid_container_with_fixed_width_content

Insert a div between your fluid container and your rows, let’s call it .container-max-width. In the CSS set the max-width to 1200px or preferred width. Set the left and right margins to auto if you want it to center.

Now the fluid container will stretch the full width of the window and the content will be limited to 1200px. This comes in handy when the fluid container is going to have nice big background image.

Advertisements

Removing page titles from Sage (roots.io)

When you first install the Sage theme (v8.5.0 by roots.io)¬†you’re going to have the site name as link at the top of every page. For whatever reason, I always end up burning time trying to locate where this title/link is in the source code.

Site_Title

I’ll save you some time… It’s located in the header.php file and it’s referred to as the ‘brand’. You’ll see a ‘brand’ class.

brand