Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[Support request] How to customize mobile homescreen like this layout

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support How to customize mobile homescreen like this layout

  • This topic has 11 replies, 2 voices, and was last updated 6 months ago by Tom.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #15923
    Dibyajyoti
    Participant

    We have been using GP premium with Wp show post pro. Now we want some customization for home screen layout on the mobile device. We are currently using WP show post pro to show a particular category article on our home screen. Currently, our home screen on mobile looks like this> https://prnt.sc/snfucd. We want to make this look like this > https://prnt.sc/snfur1. Is it possible? If yes please guide me.

    Thanks and Regards

    #15937
    Tom
    Keymaster

    Hi there,

    Should be possible with some CSS – any chance you can link me to your site?

    Thanks!

    #15949
    Dibyajyoti
    Participant

    Hello Tom, here it is: https://bit.ly/3eklgv4

    #15952
    Dibyajyoti
    Participant

    Hello, Tom, I found this one> https://generatepress.com/forums/topic/how-do-i-design-such-layout/.I need this but as I am using WP show post on the homepage, some modification will be needed I guess. Please guide me.

    Thanks

    #15964
    Dibyajyoti
    Participant

    Any update as my client is asking about this

    #15976
    Tom
    Keymaster

    You could do something like this:

    @media (max-width: 768px) {
        .wp-show-posts-image.wpsp-image-left {
            float: left;
            margin-right: 1.5em;
            max-width: 100px;
            min-height: 100px
        }
    
        .wpsp-read-more {
            display: none;
        }
    }
    #15993
    Dibyajyoti
    Participant

    Awesome thanks Tom.
    I have added few codes and now it looks awesome
    @media (max-width: 768px) {
    .wp-show-posts-image.wpsp-image-left {
    float: left;
    margin-right: 1.5em;
    max-width: 100px;
    min-height: 100px;
    }

    .wpsp-read-more {
    display: none;
    }
    .wp-show-posts-entry-meta {
    font-size: .6em;
    }
    .wp-show-posts-inner {
    margin-top: -36px !important;
    }
    .wp-show-posts .wp-show-posts-entry-title {
    font-size: 15px;
    line-height: 1.3em
    }
    }

    I want to make the image’s edge little curve, but when I am applying padding only top edges are getting curved not the bottom ones. want to make the images like this: https://prnt.sc/soicpj

    Thanks and Regards

    #15995
    Dibyajyoti
    Participant

    I figured it out
    .wp-show-posts-image img {border-radius: 10px;
    }

    Thanks

    #16001
    Dibyajyoti
    Participant

    A small help needed. The title and the featured image is not in one line. The title is little below the image https://prnt.sc/sokovt
    How to align them

    #16022
    Tom
    Keymaster

    That’s just the line-height of the title.

    You could try to force it up a bit:

    .wp-show-posts .wp-show-posts-entry-title {
        position: relative;
        top: -2px;
    }
    #16035
    Dibyajyoti
    Participant

    Thanks that worked. Tom another issue we are facing
    In normal archive blog, category desktop blog heading size and mobile heading size is different but with wp show post pro its same for all the devices which makes the 20px heading (for desktop) look very big on mobile smartphones. How to counter that. https://prnt.sc/spd4u9
    Normal Archieve heading

    #16066
    Tom
    Keymaster

    You can just use CSS:

    @media (max-width: 768px) {
        .wp-show-posts .wp-show-posts-entry-title {
            font-size: 17px;
        }
    }
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.