Archived topic
Copyright Goes On 2 Lines On Smaller Screens Even Though There is Lots of Room
10 replies · Started by Mary Pearson on September 7, 2017
I have 2 links in my footer. On the left is the copyright info and on the right is a link to my website. All looks good except on my iPad. Even though there is lots of room, the link on the right goes on a line below the line on the left.
How do I get both links to be on the same line on smaller screens please? Do I need to duplicate the css for @media?
My copyright code is:
CSS is
.grid-50.footer-left {
text-align: left; }
.grid-50.footer-right {
text-align: right; }
Thank you.
Hi there,
Try set up your divs like this:
<div class="grid-50 mobile-grid-50 footer-left">
If this doesn't work can you link me to the site?
I'm not exactly sure what you mean Leo. Can you please give me a few more instructions.
Right now you have this:
<div class="grid-50 footer-left">
%copy% %current_year% Winning Website Creations. All Rights Reserved.
</div>
<div class="grid-50 footer-right">
Powered by <a target="_blank" href="https://winningwebsitecreations.com/">Winning Website Creations</a>
</div>Try this:
<div class="grid-50 mobile-grid-50 footer-left">
%copy% %current_year% Winning Website Creations. All Rights Reserved.
</div>
<div class="grid-50 mobile-grid-50 footer-right">
Powered by <a target="_blank" href="https://winningwebsitecreations.com/">Winning Website Creations</a>
</div>No, that didn't work either. I have the issue on several sites. You can check it on https://bowmanvillegolf.ca. That's the one I just tried it on.
I keep changing the wording so that I know if I'm getting a new or cached page, and it's a new page.
Hmm looks like it's working to me? https://s26.postimg.org/mchghz1mx/2017-09-08_0901.png
Definitely making progress. When it didn't work on my iPad I just assumed it wasn't working on my iPhone. After I switched to Mobile View it worked perfectly on the iPhone, but it still doesn't work on my iPad, either Landscape or Portrait Views.
Try this instead:
<div class="grid-50 tablet-grid-50 mobile-grid-50 footer-left">
%copy% %current_year% Winning Website Creations. All Rights Reserved.
</div>
<div class="grid-50 tablet-grid-50 mobile-grid-50 footer-right">
Powered by <a target="_blank" href="https://winningwebsitecreations.com/">Winning Website Creations</a>
</div>More info here: https://docs.generatepress.com/article/creating-columns/#using-built-in-unsemantic-grid
YES!!!!! You are BRILLIANT!!!! Thank you so much Leo!!!!!
I SO appreciate your help with this!
Glad I could help!
ME TOO!!!!! ;-)
