Static List Baseline icons moving above text on mobile

[VaporDave]

I saw a similar post about this with no solution. The Static List (Baseline) element as styled does not work on smaller viewports. The default green checkmark icon moves above the list text at this viewport size (as opposed to staying to the left of the list text as it should do and does do on desktop), please provide a solution.

Thanks!

[VaporDave]

Okay so the problem appears to be only on how the list is displayed in the Page Builder, it displays properly when actually viewed on mobile. Maybe fix how it’s displayed in Page Builder so people don’t think it’s not working?

[VaporDave]

Final note, the icons do move above text on mobile if Global Container is turned on, works fine on mobile with Global Container off

[tristup]

Hi David,

It is not clear if you are still facing the issue or not. Can you please confirm it once more?

Thanks

[VaporDave]

Hi, sorry, I know answering my own topic is frowned upon, yes, issue is cleared up, thank you

[ruenel]

Hi David,

Thanks for letting us know that the issue has been resolved.

Cheers.

[VaporDave]

Hi, glad you haven’t closed this topic as the issue has actually sprung up again.

My client showed me the issue on his phone and the same issue is happening, even with Global Container turned off for the List element.

This is the URL, please let me know if you need access to backend

Working SOS homepage – Tobias Read for Secretary Of State

[marc_a]

Hey David,

Thanks for reaching out again!

Upon checking the page on the mobile view, the icon and text are side by side it is not the icon on top then text below. ( See secure note for the image screenshot )

Thank you.

[VaporDave]

Yes, it would appear that is the case now, after I reduced the default size of the icon, which as you can see causes some of the icons to be too close to the text (such as the trees on the bottom of the screenshot you took).

The element as styled to the default parameters results in the icons being above the text on mobile (seemingly only on Android); is there another way to fix this issue other than the workaround I came up with?

Thanks,
Dave

[ruenel]

Hello Dave,

You can adjust the margins of the Figure DIV container element. Set the right margin to 1em or more to give some space between the icon and the text.

You will have to adjust all the Figure DIV elements on the lists.

Kindly let us know how it goes.