Featured Image Responsive

[John]

Hi,

I recently had a question of mine answered pertaining to making the featured image clickable to view the full size version. I did that successfully but I now have a different issue.

I want to wrap a paragraph around the image. So, my method has been to see the size of the image, and then set the width of the paragraph to the difference. For example, an image is 240px, the default width of the page is 1000px, so I set the width of the paragraph to 76%.

This works on displays with widths above 1000px, but on iPads for instance, the paragraph gets shifted below the image because the width of the display was reduced to 800px. I don’t have to worry about phones because I set the media query for them to make the width of the paragraph 100% because the featured image in my mobile theme is also 100% width

An example of this on my site is here: http://www.revrepublic.co/event/5-diner-friday-night-drags/2015-01-23/

My question then is, is there a way to assign a class to the featured image so I can set a max-width? Or is there a better method altogether?

Thanks,
John

[John]

It may help to view the thread of my previous question: https://theeventscalendar.com/support/forums/topic/clickable-featured-image/#post-928771

[Josh]

Hey John,

Thanks for reaching out to us.

I’m not sure I’m following the issue based on the example page. There are a couple of options you do have for prepping classes:

1. You could add a custom class to the image within the “get_the_post_thumbnail()” function used within the snippet by adding the additional class parameter.
2. You could wrap that entire snippet in a <p> tag (including the ) and add the class directly there. This might be the best approach since you could make the <p> 100% and then center the image within that field on mobile.

Let me know if this helps.

Thanks!

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts