Urgent: Mobile View Overlapping

Hi guys,

My Wordpress/Woocommerce site (www.gadjetsupply.com) seems to be overlapping a lot of my items in Mobile view. On desktop view it looks normal:



In Mobile view, the product image size is slightly increased, and it also covers some of the Text, Rating, Price, and the View Product button:



In Tablet view, it is even worse - the images are resized so big that it covers all of the text:


Is there any way to stop this from happening and to make all of the text show normal on mobile view?

Thanks a lot guys!

 

Well, given that it's turdpress, filled with goofy design elements (like that dirty damned floating social media garbage) that are not going to be responsive in the first place, it's a disaster to even try and diagnose. A disaster made worse by the OOCSS "let's throw classes on EVERYTHING" and "Semantic markup, what's that?"

My advice would be to pitch that entire mess in the trash and start over. You've got 100k in markup ALONE to deliver maybe two dozen content images and 2.9k of plaintext, EASILY as much as ten times the HTML that should have been used on such a simple layout. It would take more time to pull turdpress' head out of it's backside, hack woocommerce to stop vomiting up code WORSE that what turdpress does, and build an entire system from scratch than it would to endlessly throw silver bullet fixes at a mess that to be brutally frank, just feels sleazed together any-old-way with off the shelf parts by people who don't know enough about HTML, CSS, or JavaScript to be building websites in the first place.

Sorry if that seems harsh, but your result is entirely inline and within expected norms for the tools you have chosen.

 

Honestly, I think it has something to do with the devices you're using. Nothing overlaps on my cell phone or iPad mini. Looks completely normal.

 

REALLY? Because it's a utterly and completely busted MESS here across multiple devices, including desktop... which is why I said toss it.

MOST of what's biting him being that multiple elements have fixed heights assigned to them, chopping off their own content at different sizes and resolutions.

 

That's really strange. iPhone 6 and 6S tend to make things look different, but you're not using that either. I don't know what's going on. It looks more like the first pic on my cell phone:


But if it looks screwy on whatever you're using it means the whole thing needs to be redone then, I agree. It has to be consistent.

 

Thanks for the responses guys, but the problem is still present. Any more help on this would be greatly appreciated!

 

If it's still there, may I assume you haven't taken @deathshadow's advice and pitched what you have? There just isn't a silver bullet that will fix what you have. It may appear to be fixed, but its underlying code will eventually find another opportunity to bite you on the butt. Follow ds's advice and you will end up with a site that is easy to use on any UA plus be robust, easier and cheaper to debug and maintain.

gary