images with caption, not resizing on mobile

Community Forums Forums Design Tips and Tricks images with caption, not resizing on mobile

This topic is: not resolved

This topic contains 6 replies, has 6 voices, and was last updated by  NancySeeger 1 year, 1 month ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #25818

    Reinaldo Miguel
    Participant
    Post count: 15

    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.com/forums/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/

    #25965

    dabyrom
    Participant
    Post count: 17

    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.

    #26084

    Reinaldo Miguel
    Participant
    Post count: 15

    @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.

    #37283

    PhaseCreative
    Participant
    Post count: 15

    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

    #46356

    Rob Shambaugh
    Participant
    Post count: 5

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

    #46413

    Multimastery
    Participant
    Post count: 3

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


    #48275

    NancySeeger
    Participant
    Post count: 4

    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

    • This reply was modified 1 year, 1 month ago by  NancySeeger.
    • This reply was modified 1 year, 1 month ago by  NancySeeger.
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.