Making very small layout adjustments

A real question from a Heroic user:

So I'm working with this right now, and finding that it's not super obvious how I might get more exact placement with elements like text boxes and images. Is there a way to make the snapping less prescribed or to give more grid options for where something can be placed?

This is a great question, and it all comes down to how well you want your site to display on mobile screens and tablets. The short answer is that Heroic uses a framework that may not give you the exact placement that you want, but for good reason.

The longer explanation...

We use Bootstrap, the world's most popular web building framework. Its popularity is based in part on being designed from the ground up to look great on any size screen, with very little extra work required from you.

Think of the Bootstrap gird like a 12-column framework onto which you lay your content -- your headlines, text and images.

  • Your columns can be any width, from 1 to 12 columns wide
  • You can have any combination of columns in a section, up to 12 column widths
  • You can have as many of these column layouts as you want in your site

Here's just six of the literally millions of possible column combinations that you can have within any section of your page:

The one downside of having a prescribed column layout like this is that it might not be as flexible as you want.

For example, you can't easily place an image *exactly* 12 pixels from the top and 20 from the right, or have a middle column 25 px wider than the others.

However, the advantages in being a little more rigid with the layout are huge.

Mostly it's that your page will work beautifully in responsive mode -- in other words, on smaller screens.

How? Well, content placed into a column layout knows exactly how to break down and re-order itself as the screen gets smaller and narrower, which is essential when you consider that more than half of the people who view your site will do so from a cellphone or tablet.

The fact is that other solutions that allow you to drag things *exactly* where you want them end up looking incredibly messy when you view them on smaller screens, because the content doesn't quite know how to display itself as the screen gets narrower.

It's funny how sometimes things that start off feeling like constraints can end up giving you greater freedom in the end. :)

NEW: Can we do the work for you?

If you're like most entrepreneurs, you have a million projects in your head, with no way to get them all done. As a result, you feel stalled and frustrated.

You've tried doing it all yourself, but you know it's unsustainable, and a one way ticket to burnout and overwhelm.

You don't yet have the resources to hire your own team of designers and developers, so you feel stuck, going around in circles.

If you resonate, then relax, because we're here to help.

Our in-house tech, design & web team is ready to help, and available for almost anything. (Seriously!)

We'll take all of the tasks you've been collecting, and make them happen for you quickly and efficiently in the background, leaving you free to focus on what you do best.

And you won't pay through the nose either -- it's available for an incredibly low 5-hour "done for you" package -- it's just $200 for access to our in-house, highly-trained team of tech and design professionals. Best of all, the time never expires and you can use it as quickly or as slowly as you like.

Grab your 5-hour 'done for you' package here and let's get your business moving again!

Other Articles in this Category

Creating Pages

Pages are the heart of your site, and what you can build in Heroic is simple unmatched. Here's all the support you need to get started.

View this category

My Account

Got questions about how to manage your account? We're compiling them all here. If we missed anything, let us know and we'll add it.

View this category

Integrating

Our goal is to integrate with every 3rd party platform out there. Here's what we have currently!

View this category

Blogging

Heroic comes with a full featured, yet simple-to-use blogging platform that allows virtually anyone to get bloggin'...

View this category

Popups

Normally popups are hard to create, add to your site, and integrate with 3rd party platforms. Not here :)

View this category

Fonts & Colors

Heroic's global font & color system keeps everything looking great, and makes editing FAST!

View this category

Domains

Here's how to connect your site with your custom domain

View this category

Conversion U

Some our best articles on copywriting, design, branding and more!

View this category

Random Stuff

A home for articles that don't seem to fit anywhere else. Give 'em some love?

View this category

Trainings & Courses

Our expertly curated collection of education and training...

View this category

Recommended Tools

Here are the 3rd party tools that'll make life easier as an online entrepreneur!

View this category

58