Footer Area how to align to right shortcode with some text.

Hi there,

Try the footer bar widget area:
https://docs.generatepress.com/article/footer-bar-widget-area/

Then set the alignment to right:
https://docs.generatepress.com/article/footer-bar-widget-area/#footer-bar-alignment

That didn't work so I tried this which is kind of working:

https://imgur.com/a/eAnXJ1C

https://pastebin.com/wdE1iLX2

But on my iphone the right column is not working properly, I want the number on the same line as visitors and floated to the right side but have some padding like the left side where it says Contacto.

bundao.co

Do you think it might be better floating the first and third column to the left and right and adding padding or margins to the floated columns? If so, how would i do that?

I put the part in red here that looks bad on mobile, the number should be on the same top line not create its own second line. The number should be to the right of the word Visitors and hugging the perpendicular border like the word Contacto.

https://imgur.com/a/pxi1ffu

yea i think floating the left column text to the left and the right column text to the right might be a better idea as everytime I add/remove some text it changes everything and nothing aligns properly.

PS. I just changed the word Contato, which means Contact, to an envelope icon, as you can see its not properly aligned on both mobile and desktop.

Have you solved this?

Looks like everything align pretty good to me?

not aligned on mobile propery on the right side, also on Safari browser on the right same, the number should be to the right of the person icon, its on the bottom :(

I wonder if there just isn't enough room.

Usually 3 columns on mobile is too tight.

Can you try 20-60-20?

I just changed it to 20-60-20, have a look https://bundao.co/ nothing happened, still stays the same.The left side seems to be working, no idea why the number slips below to another line, maybe there is not border or padding there holding it back from falling to the bottom line?

Looks like it's working?

I resized the browser to the smallest possible and it's in the same line:
http://www.screencast.com/t/6Tcwcj4N

That's correct the number is to the right of the icon, but sometimes the number changes randomly its slips down at certain numbers, also its not aligned perfectly with the right edge, this is what I see https://imgur.com/a/J9mqgRu

There is something wrong. I need code that prevents the number from dropping down to the next line. I tried using the inspector in firefox to see whats going on, but don't understand the code. https://bundao.co

Did you turn off the responsive mode? That's likely why.

Try changing all the grid to 20-60-20 and not just mobile since there isn't a responsive mode.

Yes, I did turn off responsive mode with a snippet because I want the website to look the same way on mobile like it does on desktop.

You know whats weird, I just added an extra 3 padding for the footer padding on the right side to see what happens and now its fixed when viewed from safari and firefox on desktop.

Mobile right side still needs some tweaking, I'm thinking i might manually have to add some mobile/tablet padding on the right side of the footer even though responsive is disabled, how would I do this? Desktop version is fixed.

You can just add some padding with with media query:
https://docs.generatepress.com/article/responsive-display/

Let me know if you need help with the actual code. Or you can use the developer tool to see what they are :)

I just re-evaluated the bottom icon positions and concluded it looks fine like it is without the extra padding. Thanks for helping :) I'll mark this top as resolved.