1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Image styling in Extra or custom CSS?

Discussion in 'Free Divi Community Forum' started by ChristineAZ, Jul 4, 2022.

  1. ChristineAZ

    ChristineAZ New Member
    Pro Member

    I'm still very confused about what to do in Extra and when to use CSS.

    How do I make FEATURED images smaller and how do I add captions?

    I tried https://wpsocket.com/plugin/fsm-custom-featured-image-caption/ but it's experimental for Divi and was not working for me, captions didn't show up.

    And I'd like to see more space at the bottom of images:

    https://highdesertpermaculture.org/2022/06/05/june-garden-pictures/

    Added CSS:

    img {
    padding-bottom: 15px;

    }

    That increased the space below featured images on the home page, which I do NOT want, and it didn't do anything in the post.

    Changed to .entry-content, but that added space between the image and the caption. How do I add space BELOW the caption?

    Thanks again!
     
    #1 ChristineAZ, Jul 4, 2022
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Are you referring to this spacing:

    upload_2022-7-5_18-4-31.png

    If you use browser inspect tool (F12), you will see that it's using this CSS Class: wp-caption

    upload_2022-7-5_18-6-7.png

    Use this to select the area that you want in browser inspect tool:

    upload_2022-7-5_18-13-11.png

    And to make your CSS only affecting your blog page, you will need this parent CSS Class in body tag: single

    upload_2022-7-5_18-7-22.png

    So the CSS that you need would be:
    Code:
    Log In or Sign Up to view this code.
     
    #2 Divi.Help, Jul 5, 2022
(You must log in or sign up to post here.)