Responsive footer for mobile phones

Hi,

I have a fixed footer on the following website;

https://sen-seis.com/dev/

I would like to be able to change the contents of the footer if the website is accessed from a mobile phone.

Is there a way to amend the footer.php file to only display certain parts of the footer if using the mobile. The code is;

<footer id="colophon" class="site-footer" role="contentinfo" <?php sydney_do_schema( 'footer' ); ?>>
Copyright <?php echo date('Y'); ?> © Sen Seis. All rights reserved
07368 647489
	 <a href="https://www.instagram.com/senseis._/" >  <svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24" fill="#069146"><path d="M12 0c6.6274 0 12 5.3726 12 12s-5.3726 12-12 12S0 18.6274 0 12 5.3726 0 12 0zm3.115 4.5h-6.23c-2.5536 0-4.281 1.6524-4.3805 4.1552L4.5 8.8851v6.1996c0 1.3004.4234 2.4193 1.2702 3.2359.7582.73 1.751 1.1212 2.8818 1.1734l.2633.006h6.1694c1.3004 0 2.389-.4234 3.1754-1.1794.762-.734 1.1817-1.7576 1.2343-2.948l.0056-.2577V8.8851c0-1.2702-.4234-2.3589-1.2097-3.1452-.7338-.762-1.7575-1.1817-2.9234-1.2343l-.252-.0056zM8.9152 5.8911h6.2299c.9072 0 1.6633.2722 2.2076.8166.4713.499.7647 1.1758.8103 1.9607l.0063.2167v6.2298c0 .9375-.3327 1.6936-.877 2.2077-.499.4713-1.176.7392-1.984.7806l-.2237.0057H8.9153c-.9072 0-1.6633-.2722-2.2076-.7863-.499-.499-.7693-1.1759-.8109-2.0073l-.0057-.2306V8.885c0-.9073.2722-1.6633.8166-2.2077.4712-.4713 1.1712-.7392 1.9834-.7806l.2242-.0057h6.2299-6.2299zM12 8.0988c-2.117 0-3.871 1.7238-3.871 3.871A3.8591 3.8591 0 0 0 12 15.8408c2.1472 0 3.871-1.7541 3.871-3.871 0-2.117-1.754-3.871-3.871-3.871zm0 1.3911c1.3609 0 2.4798 1.119 2.4798 2.4799 0 1.3608-1.119 2.4798-2.4798 2.4798-1.3609 0-2.4798-1.119-2.4798-2.4798 0-1.361 1.119-2.4799 2.4798-2.4799zm4.0222-2.3589a.877.877 0 1 0 0 1.754.877.877 0 0 0 0-1.754z"/></svg>	</a href>

  <a href="https://www.google.com/maps/place/Sen-Seis+Massage+Therapy/@51.5969996,-0.284717,15z/data=!4m5!3m4!1s0x0:0x62567b567dd73a63!8m2!3d51.5970056!4d-0.2847197">
	<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24" fill="none" stroke="#069146" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="10" r="3"/><path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z"/></svg>   
	   </a>

  <a href="https://wa.me/447368647489">
	<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24" fill="#069146"><path d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24zm.14 4.5a7.34 7.34 0 0 0-6.46 10.82l.15.26L4.5 19.5l4.08-1.3a7.38 7.38 0 0 0 10.92-6.4c0-4.03-3.3-7.3-7.36-7.3zm0 1.16c3.41 0 6.19 2.76 6.19 6.15a6.17 6.17 0 0 1-9.37 5.27l-.23-.15-2.38.76.77-2.28a6.08 6.08 0 0 1-1.17-3.6 6.17 6.17 0 0 1 6.19-6.15zM9.66 8.47a.67.67 0 0 0-.48.23l-.14.15c-.2.23-.5.65-.5 1.34 0 .72.43 1.41.64 1.71l.14.2a7.26 7.26 0 0 0 3.04 2.65l.4.14c1.44.54 1.47.33 1.77.3.33-.03 1.07-.43 1.22-.85.15-.42.15-.78.1-.85-.02-.05-.08-.08-.15-.12l-1.12-.54a5.15 5.15 0 0 0-.3-.13c-.17-.06-.3-.1-.41.09-.12.18-.47.58-.57.7-.1.1-.18.13-.32.08l-.4-.18a4.64 4.64 0 0 1-2.13-1.98c-.1-.18-.01-.28.08-.37l.27-.31c.1-.1.12-.18.18-.3a.3.3 0 0 0 .01-.26l-.1-.23-.48-1.15c-.15-.36-.3-.3-.4-.3l-.35-.02z"/></svg> 
	   </a>
  </td>	  
</tr>
	</table>
</footer><!-- #colophon -->

Hi,

Thank you for reaching out to us. I am happy to help with your queries.

To help me get the better context, please provide:

  • Current issue with the footer part on mobile.
  • A mockup/raw design of your footer when it is on mobile screen.

Regards,
Kharis
aThemes Support

[https://sen-seis.com/dev/wp-content/uploads/2021/08/chrome_screenshot_1629711517699.png]

There are two issues;

  1. The footer background appears grey on my mobile but white on the desktop. How do I make the footer background white on mobile?
  2. On the mobile screen, I would only like the following text to appear in the footer; “Copyright 2021 © Sen Seis. All rights reserved”

I’m relatively new to wordpress and still learning the ropes, so not sure where I should be amending the CSS.

Thanks in advance

Hi,

Thank you for sharing the link. Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {

      .site-footer {
        background-color: #ffffff;
      }

      .site-footer table td:nth-of-type(1) {
        column-width: 100%;
      }

      .site-footer table td:nth-of-type(2),
      .site-footer table td:nth-of-type(3),
      .site-footer table td:nth-of-type(4) {
        display: none;
      }
      
    }

Regards,
Kharis
aThemes Support

Hi, Thanks for your help, that works perfectly for the tablets and mobiles.

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support

This post was flagged by the community and is temporarily hidden.

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support