only the image shows on Elementor page

  • Resolved Craig Reynolds

    (@mstrmndmaven)


    4 years, 4 months ago

    I am using the Latest Posts Shortcode on the bottom of the home page at wp.maryreynolds.com

    1. I got this wonderful display working on a SiteOrigin PageBuilder site using a SiteOrigin theme (Corp) [still viewable at https://new.maryreynolds.com ]
    2. I changed the theme to Zelle to get a better header – and broke everything.
    3. I started over with Elementor at a different wp installation: wp.maryreynolds.com to modify their Hello theme with my own header.

    I installed the Latest Posts Shortcode plugin on the new site and re-created the 3-column shortcode which had worked on the previous site (SiteOrigin Corp)

    The result is three columns showing only the Featured Image. No Title, Date or content. This is the case on both desktop and phone.

    PS: I made a small contribution – what I can afford right now as we are not in operation yet.

    The shortcode I’m using:
    [latest-selected-content limit=”3″ display=”date,title,content-small” titletag=”h5″ chrlimit=”360″ url=”yes” linktext=”Read more” image=”full” elements=”3″ css=”three-columns align-center ” type=”post” status=”publish” orderby=”dateD” show_extra=”category,hide_uncategorized_category”]

    The CSS you gave me to make responsive on smartphone:
    @media screen and (max-width: 1023px) {
    .latest-post-selection.three-columns article {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(–tablet-tile-gap);
    }
    }

    @media screen and (max-width: 600px) {
    .latest-post-selection.three-columns article {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(–mobile-tile-gap);
    }
    }

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Craig Reynolds

    (@mstrmndmaven)

    I just discovered that the text elements all show up in Tablet view (simulated by shrinking the browser size on my desktop.) The text is positioned to the right of the images (which doesn’t seem right, as I chose [image][title][text] format.) But then as I shrink it further, the text starts to disappear – while the images retain their original dimensions. I don’t know what this means, but the images seem to be crowding out the text.

    Plugin Author Iulia Cazan

    (@iulia-cazan)

    Hi Craig,

    This seems like an issue you could fix by setting some height to the tiles.
    Thou can do that in the shortcode

    
[latest-selected-content limit="3" display="date,title,content-small" titletag="h5" chrlimit="360" url="yes" linktext="Read more" image="medium" elements="3" default_height="580" css="three-columns align-center" type="post" status="publish" orderby="dateD" show_extra="category,hide_uncategorized_category"]

    If you don’t want to do that from the shortcode, you can add the style:

    
.latest-post-selection.three-columns article {
height: 580px;
max-height: 580px;
}

    Let me know if this helps.

    Regards,
    Iulia

    Thread Starter Craig Reynolds

    (@mstrmndmaven)

    Thanks for your reply! The CSS works. I apologize for putting you in the uncomfortable position of having to school me on responsive page building.

    I chose the CSS because I am likely to adjust the shortcode in response to the boss’ reviews of my work.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘only the image shows on Elementor page’ is closed to new replies.