Custom Theme Design - A little help please folks. :-)

Hi folks, I'm currently working on a custom theme for Open Cart version 2.3.0.1
My problem is that I've created and uploaded a new header and it works ok on a laptop but it's pretty much destroyed when I access my site using a mobile phone.

Any pointers would be greatly appreciated!
Thanks,

www.killercomicsfromouterspace.co.uk

well, you're trying the impossible, by use of a fixed size image, and inserting some
code in it as well. We have arrived in the Responsive Age of the Web,
better accept it and act accordingly.
Ernie

Hi Ernie, thanks for the reply. My techniques are certainly out dated as it's been at least 10yrs since I've worked on a website, lol.
Having looked at my design is there any way to make it work? and is it just the fixed image that's causing the problems?

Thanks.

Well, you probably tried to add an Imagemap / Hotspot to your Image,
but an imagemap, as I recall from long ago, bases on 'fixed' image size
Values, to work. And this does no longer function, since responsive
images are seldom displayed in their real sizes, and depending on the
Browser/Smartphone Resolution in size as well.

So, you may add this Banner, the regular way, and/or link it to somewhere as well,
but add the Value class="img-responsive" to the image Link, like shown below,
to make the Image 'shrink' automatically, depending on Screen Resolution Setting.
And place the Top Header Links below the Banner, or someplace else. Still, you have
to use a CSS-CLASS Value as well, to define the way, those links will display and look.
Otherways, you could use some Banner/Slideshow Function, to possibly add such links by
some JSON Coding, I assume, but I am less than a Newbie, when it comes to such. Good Luck
Ernie

Hi Ernie, I've headed over to w3schools.com and had a read up on responsive websites. I have a better understanding of where I'm going wrong. Looks like I need to take a few steps back and have a bit of a redesign on my header.

Thanks for your help, I would've still been scratching my head and staring blankly at the monitor if you hadn't replied.
Ill also add that code you wrote and see how that looks.

Thanks again, much appreciated!

Well, then just change the image size values, to match your Shop logo.png,
at least, if it's called this way !
But it's not that hard, to understand, it starts top-left, and ends bottom-right,
and there is no 'middle' or 'center' anymode, by nature of such things.At least,
outside of some 'given' frame, section, or table, as we used to use
So, it always 'breaks' if the total width- or height- value would exeed
max-limits, and this sometimes leads to funny Displays, like Category
- or Related- Sections, where Grid View Layouts sometimes look like
sh.. , because of this
Still, my old SIte was already responsive, without all that crap, much more
than a decade ago, and all strictly based on a whole range of tables...
But it took me ages, to get only the frame-around done...
jacob.ch
Good Luck
Ernie