🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] Footer to be one line full width and three lines mobile?

Home Forums Support Footer to be one line full width and three lines mobile?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1148527
    Grant

    Hey I am trying to make a nice footer and could use some direction… I have placed the following code into the footer module and would like to make it so that it is one line on desktop or tablet and then three lines on mobile. Basically I don’t want
    the word wrap to cause
    the lines
    to break
    up
    oddly…

    %copy% 2020 grantdb <br> Powered by <a href="https://wordpress.org/" target="_blank" rel="noopener">WordPress</a><br>Theme by <a href="https://generatepress.com/" target="_blank" rel="noopener">GeneratePress</a>

    Is what I have so far, but it looks great on mobile but too tall on desktop/tablet.

    Any tips?

    Thanks!

    #1148536
    Leo
    Staff
    Customer Support

    HI there,

    I think the easiest way would be adding that message twice and use the built-in hide-on class to hide one or another depending on the device:
    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    Let me know if this helps 🙂

    #1148556
    Grant

    Awesome! Hows this look? It works well but all good?

    <div class="hide-on-desktop">
    %copy% 2020 grantdb <br> Powered by <a href="https://wordpress.org/" target="_blank" rel="noopener">WordPress</a><br>Theme by <a href="https://generatepress.com/" target="_blank" rel="noopener">GeneratePress</a>
    </div>
    <div class="hide-on-mobile">
    %copy% 2020 grantdb - Powered by <a href="https://wordpress.org/" target="_blank" rel="noopener">WordPress</a> - Theme by <a href="https://generatepress.com/" target="_blank" rel="noopener">GeneratePress</a>
    </div>

    Thanks!

    #1148568
    Leo
    Staff
    Customer Support

    You would want to add hide-on-tablet to one of the div as well.

    Otherwise it looks good!

    #1148576
    Grant

    Haha it showed both layouts on my tablet… Just for the sake of this thread here is the final code that I am using…

    <div class="hide-on-desktop hide-on-tablet">
    %copy% 2020 grantdb <br> Powered by <a href="https://wordpress.org/" target="_blank" rel="noopener">WordPress</a><br>Theme by <a href="https://generatepress.com/" target="_blank" rel="noopener">GeneratePress</a>
    </div>
    <div class="hide-on-mobile">
    %copy% 2020 grantdb - Powered by <a href="https://wordpress.org/" target="_blank" rel="noopener">WordPress</a> - Theme by <a href="https://generatepress.com/" target="_blank" rel="noopener">GeneratePress</a>
    </div>

    Thank you!!!!

    #1148578
    Leo
    Staff
    Customer Support
    #1197843
    Grant

    I am getting an optimization suggestion:

    22 images are being stretched in the browser

    regarding my footer images from the above code, any suggestions? Should I just ignore this?

    Thanks!

    Grant

    #1198217
    David
    Staff
    Customer Support

    Hi there,

    If thats related to your social icon images then yeah its safe to ignore.

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