Highlighted News Box Misaligned

Hi @abuhaneef,

We have investigated the issue and found that the block mentioned is added using the magazine blocks plugin. We have replicated the issue you mentioned. As a temporary solution, please add the following CSS code to your Dashboard >> Appearance >> Customize >> Additional CSS.

@media (min-width: 1200px) {
.mzb-grid-module .mzb-posts.mzb-post-col--2 {
grid-template-columns: repeat(2, 1fr) !important;
}
}

We have reported this bug to our development team; we will include the fix in our upcoming update of the Magazine Blocks plugin.

Regards!

Thank you for your response. I did exactly what you said and it fixed the issue.

Hi @shresthauzwal ,

The desktop view is fixed, thank you. Please help with tablet and mobile view.

1. Tablet View – Horizontal view

In the Tablet view, if I hold the tablet horizontally, the featured news block error persists, please see below screenshot. How to fix it as well?

Tablet Horizontal view: https://snipboard.io/8q1Dgj.jpg

2. Mobile and Tablet – Vertical View

The same featured news block looks very congested in the mobile and tablet vertical views as in the below screenshot

Mobile and Tablet Vertical View: https://snipboard.io/yuLX8N.jpg

Is there a way to clear the congestion by making those 4 articles appear as 4 very slim horizontal rows , only in the vertical views of mobile and tablet (without affecting the Desktop View)?

This way the text will be readable and will takes less space while scrolling on mobile and tablet.

Please help

Kind regards

Riswan

Hi @abuhaneef,

Please try the following CSS code as a temporary solution to fix the mobile and tablet view design issue.

@media(max-width: 768px) {
.mzb-grid-module .mzb-posts {
grid-template-columns: 1fr !important;
}
}

Regards!

@shresthauzwal

Thank you for the code, it solved the vertical view problem in both mobile and tablet views.

Hovever in the Tablet view, if I hold the tablet horizontally, the featured news block error persists it is not corrected with the new code, please see below screenshot. How to fix it as well?

1. Tablet View – Horizontal view

Tablet Horizontal view: https://snipboard.io/8q1Dgj.jpg

Hi @abuhaneef,

Sorry for the delay,

Please try the following CSS code as a temporary solution to fix the vertical view problem in both mobile and tablet issues.

@media (min-device-width:769px) and (max-device-width:1024px){
.mzb-grid-module .mzb-posts {
grid-template-columns: repeat(2, 1fr) !important;
}
}

Regards!