Issue with latest post shortcode

[learnmechanical2019]

I am using recent post shortcode, the issue what I am experiencing is in mobile devices for certain pages it breaks the layout by going outside the viewport.

As you can see, ref URL: https://learnmechanical.com/fluid-mechanics-and-hydraulic-machine/

but at the same time, some pages have perfect layout like this:

Ref URL: https://learnmechanical.com/thermal-engineering/

P.S.: This is the CSS which @christian offer previously: This is something Awkward shape of the Recent Post

[ruenel]

Hello Saswata,

Thanks for the very detailed post information. By default, the titles in the recent posts element will only display in one line. To prevent this from happening, you will override the styling. In the built in stylesheet, it is using this CSS code:

.x-recent-posts .h-recent-posts, .x-recent-posts .x-recent-posts-date {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

You can override the styling by using this custom css:

.x-recent-posts .h-recent-posts, 
.x-recent-posts .x-recent-posts-date {
    white-space: nowrap;
}

Feel free to change the white-space value from ‘nowrap’ to just ‘normal’ so that the titles will display as normal post titles in several lines if needed. To learn more about the CSS white space property, please check this out:

• https://www.w3schools.com/cssref/pr_text_white-space.asp

The points above will be a good starting point and if you are interested you can learn more about CSS selectors and details here. You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

Best Regards.

[learnmechanical2019]

Hello @ruenel, I think you picked me wrong, it is fine for 1 line. I am talking about the layout, as you see the 1st image the rectangle white background behind the text is out of the viewport, go out the right side. I want to achieve both gap right and left should be equal, as shown in the 2nd screenshot. Thanks!

[nabeel]

Hey Saswata,

Thank you for the clarification. The issue is happening due to the negative margin given to the Text element that contains the shortcode.

To fix it, edit your page in Cornerstone and inspect your Text element that contains the Recent Posts shortcode and set the Margin to 0:

Let us know how this goes!