images with caption, not resizing on mobile

[Reinaldo Miguel]

HI,

I like to know if there is a way to fix the following.

I'm using image files with captions in a post and the images are not resizing on my iphone. If I remove the caption The image files resizes with no problem.

In searching this topic, I came across this post on the forum http://www.studiopress.community/topic/design-tip-metro-image-captions/

But I'm not able to grasp the concept since I'm new to css?

Has anyone been able to find a fix for this? Would you like to share it?

Thank you for the help.

R.Miguel
please find the post here:
http://www.toolsandapplications.com/launch-center-pro-tip-send-group-email-from-iphone/

[dabyrom]

Hi,

Go into you CSS stylesheet and on line 1832 is where the responsive design code begins.  There are 3 different responsive size options.  960px, 600px and 480px.  You will need to decide which of these sizes you want to adjust for.  Let's assume it's only an issue at the two smaller sizes.

Go to line 2013: @media only screen and (max-width: 600px)

Drop down a couple lines and add:

.wp-caption {
width: 50% !important;
}

That should make it responsive for both 600px and 480px but if not, add the code again under the @media only screen and (max-width: 480px)

Of course you could add the code under 960px option if desired.

You can also adjust the width percentage to whatever you want.  So instead of "width: 50% !important;" you could do 33% or whatever your heart desires.

[Reinaldo Miguel]

@dabyron

Hi, Thank you for taking the time to help me. That did it! Your explanation was right on point.

Cheers, R. Miguel

This thread can be close, thank you.

[PhaseCreative]

I know the thread is closed, just wanted to express my gratitude to you sharing this fix. Sometimes it's the little things!

Thank you.

---

Based in Sydney, I design and produce creative websites for small business and enthusiastic bloggers. Follow on twitter

[Rob Shambaugh]

This was very helpful. I'm using the Minimum theme, set the width to 85% and it looks great. Thanks for the tip.

[Multimastery]

Glad I found this thread, sure saved me a lot of time & frustration. Thanks!

---

Web Content Writing Services

[NancySeeger]

Hi All,

Sorry I didn't find that to properly size the images, it was making the captioned images 50% for all the mobile sizes. To best address the problem (applied to the Executive theme) is to give it the max-width it is looking for:

.wp-caption {
max-width:100%!important;
}

I also set the padding to 0px for captions.

Kind regards,
Nancy

[Author]

Posts