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
  • #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

    #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.

    #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

    #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%;
        }
    }
    #34753
    Shaun
    Participant

    Thx Elvin
    Much appreciated.

    #34756
    elvin
    Moderator

    No problem. 😀

    #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 8 months, 2 weeks ago by Shaun.
    #34791
    Shaun
    Participant

    Just checking in again for help with the above

    #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. 🙂

    #34795
    Shaun
    Participant

    Thx Elvin
    That makes sense to me.

    #34807
    elvin
    Moderator

    No problem. 😀

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