[Resolved] Footer Area how to align to right shortcode with some text.

Home Forums Support [Resolved] Footer Area how to align to right shortcode with some text.

Home Forums Support Footer Area how to align to right shortcode with some text.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #634381
    bluebit

    So for my footer I have some copyright text aligned center, but I also want to add a visitor counter shortcode to the same area but align right, how do I do this?

    I don’t want to use footer widgets, just the bottom footer where the copyright text is located.

    #634425
    Leo
    Staff
    Customer Support
    #634858
    bluebit

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

    View post on imgur.com

    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?

    #634861
    bluebit

    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.

    View post on imgur.com

    #634866
    bluebit

    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.

    #634977
    Leo
    Staff
    Customer Support

    Have you solved this?

    Looks like everything align pretty good to me?

    #635040
    bluebit

    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 πŸ™

    #635314
    Leo
    Staff
    Customer Support

    I wonder if there just isn’t enough room.

    Usually 3 columns on mobile is too tight.

    Can you try 20-60-20?

    #635360
    bluebit

    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?

    #635649
    Leo
    Staff
    Customer Support

    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

    #636391
    bluebit

    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

    #636477
    Leo
    Staff
    Customer Support

    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.

    #636523
    bluebit

    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.

    #636605
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #636675
    bluebit

    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.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.