David Miller5 said:Hey everyone,
So, I’ve got this WordPress blog and I was trying to add a custom container with an image and some text right under the header.
I couldn't figure it out on my own, so I ended up hiring a freelancer. But honestly? The guy seems to have zero clue how to make the container and the image responsive to match the rest of the site. The template itself is actually pretty clean and well-coded, so there isn't an issue with the theme—it's just this specific section we added.
The image in that new container gets all distorted on iPads, even though it looks fine on mobile and desktop (though the desktop view breaks at certain breakpoints).
I've been grinding away on this with this freelancer all day long now, and I am seriously losing my mind. Can anyone with actual experience help me out??
You're using some interesting terminology there, so let's break it down...
-
responsive = reactive (meaning if a div isn't responding, it won't react to a click)
-
distorts = ruins or breaks
First off, it's pretty common knowledge that without seeing the actual code, we can't do much for you.
1. If `` isn't reacting or is "unresponsive" as you put it, the reason might be that this div is nested within a template built entirely of other divs. However, you could try adding this argument to your style.css specifically for that problematic container:
Code:
div.container { z-index: 999; } and/or { position: absolute; } or both: div.container { position: absolute; z-index: 999; }
That might do the trick. If that doesn't work (after a refresh), it likely means there's a group of containers sitting over yours that are being managed by a JS library (like a hover-dropdown menu), which has essentially set a rule that no other div can sit visually above the dropdown menu—which is actually standard practice. In that case, the dropdown menu would become
unresponsive and you wouldn't be able to navigate the site. Or, there's just another series of high-priority divs with a higher z-index assigned to them.
The issue you're dealing with isn't really something that can be solved through a forum post or even via a quick freelance gig. To actually fix this, we'd need direct access to the site's control panel. 😁
2. A
distorted image usually happens when the dimensions (the actual pixel size) are being forced to change via CSS arguments:
Code:
div.container.image { width: px; height: px; }
So, if the natural size of the image is 100x100px, but the code says: width:90px; height:90px;, then on certain devices, that image is going to look
distorted. This is especially true if the original dimensions don't align with the mathematical aspect ratio, leaving the browser to try and calculate the height based on the specified width on the fly.
Code:
div.container.image { width: 90px; }
So, if the height ends up being something like, say, 89.5px—just speaking hypothetically here—then we really need the container size to be dictated by the image's actual dimensions, rather than trying to force the image to fit into whatever size arguments the container provides.
Honestly, even today, after moving past those old IE days and surviving over twenty years of the internet and evolving browsers, you still run into these quirks in certain cross-browser environments, or maybe even when dealing with Safari on an iPad.
The bottom line is: don't waste your time fighting a losing battle.🙂 I’m guessing the freelancer did their best working purely through email, but if they were going to actually nail this, they would have needed direct access to the .js files or whatever specific libraries are loaded into the site's header—basically, they need to be connected to that specific template.
It’s not a massive task, but things always get tricky, especially when you're messing with a float-container. If you want to hunt down some fixes or alternative workarounds, your best bet is probably digging through StackOverflow. Just keep in mind that if you keep the code under wraps, nobody is going to be able to help you out, and if you're asking me personally, there's really nothing in WordPress code worth guarding like a state secret.
To fix any of this, we're going to need admin access to the site's control panel. If you're looking for a simpler workaround or a totally different approach, you might have to figure that one out on your own.Note: all the HTML element names used in this post are just made up.
