Constrain max width of shortcode caption object

[jborum]

On this page there is an image for which I used your [caption] shortcode, and the <div> your shortcode created is behaving strangely.
http://staging.jeremyborum.com/author/

Most of the time it looks fine, but on very small mobile screens the image takes up so much space that the text is extremely cramped and reads like this:

I tried to constrain it with these but was unsuccessful. I think your shortcode function overwrites my CSS, but perhaps I got the CSS classes wrong.
.wp-caption { max-width: 45% !important; } .wp-caption.alignright { max-width: 45% !important; } div .wp-caption { max-width: 45% !important; } div .wp-caption.alignright { max-width: 45% !important; }

Also, please see this screenshot. When on a large screen, when I change the max-width in the inspector it makes the div bigger and the margins become huge. The max-width property is supposed to only constrain size, not enlarge it.

How can I constrain X’s shortcode-generated wp-caption elements to never consume more than 45% of screens, but leave them unaffected otherwise? I thought max-width was the right solution, but it hasn’t worked for me.

Thanks.

[ruenel]

Hello There,

Thanks for posting in!

• Please be advised that we do not have [caption] shortcode built in the theme. This shortcode is a WordPress native. You can find out more about this in the codex: https://codex.wordpress.org/Caption_Shortcode

• The maximum width contraints the width of the element which is perfectly working. The empty spaces is the result of the width of the image. You must also set the width of the image to go as wide as the constraints of the image container. To resolve this, you will need to add this code:

.wp-caption img,
.wp-caption .wp-caption-text {
    width: 100%;
    max-width: 100%;
}

• And to make sure that it is much readable in smaller screens, you may also add this code:

@media (max-width: 480px){
  .wp-caption {
    width: 100% !important; 
    max-width: 100% !important; 
  }
}

Hope this helps.

[jborum]

Thank you. That didn’t directly solve my problem, but it helped me to find the solution.

max-width overrides width, but it becomes the main setting if no width is set. I think there was no width value on .wp-caption, and that’s why the container was expanding to my max-width value even though the image was smaller. When I gave it a value for width it stopped creating all the white space and max-width then worked as expected.

[ruenel]

Hey There,

It’s good to know that helped in resolving your issue.
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.