Question

I am working on creating a WordPress post that will contain a google map. There is styling in the Theme on every image in a post setting the width to 540px. This is ruining the controls by squishing them. I need to find a way to change the style for just this post.

---

I styled the post by creating a stylesheet with JavaScript and set the correct value as important to override the image. This works but it makes it applies the max-width to all images.

<script>
//used to override the default max width style. If this is remove the control image will be squished into the default max-width set in the clf


var sheet = document.createElement('style')
sheet.innerHTML = "img {max-width:1029px !important;}";
document.body.appendChild(sheet);

</script>

I added the style with a custom field.

Answer 1

There are two methods.

The more proper way would be to use external stylesheets. If you view your post, then check it out in your dev tool of choice, you’ll see that your post content will be wrapped in a div containing the post id as the html id:

<div id="post-153484" ... ></div>

So you can have a style in your external stylesheet like:

#post-153484 img {max-width:1029px !important;}

Or the quick and dirty way which will work, but is perhaps not the best way of doing things would be to include styles within the body of the post. When editing the post in wordpress, change the view to html mode.

Then add some styles there:

<style>
    img {max-width:1029px !important;}
</style>