Navigation
Archive / Captions under photos & narrower columns. Lightbox?
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • June 7, 2016 at 4:58 pm #1030746
    heresjohnnee
    Participant

    Hello. I’m trying to create two rows of photos on my home page, all displayed the same size, and with less space between them. I’ll post URL privately.

    I’ve tried block grid and lightbox shortcodes and cannot get caption text to appear immediately under the photo. What would you advise?

    June 7, 2016 at 4:59 pm #1030750
    heresjohnnee
    Participant
    This reply has been marked as private.
    June 8, 2016 at 4:08 am #1031505
    Lely
    Moderator

    Hi There,

    Thanks you for the URL.
    We can use columns. Add a section then set the number columns. On each column, add image element and then custom headline.

    Hope this helps.

    June 8, 2016 at 7:58 am #1031755
    heresjohnnee
    Participant

    This does not help. The text needs to be IMMEDIATELY underneath the photo like a CAPTION. Did you see the example page I inlcuded?

    June 8, 2016 at 8:00 am #1031758
    heresjohnnee
    Participant

    AND, the columns need to be NARROWER.

    June 8, 2016 at 9:39 am #1031950
    heresjohnnee
    Participant

    I have adjusted the page using columns and custom headlines. I have assigned class “mbn” to the images in order to bring the bottom of the image and the top of the custom headline closer together.

    Now, how can I add 5px space between the two so there’s a small gap?

    June 8, 2016 at 12:21 pm #1032296
    Joao
    Moderator

    Hi There,

    You can add on your image style box: margin-bottom: 5px;

    Hope that helps,

    Joao

    June 29, 2016 at 7:26 pm #1065746
    heresjohnnee
    Participant

    I’ve added margin-bottom: 5px; per your recommendation and it doesnt work. Please note the image is produced via shortcode within a text element.

    I just want the text to be right underneath the picture and be able to control their distance from one another by using a px value. I want to keep the thumbnail frame around the image.

    Please let me know if I’m being unclear about my objective. I feel like I keep saying the same thing in different ways. So, if it’s me…let me know!

    June 30, 2016 at 12:31 am #1066200
    Lely
    Moderator

    Hi There,

    Please check this video screencast:http://screencast-o-matic.com/watch/cD1vhTit8h
    As you can see, I have added mbn on the image class field to remove the default bottom margin. Then for the custom headline, I have added mtn to remove default top margin. In case you want a space between those 2 elements, replace mtn class of the custom headline with mts. See this link for definition:https://community.theme.co/kb/css-class-index/

    In case you don’t want to add class, you may just add GAP element with size 5px between image and custom headline.

    Hope this helps.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1030746 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>