Not displaying correctly on Mobiles

Tim Brocklehurst
Tim Brocklehurst used Ask the Experts™
on
Can you tell what is preventing this website from displaying correctly on mobiles?
https://azfreight.club
I am aiming to launch it very soon, but really need to iron out this responsive CSS problem before I do.

Can you tell from your web console what the issue is? - otherwise I can give you access to the CSS and JS files.
It is a WordPress site using custom plugins and a custom child theme.
Thanks for your help.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
AlexiosSEO Expert | IT Professional

Commented:
Hi Tim,

Your website needs improvement in several aspects.
Further than the mobile version has not a fully responsive design, for example the logo should always interlink at the home page.

I am suggesting doing a full audit from a developer for finding all aspects that needs improvement, it will require more than just a couple of CSS strings.

Regardless on the above I strongly suggest that you should run a thorough SEO audit because at first glance the website needs a lot of improvement in many SEO factors, (e.g the meta description is missing from the land page)
Tim BrocklehurstHead of Digital

Author

Commented:
Thanks for that Alexios
And yes, you're right. There are numerous issues with the site still. However, the responsive aspect is one which is most pressing for launch, and one I especially require help with. I can audit and deal with most others myself.
I have just added a link back to the homepage from the logo (thanks for that).

If you have any pointers for how I can fix the responsiveness on Mobiles, I would welcome it.

Thanks again
Tim
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Starting off with a responsive site is typically more difficult the first time around because there is a lot to wrap your head around. There really is no easy way to just fix responsive issues.  The best thing to do is attack each item one by one and not to try and focus on everything at once.

Start by making a list of things you are finding that are not working as expected.  Then just ask a separate question here for each one. Sometimes fixing one thing will fix others, but if you have a lot of custom code, it is hard to say.  If you are using something like elementor for instance that has it's own responsive utilities and that is paired with a theme that also has it's own responsive utilities, add to that the ability to customize both the builder and theme within the plug in/theme along with custom css in the child theme, there are a lot of possible points of failure.

I would start with a list of things you find that are wrong, then post a specific question for each.
Head of Digital
Commented:
Thanks Scott...
Yes. This is a good approach indeed. And it makes a lot of sense.

I had been designing this website with mobile in mind right from the start, and so I was surprised when it no longer fitted on a portrait mobile screen. And then a bit frustrated when I couldn't decipher from the console, which element it was that stretched it beyond the window width.

I have now found the offending element however ('.mapIntro'). It was one which had a specified css width of 728px in order to accommodate a banner ad of that size. Changing it to 100% or 100vw has solved that, but also meant the ad doesn't display on mobile devices.... so now I just need a solution to that problem, but I think I can find it.

Many thanks for all your help and input. I have now found the solution myself.

Best wishes
Tim

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial