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

[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!

[Leo]

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 🙂

[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!

[Leo]

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

Otherwise it looks good!

[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!!!!

[Leo]

No problem 🙂

[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

[David]

Hi there,

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

[Author]

Posts