aligning grid content to the right

[Joe Sharples]

Hi guys,

How do I align the content of a grid cell to the right?

I have a grid in the header with 1 row and 3 columns.
in the first column i have a button that, by default, is aligned to the left.
the middle column has a label with the text centred.
in the 3rd column I have a 1x1 grid with an image inside it. By default the grid is aligned to the left.

I want the grid in the 3rd column to align to the right so that it stays the same distance away from the right side on all sized devices.

[Yurii Orishchuk]

Hi Joe,

Please use following CSS code in CSS asset:

pre

/* where "mobilegridcell_322" is your grid cell in which you want to align content. */
[name="mobilegridcell_322"] .cell-wrapper{
float: right;
}

/pre

Regards.

[Joe Sharples]

Hi Yurii,

Thank you, this worked perfectly.

A follow up question:
For a few headers instead of having a label in the middle cell, i have an image.
How do I center an image, float: center does not work, do you have a work around?

Thanks

[Evgene Karachevtsev]

Hello Joe,

Could you please try to add a weight to this rule? For example with code!important/code ?

[Joe Sharples]

I did, but it appears that float: center can't be done.

[Joe Sharples]

Figured it out...
pre
Appery('componentName').css('margin-left', 'auto');
Appery('componentName').css('margin-right', 'auto');
Appery('componentName').css('display', 'block');/pre

where 'componentName' is the name of the item you want centred

[Aeneas McBurney]

I have an image in a 1x1 grid cell which I want centred hoizontally. I have tried using the above code on the image component and also the grid cell component but it still shows to the left of the gridcell. I am doing on pageload event.

Any ideas?

[Evgene Karachevtsev]

Hello Aeneas,

Could you please check that you don't have any other rules for this components that may have higher priority?

[Aeneas McBurney]

The image is in a grid cell with auto width and 30px height. The grid dimensions are auto height and width. The image itself is 236px width and 118px height.

On load I am running this with mobilegridcell_89 being the cell the image is in.

Appery('mobilegridcell_89').css('margin-left', 'auto');
Appery('mobilegridcell_89').css('margin-right', 'auto');
Appery('mobilegridcell_89').css('display', 'block');

Its not centering?

[Alena Prykhodko]

Try this

preAppery('mobileimage_x').css('margin-left', 'auto');
Appery('mobileimage_x').css('margin-right', 'auto');/pre

mobileimage_x - image component name