max-width: 100%

  • Resolved jduin

    (@jduin)


    2 years, 8 months ago

    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 to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Jory Hogeveen

    (@keraweb)

    2 years, 8 months ago

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

    (@jduin)

    2 years, 8 months ago

    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:

    .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.
Viewing 2 replies - 1 through 2 (of 2 total)

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