Center image using flex

[logoglo]

Hi there, I have this css setup:

@media screen and (max-width:978px) {
  $el {
display: flex;
  justify-content: center;
   
  }

I want to also adjust the size of the image (this is to shrink it down on mobiles) I added width: 80% but then the alignment above fails, and it resorts back to left aligned.

How do I center it and adjust the size?

[friech]

Hi Gary,

Thank you for writing in, where did you put that custom CSS? Please note that we do not provide support for any customization.

Use the Column’s native Flexbox control instead to position your image inside that column.

If using the Flexbox inside the column is not possible. Place your image inside a Div element and use the Flexbox control of that div element.

Hope it helps,
Cheers!

[logoglo]

Ok, then let me rephrase, how do I center the image on a mobile only? I think if I do what you say, it does it for all breakpoints? I don’t want it centered on the desktop.

The css was put in the images css within cornerstone…

Also, I don’t think my request is “customization” I’m only asking how to add the correct css to that image to make it centered, and to scale the size down on mobiles only, I’d normally add, text-align:center, but it didn’t work.

Thanks.

[friech]

Hi @logoglo,

On the latest version, there is a new feature called Responsive Styles, you can set the Flexbox horizontal and vertical position per breakpoint.

More details about that new Responsive Style feature here.

Cheers,

[logoglo]

Awesome, I will check it out.

Thanks.