Title: max-width: 100%
Last modified: September 17, 2023

---

# max-width: 100%

 *  Resolved [jduin](https://wordpress.org/support/users/jduin/)
 * (@jduin)
 * [2 years, 8 months ago](https://wordpress.org/support/topic/max-width-100-2/)
 * dear all,
 * Simple question: when using a Pods image field, the “max-width” is default set
   at the the width of the image in pixels. It would really help if I could set “
   max-width” for the image to 100%, to make sure the image will always fit within
   a surrounding column or box.
 * I’m missing the magic trick here… does anyone know how to set the “max-width”
   to 100% for a Pods image?
 * Cheers,
   Johan.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fmax-width-100-2%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [Jory Hogeveen](https://wordpress.org/support/users/keraweb/)
 * (@keraweb)
 * [2 years, 8 months ago](https://wordpress.org/support/topic/max-width-100-2/#post-17058606)
 * Hi [@jduin](https://wordpress.org/support/users/jduin/)
 * You are referring to CSS which should be added by yourself. Pods doesn’t include
   CSS for the frontend by default.
 * You should set the CSS properties based on it’s class selector. The selector 
   will depend on your way of using the image.
 * Cheers, Jory
 *  Thread Starter [jduin](https://wordpress.org/support/users/jduin/)
 * (@jduin)
 * [2 years, 8 months ago](https://wordpress.org/support/topic/max-width-100-2/#post-17058805)
 * Thanks Jory,
 * It seems I did something wrong with my CSS; for anyone struggling with the same(
   or a similar problem) I will show here what I did to solve the problem:
 * file: style.css (in my case part of the Ollie child theme)
 * In this file I added the following CSS code:
 *     ```wp-block-code
       .paddestoel-image img {
           box-sizing: border-box;
           height: auto;
           max-width: 100%;
           vertical-align: bottom;
       }
       ```
   
 * To actually use this extra CSS, you have to do one more thing.
 * _In my case, I’m creating my own template with the WordPress Site Editor. I’m
   editing a Single Post template for a Custom Post Type. This Custom Post Type 
   contains an image field. In my template, I want this image to fit in a column._
 * The last step to get everything together is to add “paddestoel-image” (my custom
   class name which I added to style.css) in the field for “Additional CSS CLASS(
   ES)”.
 * So: Site Editor | Block properties | Advanced | Additional CSS CLASS(ES) | paddestoel-
   image
 * And I’m happy to say that it now works 🙂
 * Cheers,
   Johan.
    -  This reply was modified 2 years, 8 months ago by [jduin](https://wordpress.org/support/users/jduin/).

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘max-width: 100%’ is closed to new replies.

 * ![](https://ps.w.org/pods/assets/icon.svg?rev=3286397)
 * [Pods - Custom Content Types and Fields](https://wordpress.org/plugins/pods/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/pods/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/pods/)
 * [Active Topics](https://wordpress.org/support/plugin/pods/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/pods/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/pods/reviews/)

## Tags

 * [image](https://wordpress.org/support/topic-tag/image/)
 * [styling](https://wordpress.org/support/topic-tag/styling/)

 * 2 replies
 * 2 participants
 * Last reply from: [jduin](https://wordpress.org/support/users/jduin/)
 * Last activity: [2 years, 8 months ago](https://wordpress.org/support/topic/max-width-100-2/#post-17058805)
 * Status: resolved