How to customize mobile homescreen like this layout

Tagged: mobile, mobile homescreen

This topic has 11 replies, 2 voices, and was last updated 3 years, 4 months ago by Tom.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
May 25, 2020 at 11:05 am #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

May 25, 2020 at 5:15 pm #15937

Tom
Keymaster

Hi there,

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

Thanks!

May 25, 2020 at 9:06 pm #15949

Dibyajyoti
Participant

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

May 25, 2020 at 11:55 pm #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

May 26, 2020 at 9:05 am #15964

Dibyajyoti
Participant

Any update as my client is asking about this

May 26, 2020 at 3:43 pm #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;
    }
}
```
May 26, 2020 at 9:41 pm #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

May 26, 2020 at 9:43 pm #15995

Dibyajyoti
Participant

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

Thanks

May 27, 2020 at 12:23 am #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

May 27, 2020 at 4:52 pm #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;
}
```
May 28, 2020 at 4:23 am #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

May 28, 2020 at 2:57 pm #16066
Tom
Keymaster
You can just use CSS:
```
@media (max-width: 768px) {
    .wp-show-posts .wp-show-posts-entry-title {
        font-size: 17px;
    }
}
```
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

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