is 540px content width too small?

540 pixel is about a third of a 16 inch screen. So, in my personal opinion, yes it is too narrow.
Suggested is generally somewhere the double of that.

1024 actual content, 1440 container.

But then, that is a lot about personal preference and look of your website.

Note that image sizes of 540px is a bad idea because of social sharing. You will want something at least in the 700 pixel width, see also https://developers.facebook.com/docs/sharing/webmasters/images/
Unless you do not plan to share your posts on social media at all, those would be the minimal sizes to go with.

Responsive design does not mean “design as small as possible”
It means creating markup that can re-arrange itself and shrink/grow depending on the screen size.
For example, it might be wise to have a one-column card layout on a mobile, but on a 16 inch screen, that would look bad, and also give a bad experience, so you’d go for a 4-columns layout there, and on a 32 inch screen, maybe even with 6 columns.

It’s all related to what you present, of course, so for example text shouldn’t be too wide, because wide text is hard to read. There I recommend some 670 pixel width max, to keep the text “in the box”, but… that is just my personal preference.

Thanks, @bedas for your insightful suggestions. The featured image of the post will be 1200×675 (for sharing on social media platforms). The content width that I am talking about is for the actual post.

The homepage and other pages are in a 1520 container. the actual content is on 1030.

post layout:

Content —– Sidebar (sidebar hidden for mobile user)
540px —– 300px

The rest is whitespace.

Is it okay this way?

Is it okay this way?

You really have to decide this on your own ??

Seeing you use 540+300 (thus 840) then it probably makes sense, yes.

Just 540 would likely be a bit “lost” on the entire white space. But together seems like a good subdivision of the screen.

You really have to decide this on your own

Is a 540px image a bad idea while viewing on mobile?

I read somewhere that 640px is the minimum width for displaying on a mobile phone. Is it true?

I am not aware of such limitations.
You can display things as wide or narrow as you want.

As said, responsive design is not about fixed widths or somehow “do it as small as possible” or “do it as large as possible”
It is about dynamic layout and widths.

On mobile, for example, most times a 100% width (with some padding) is much better than a fixed width.
So you don’t have to consider each and every single screen, but can show the content on different screens always filling the full available width. Then maybe at a tablet width you can start setting max-widths.

You should look into bootstrap, it helps a lot when preparing stuff for responsivity.

There are literally phones that are 320px wide
You however don’t want to code that in your layout.
See https://www.mydevice.io/#compare-devices

You want to code it so that it looks good on a large number of screens, and on those cases, fixed things (as in pixel) are rarely a good idea.

Hope this makes sense.

• This reply was modified 3 years, 6 months ago by Anonymous User 14808221.
• This reply was modified 3 years, 6 months ago by Anonymous User 14808221.

Thank you so much @bedas

I will go through the resources you have mentioned.

Have a nice day!