Penci Featured Slider mobile view too small

Public Ticket #19237

Penci Featured Slider mobile view too small

Conversation thread

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

1. If you want to display 1 item per row in the mobile, you only need to remove the CSS I've sent.

2. There are no options to modify the Featured Boxed on the Mobile. If you want to modify the width and height of each item on mobile, please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

@media only screen and (max-width: 767px) {
    .home-featured-boxes-sc ul.homepage-featured-boxes.boxes-2-columns li,
    ul.homepage-featured-boxes li,
    .post-entry ul.homepage-featured-boxes li {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        max-height: 200px;
    }
}

Replace 90% and 200px with the custom value you want to display.

Regards,
PenciDesign.

La-Ness Albert replied

4 years ago

Customer Reply

For Desktop it's fine, but in mobile it is still the same: first 2 featured boxes next to each other and then one below

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please modify the CSS code like this:

@media only screen and (max-width: 767px) {
    .home-featured-boxes-sc ul.homepage-featured-boxes.boxes-2-columns li,
    ul.homepage-featured-boxes li,
    .post-entry ul.homepage-featured-boxes li {
        width: 50% !important;
        margin-bottom: 20px;
    }
}

Regards,
PenciDesign.

La-Ness Albert replied

4 years ago

Customer Reply

Thanks for your feedback.

I added the CSS mentioned below, but now the Featured Boxes do not fit into one row anymore - in Desktop and mobile view. I still need them to appear next to each other in desktop view and below each other in mobile.

Could you kindly check if maybe the CSS code needs to be different?

Many thanks in advance

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

About your request, please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.home-featured-boxes-sc ul.homepage-featured-boxes.boxes-2-columns li,
ul.homepage-featured-boxes li,
.post-entry ul.homepage-featured-boxes li {
    width: 50% !important;
    margin-bottom: 20px;
}

Regards,
PenciDesign.

La-Ness Albert started the conversation

4 years ago

Conversation Start

Hello again,

on my homepage I have integrated the Penci featured Post Slider and below the widget Penci Featured Boxes. In the Desktop view it looks really nice, but in mobile view the Featured Boxes appear to be bigger than the Featured slider (in height). Is there a way to change that and adjust the proportions?

Please find a screenshot attached of the mobile view.

Want to join this conversation or access attachments? Sign in first.