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.
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?
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.
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.
Hi,
About your request, please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
Regards,
PenciDesign.
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
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.
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
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.