We're merging with GenerateBlocks! Learn more here.

[Resolved] Row/Box Styling

Please login to receive premium support.

Support for the free plugin can be found here.

Home › Forums › Pro Support › Row/Box Styling

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 17, 2021 at 7:13 pm #34697
    Shaun
    Participant

    Hi
    I am recreating this site https://www.epguidanceaustralia.com/blog-early-puberty here https://lyndal.websmall.net/all-posts/
    I want to style the new site in a similar way to the old site but as you can see I am failing miserably.

    Specifically, I need some help with:
    1. Images all being on the left-hand side rather than alternating
    2. Text taking up 75% of the space rather than 50%

    Cheers
    Shaun

    October 17, 2021 at 11:11 pm #34700
    elvin
    Moderator

    Hi Shaun,

    Try this CSS:

    @media (min-width: 560px) {
    section#wpsp-299.wpsp-row article:nth-child(even) .wp-show-posts-inner {
        flex-direction: row;
    }

    section#wpsp-299.wpsp-row .wp-show-posts-image.wpsp-image-left img {
        object-fit: cover;
        width: auto;
        height: 100%;
    }

    section#wpsp-299 .wpsp-card.wpsp-row .wpsp-content-wrap, 
    section#wpsp-299.wpsp-row .wp-show-posts-image {
        flex: 1 0 25%;
    }
}

@media (max-width: 559px) {
    section#wpsp-299.wpsp-row .wp-show-posts-image.wpsp-image-left img {
        width: 100%;
        height: auto;
    }

    section#wpsp-299 .wpsp-card.wpsp-row .wpsp-content-wrap, 
    section#wpsp-299.wpsp-row .wp-show-posts-image {
        flex: 1 1 100%;
    }
}

    Note: Image cropping will occur on smaller viewports to keep the aspect ratio.

    October 18, 2021 at 12:13 am #34717
    Shaun
    Participant

    Thx Elvin
    I am just waiting to hear back from the client if they are happy with image/text width ratio but it looks great to me. Any chance you could comment out the code so I can learn for the future?
    Cheers
    Shaun

    October 18, 2021 at 9:51 pm #34751
    elvin
    Moderator

    I’ve added comments on what the parts do.

    /* Media rule for larger mobile viewports to desktop viewports */
@media (min-width: 560px) {
    /* force all the image to go to the left side for "Row" card style */
    section#wpsp-299.wpsp-row article:nth-child(even) .wp-show-posts-inner {
        flex-direction: row;
    }
    /* Make image cover the entire space of its container. Note: Image cropping will occur on smaller viewports */
    section#wpsp-299.wpsp-row .wp-show-posts-image.wpsp-image-left img {
        object-fit: cover;
        width: auto;
        height: 100%;
    }
    /* Make the image wrapper occupy only 25% of the horizontal space */
    section#wpsp-299 .wpsp-card.wpsp-row .wpsp-content-wrap, 
    section#wpsp-299.wpsp-row .wp-show-posts-image {
        flex: 1 0 25%;
    }
}
/* Media rule for really small mobile viewports */
@media (max-width: 559px) {
    /* Make the image wrapper occupy only 100% of the horizontal space for stacking */
    section#wpsp-299.wpsp-row .wp-show-posts-image.wpsp-image-left img {
        width: 100%;
        height: auto;
    }
    /* Make the image wrapper occupy only 100% of the horizontal space for stacking */
    section#wpsp-299 .wpsp-card.wpsp-row .wpsp-content-wrap, 
    section#wpsp-299.wpsp-row .wp-show-posts-image {
        flex: 1 1 100%;
    }
}
    October 18, 2021 at 10:01 pm #34753
    Shaun
    Participant

    Thx Elvin
    Much appreciated.

    October 18, 2021 at 10:04 pm #34756
    elvin
    Moderator

    No problem. 😀

    October 19, 2021 at 5:16 pm #34771
    Shaun
    Participant

    Hi Again
    The page you helped me with was showing all posts. I am now starting to add category pages eg https://lyndal.websmall.net/for-parents-category/
    How do I modify the code for these pages?
    I understand it has something to do with the list code (eg the above category list has ‘wpsp_display( 313 )’ but I’m unsure how to combine the code so it applies to several (at least 5) category lists.
    Cheers
    Shaun

    • This reply was modified 1 year, 11 months ago by Shaun.
    October 21, 2021 at 12:35 am #34791
    Shaun
    Participant

    Just checking in again for help with the above

    October 21, 2021 at 1:31 am #34793
    elvin
    Moderator

    Something like this should work:

    /* Media rule for larger mobile viewports to desktop viewports */
@media (min-width: 560px) {
    /* force all the image to go to the left side for "Row" card style */
    section#wpsp-299.wpsp-row article:nth-child(even) .wp-show-posts-inner,
    section#wpsp-313.wpsp-row article:nth-child(even) .wp-show-posts-inner {
        flex-direction: row;
    }
    /* Make image cover the entire space of its container. Note: Image cropping will occur on smaller viewports */
    section#wpsp-299.wpsp-row .wp-show-posts-image.wpsp-image-left img,
    section#wpsp-313.wpsp-row .wp-show-posts-image.wpsp-image-left img {
        object-fit: cover;
        width: auto;
        height: 100%;
    }
    /* Make the image wrapper occupy only 25% of the horizontal space */
    section#wpsp-299 .wpsp-card.wpsp-row .wpsp-content-wrap, 
    section#wpsp-299.wpsp-row .wp-show-posts-image,
    section#wpsp-313 .wpsp-card.wpsp-row .wpsp-content-wrap, 
    section#wpsp-313.wpsp-row .wp-show-posts-image {
        flex: 1 0 25%;
    }
}
/* Media rule for really small mobile viewports */
@media (max-width: 559px) {
    /* Make the image wrapper occupy only 100% of the horizontal space for stacking */
    section#wpsp-299.wpsp-row .wp-show-posts-image.wpsp-image-left img,
    section#wpsp-313.wpsp-row .wp-show-posts-image.wpsp-image-left img {
        width: 100%;
        height: auto;
    }
    /* Make the image wrapper occupy only 100% of the horizontal space for stacking */
    section#wpsp-299 .wpsp-card.wpsp-row .wpsp-content-wrap, 
    section#wpsp-299.wpsp-row .wp-show-posts-image,
    section#wpsp-313 .wpsp-card.wpsp-row .wpsp-content-wrap, 
    section#wpsp-313.wpsp-row .wp-show-posts-image{
        flex: 1 1 100%;
    }
}

    I basically just copied the selector, pasted it again and on the copy, I just changed the ID from 299 to 313. 🙂

    October 21, 2021 at 2:02 am #34795
    Shaun
    Participant

    Thx Elvin
    That makes sense to me.

    October 21, 2021 at 8:10 pm #34807
    elvin
    Moderator

    No problem. 😀

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.