How to Control the Width of something in my Text

Tags: QText

Often, when you have a block of Text (especially Large Text), you want some of it to be a specific width, and to put "blocks" side-by-side with each other. There are various ways you can do this (if you are good at CSS, you can get as fancy as you want), but the easy way is to take advantage of the "span" styles.

Note: the below only applies to full-width screens -- desktop, laptop and larger tablet screens. On a small screen such as a phone, text always displays in a single column, and the below instructions will have no effect.

In Querki, you can think of your page as being laid out in 12 columns. Normally, your text takes up the full width of that, but you can make a section take up only 6 columns -- half the width -- like this:

{{col-md-6:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet mi ac nulla facilisis sodales. Nullam ultricies neque ut eleifend gravida. Nunc lobortis ante eu quam bibendum, et vehicula nibh rhoncus. Nulla metus ipsum, bibendum quis odio ac, condimentum laoreet tortor. Maecenas auctor eros in ultricies porta. Donec magna lacus, vehicula nec massa vel, commodo tristique sem. Nullam dui enim, ultricies in lorem eget, suscipit dictum arcu. Donec faucibus suscipit massa et imperdiet. Suspendisse pulvinar gravida tortor, vitae ultricies nibh aliquam sit amet. Mauris ac venenatis risus. Phasellus euismod vitae leo quis commodo. Suspendisse at neque vel risus egestas rutrum. Duis et nibh viverra, venenatis odio ut, pharetra augue. Donec sollicitudin faucibus justo, eget rhoncus justo. Aliquam erat volutpat. Aenean pellentesque neque urna, quis imperdiet est hendrerit id.
}}
{{clearfix: }}

That shows up like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet mi ac nulla facilisis sodales. Nullam ultricies neque ut eleifend gravida. Nunc lobortis ante eu quam bibendum, et vehicula nibh rhoncus. Nulla metus ipsum, bibendum quis odio ac, condimentum laoreet tortor. Maecenas auctor eros in ultricies porta. Donec magna lacus, vehicula nec massa vel, commodo tristique sem. Nullam dui enim, ultricies in lorem eget, suscipit dictum arcu. Donec faucibus suscipit massa et imperdiet. Suspendisse pulvinar gravida tortor, vitae ultricies nibh aliquam sit amet. Mauris ac venenatis risus. Phasellus euismod vitae leo quis commodo. Suspendisse at neque vel risus egestas rutrum. Duis et nibh viverra, venenatis odio ut, pharetra augue. Donec sollicitudin faucibus justo, eget rhoncus justo. Aliquam erat volutpat. Aenean pellentesque neque urna, quis imperdiet est hendrerit id.

This is particularly useful when you want to show things side-by-side. For example, here are two columns that each take up a little under half the width:

{{col-md-5:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet mi ac nulla facilisis sodales. Nullam ultricies neque ut eleifend gravida. Nunc lobortis ante eu quam bibendum, et vehicula nibh rhoncus. Nulla metus ipsum, bibendum quis odio ac, condimentum laoreet tortor. Maecenas auctor eros in ultricies porta. Donec magna lacus, vehicula nec massa vel, commodo tristique sem. Nullam dui enim, ultricies in lorem eget, suscipit dictum arcu. Donec faucibus suscipit massa et imperdiet. Suspendisse pulvinar gravida tortor, vitae ultricies nibh aliquam sit amet. Mauris ac venenatis risus. Phasellus euismod vitae leo quis commodo. Suspendisse at neque vel risus egestas rutrum. Duis et nibh viverra, venenatis odio ut, pharetra augue. Donec sollicitudin faucibus justo, eget rhoncus justo. Aliquam erat volutpat. Aenean pellentesque neque urna, quis imperdiet est hendrerit id.
}}
{{col-md-5:
Fusce eu lacinia justo. Praesent sed dictum dolor. Nam elementum fringilla lacus quis rutrum. Morbi a sem ullamcorper, ullamcorper metus a, interdum magna. Suspendisse eu semper nisl, eget condimentum turpis. Vivamus vel bibendum augue. Donec varius nulla nunc, nec accumsan nibh ullamcorper vitae. Ut in sapien ut arcu consectetur imperdiet. Donec posuere ipsum non lacus consequat, at mattis libero rhoncus. Proin hendrerit feugiat nisi. Donec lacinia tellus quis dolor aliquet, id sagittis turpis fringilla. Aliquam accumsan at erat quis vehicula. Fusce euismod nisi eros. Aliquam in felis ligula. Duis eget ipsum nec nibh varius pellentesque nec sed orci.
}}
{{clearfix: }}

That looks like:

Fusce eu lacinia justo. Praesent sed dictum dolor. Nam elementum fringilla lacus quis rutrum. Morbi a sem ullamcorper, ullamcorper metus a, interdum magna. Suspendisse eu semper nisl, eget condimentum turpis. Vivamus vel bibendum augue. Donec varius nulla nunc, nec accumsan nibh ullamcorper vitae. Ut in sapien ut arcu consectetur imperdiet. Donec posuere ipsum non lacus consequat, at mattis libero rhoncus. Proin hendrerit feugiat nisi. Donec lacinia tellus quis dolor aliquet, id sagittis turpis fringilla. Aliquam accumsan at erat quis vehicula. Fusce euismod nisi eros. Aliquam in felis ligula. Duis eget ipsum nec nibh varius pellentesque nec sed orci.

The {{clearfix: }} at the end basically says, "stop doing things in columns and go back to full width". It isn't always necessary, but you should put it in if you find things that you didn't intend to have in columns showing up in them.

Best of all, the system is smart about how big your screen is, so if you lay things out this way, it will automatically collapse the columns and show them stacked up instead if you look at your page on a phone! (Make your browser window very narrow to see what happens -- it just automatically rearranges everything to suit the width.) The idea is that, instead of worrying too much about having to design something different for a phone, your existing pages should just adapt.

There's a lot more -- if you want the full details, check out the documentation on the Grid System and Responsive Design in Bootstrap -- but you can do a lot with just span and clearfix.

Back to Recipes