Any specific Requirements for creating a new mdx file?

[mehediasif]

Hi guys! Sorry to disturb you during the holiday season and Today I just found out about this template and wanted to spin up a new blog using this template.
everything is fine and the blog is running fine but every time I try to create a new post on post/new-example.mdx it shows up on the local and production build but it's not responsive for some reason.

Note: All other original posts is still responsive only the new ones are being responsive.Even when I copy a previous post!
Is there any specific way of working this or there is some error regarding my mdx?

[subbramanil]

I too have the same issue. At the least, the cause of my issues is the length of code blocks.

This works fine and the page retains a responsive design on mobile.

git verify-pack -v .git/objects/pack/

Anything more than that doesn't work and the page loses the responsive design on mobile.

git verify-pack -v .git/objects/pack/<pack-name>.idx | sort -k 3 -n | tail -n 2

I wonder why the code block doesn't retain the size on mobile which sort of breaks the page layout.

[subbramanil]

@mehediasif I made one change in the layout which fixed the issues I had with the code blocks.

I removed the CSS class items-center in the components/Layout.js file.

<div className="flex flex-col items-center max-w-4xl w-full mx-auto">

to

<div className="flex flex-col max-w-4xl w-full mx-auto">

P.S.: I have dabbled enough in HTML, CSS, and js to make changes and fix minor issues. I still don't have the overall picture of the tailwind CSS & the layouts used in this theme. So the above solution may not be the exact fix that's required. Also, I adjusted the layout earlier to increase the width of the content, hence the change to max-w-4xl.

[mehediasif]

@subbramanil thank you for your suggestion
I have taken your idea and changed the code according to the tailwind docs for media query
If you read about tailwind docs you would see that you can set multiple media queries on the same element
<div className="flex flex-col items-center lg:w-full md:w-4xl sm:w-full mx-auto">