Docs

[Alfonso S]

Hello, first, i would like to ask how can i put an image next to a text in a shortcode-full landing page.
I have tried with columns, grids, and everything but… it doesn’t work.

In general, I have seen that this also happens with promo or whatever I put on the columns. What happens is that I can more or less control the size of the images or text i put BUT, I cannot center it and the things will look to spaced out.

Also, sometimes with images, they grow very big till they fill out all the space available. How can i control this?

[Kory]

Alfonso,

To float an image, simply use the following:

[image src="/path/to/your/image.jpg" float="left"]

Additionally, you can add inline styles to your images like so:

[image src="/path/to/your/image.jpg" float="left" style="max-width: 100px;"]

Due to the responsive nature of X, images will fill their entire containers by default. Should you need to control this, you can utilize the inline styles like in the example above.

Additionally, unless an image is floated, it will be displayed inline and can be centered by adding classes to a container element. For example, X includes utility classes that can be used in the theme which are covered in the Documentation section. Simply adding a center-text class to a parent element will center all content within, including images.

Let us know if you need anything else!

[Alfonso S]

And how could i add such center text? Before the content band?

And also, i belive many of the problems i am facing would be solved if i could control the width of the containers, or create various containers in a content band. Is that possible?

[Rubin]

Hey,

you can use the column shortcode inside content bands:

[column id=”” class=”” style=”” type=”” last=”” fade=”” fade_animation=””] … [/column]

and for a centered headline you can use:

[custom_headline type=”center” level=”” looks_like=”” accent=””] Your Headline [/custom_headline]

hope that helps!

[Alfonso S]

No it doesn’t 🙁

What I mean is, when using columns… how can i center them? If I put them, imagine, in two halfs, they both occupy the who width of the site. If I reduce them with a max-width, then they occupy less but their position centers them in each half… when what I want is for both columns to be centered in the middle of the screen.

Does that make sense?

[Kory]

Alfonso,

I think I understand what you’re trying to do now. While logically it would make sense to place a max-width on these elements to center them, it won’t work because they are also floated, so placing a max-width on them will only have the appearance of shifting them to the left.

To achieve the look you’re after, it would be much simpler to wrap all of your columns in a [container] shortcode and then place this inline styling in your container like so:

[container style="max-width: 600px; margin-left: auto; margin-right: auto;]
  [column type="one-half"]
    ...content here...
  [/column]
  [column type="one-half" last="true"]
    ...content here...
  [/column]
[/container]

Of course, simply adjust the max-width to a unit you prefer.

Let us know if this works!

[Author]

Posts