Placing the logo central on the header on a mobile site

Hi all,

I was wondering if anyone could help me with an issue I can’t seem to work out how to do. I’ve been able to align the logo and the sidebar on mobile and tablet devices, however this has changed the aligning on the desktop when the browser is not opened fully. How can I ensure changes to the tablet/mobile don’t affect the desktop version. Furthermore, I am finding it difficult to position the logo perfectly central on the header on both the mobile and tablet versions. If anyone could help me solve this, would be hugely appreciated.

My website is



If you want to apply CSS only for tablets / mobiles please wrap your Custom CSS in @media screens, like this for example:

@media screen and (max-width: 1024px) {
  • 1024px is iPad’s landscape size, 768px portrait, so usually those 2 you will use more often, so below those sizes all devices will be affected by the Custom CSS, but larger devices like desktop won’t be affected.

Kind Regards,