I’ve created a publication cover for my website. It’s a simple black background with the name of my site in custom font. There’s no issues displaying it on the site, but when I access the site on a different screen, or through mobile phone, most of the text is cutoff. The cover does not scale to whatever size the screen is. How do I fix this?
On a separate note, is there an optimal pixel size to upload images for the publication cover?
Does anyone have an answer in terms of making a publication cover scalable on mobile devices? On a normal laptop screen it looks fine, on mobile almost all the words are cut off. Is there anything i can add as code injection to make it scale appropriately so it can be seen on both devices?
Did you ever figure this out?
Going this route, you’re going to have a hard time.
The difficulty is that an image on mobile usually has a very different aspect ratio than on a desktop or laptop. While the former is closer to a square, the latter is usually more of a rectangle. Trying to get everything to line up properly can be a proper nightmare.
Instead, I think it’s better to choose an image that is more flexible, able to appear correctly on a variety of viewports. Then, add text as an element. That way, you can center the text via CSS and improve the accessibility and SEO benefits of your site.
If you’re set on using an image, then I’d recommend putting essential content only in the center of the image. If it’s an image intended to be full bleed, then I usually shoot for an image around 2000 px by 1125 px. But what will actually work will be wholly dependent on your particular theme. If you let me know which theme you’re using, I might be able to provide more guidance!