Support » Plugin: Custom Related Posts » Different display on desktop and phone

  • Resolved szopik75

    (@szopik75)


    Hello,
    Is it possible to display custom related post
    • on desktop and tablet: as an ordered list, image above the text
    • on the phone: display normal, image floated left?
    Please let me know how to do it. I will be grateful for help.

    Best regards,
    Kasia Burek

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Brecht

    (@brechtvds)

    Hi Kasia,

    We don’t have that option built into the plugin but you should be able to achieve something like that with custom CSS code.

    You’d use media queries to target mobile/desktop only.

    I do not have an example right now, I’m afraid, but technically it’s definitely possible.

    Thread Starter szopik75

    (@szopik75)

    Hi Brecht,
    thank you for the information.

    Best regards,
    Kasia

    Thread Starter szopik75

    (@szopik75)

    I managed to do it. There are probably bugs here and I would be grateful for a correction 🙂 But it works as I wanted. Maybe it will be useful to someone 🙂

    CSS code

    .crp-list-title {
    color: #c32017;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 2px solid #c32017;
    }
    .crp-list-item-title a {
    color: #111111;
    text-decoration: none;
    font-family: ‘Roboto’, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 15px;
    padding-top: 0px;
    }
    .crp-list-item-title a:hover {
    color: #c32017;
    }
    .crp-list-item .crp-list-item-image {
    padding-right: 21px;
    }
    /* responsive desktop */
    @media screen and (min-width: 1140px) {
    .crp-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    }
    }
    /* responsive landscape tablet */
    @media (min-width: 1019px) and (max-width: 1140px) {
    .crp-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    }
    .crp-list-item-image img {
    width: 200px;
    height: 150px;
    }
    }
    /* responsive portrait tablet */
    @media (min-width: 768px) and (max-width: 1018px) {
    .crp-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    }
    .crp-list-item-title a {
    padding-right: 10px;
    }
    .crp-list-item-image img {
    width: 150px;
    height: 100px;
    }
    }
    /* responsive portrait phone */
    @media (max-width: 767px) {
    .crp-list-item.crp-list-item-has-image.crp-list-item-image-above {
    flex-direction: inherit;
    }
    .crp-list-item-image img {
    width: 100px;
    height: 70px;
    }
    .crp-list-item-title a {
    font-size: 16px;
    line-height: 20px;
    padding-top: 0px;
    padding-left: 0px;
    }
    .crp-list-title {
    font-size: 12px;
    }
    .crp-list-item .crp-list-item-image {
    padding-right: 10px;
    }
    }

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.