Featured image centering problem when I override the alignment class for mobile

[leighm]

On my homepage I'm using the Genesis featured post widget to display a particular post. I've set the alignment to left on the featured image, and it floats left. When the viewport gets smaller and smaller, it gets to a point where I want to remove the left alignment so the text drops below the image. I can do this using CSS, and I'm able to remove the float.

The problem is that I want to center align the image above the text, but because the image and the text are in the same div, whenever I set it to text-align: center, it centers the text too.

Is there any way to wrap the featured in an extra div so I can set the text-align: center on that div and not the paragraph? If not, is there any solution to this?

Thanks,

Leigh

[joycegrace]

Have you tried making your CSS more specific? Like only applying the center change on the media query to your image, like applying it to the img tag? Or the image link? Or you could apply it to just the p tag? or whatever html the text uses?

I don't recommend you do this, but you can also apply the css to the ID of the image, if you can get it from your browser's inspect element tool, or firebug.

But that would mean you'd have to update your CSS every time you change that one featured image.

Sorry if this is not really an answer for you.

You should definitely post a link to your site so people here can help.

---

Find me at Joyce Grace (http://www.joycegrace.ca)

[leighm]

Hi Joyce,

Thanks for your reply. Unfortunately, I'm working on this locally, so can't show you the site.

When I target that a tag with text-align, it doesn't work. However, if I wrap that a tag in a div and text align that div to center, it works.

This doesn't work:

<a style="float: none;" href="http://localhost/smcu/threaded-comments/" class="alignleft" aria-hidden="true"><img style="" src="http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test.jpg" class="entry-image attachment-post" alt="Sample Post With Threaded Comments" itemprop="image" srcset="http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test-150x150.jpg 150w, http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test.jpg 300w" sizes="(max-width: 300px) 100vw, 300px" height="300" width="300"></a>

This does:

<div style="text-align: center;"><a style="float: none;" href="http://localhost/smcu/threaded-comments/" class="alignleft" aria-hidden="true"><img style="" src="http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test.jpg" class="entry-image attachment-post" alt="Sample Post With Threaded Comments" itemprop="image" srcset="http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test-150x150.jpg 150w, http://localhost/smcu/wp-content/uploads/2013/05/circle-image-test.jpg 300w" sizes="(max-width: 300px) 100vw, 300px" height="300" width="300"></a><div>

So, is there any way for me to edit the mark up so that I can wrap the a tag in div?

Thanks.

[Author]

Posts