The cover image is clipped when zooming out in 3 browsers so I assume it’s not a browser issue. Even at 100% the cover is clipped and only at 120% is it completely visible. Is there a solution with html code?
Hey @Axletree, welcome to Ghost!
Layout issues are generally theme-specific. Can you name the theme, or better yet, link the site, so that we can see the problem ‘live’ ?
The theme is Casper v5.7.5. The address is https://colkrs-cosm.ghost.io/
Thank you.
Having tested most of the other themes they all clip the cover image on zoom. I suspect it’s the responsive web design code. But zoom is an essential feature for viewing any website. The fact that every theme is broken in the same way is disappointing as well as confusing that such a problem exists at all.
On top of that when the size of the browser is changed images on the page also become clipped which while part of responsive design doesn’t work for all images. It’s hit and miss. Even so, with text moving to other parts of the page in erractic ways and increasing and decreasing in size unevenly pages look ugly and unprofessional.
I tried downloading other themes and installing them but the problem isn’t solved with 3rd party themes either.
Regardless of how perfectly the responsive design might work users could be given a choice of that or a fixed layout theme. I prefer fixed layout due to the way I design my pages with text and images fitting together, visually dependent on each other.
I downloaded the Casper theme but failed so far to convert it to a fixed layout. I’m sure it’s doable but be that as it may a user shouldn’t be expected to clean up sloppy code, or even if cleaned up left using responsive design not suitable for their personal aesthetic. You may disagree.
I don’t think this is sloppy code so much as a stylistic difference. Lots of themes assume that an image should be cropped to fit the layout. If you have landscape photos, that works fine. If you have pictures with text or headshots, not so much. It’s 100% possible to make a theme not crop pictures —ever— but you’ve got to decide whether that means white space on the sides at some screen sized, or really tall images. Both of those can look broken. Another option is to select images that tolerate a variety of crops, or if you’ve chosen a theme that uses a consistent aspect ratio, to always pre-crop to that aspect ratio before uploading.
That doesn’t explain the faulty zoom. It doesn’t explain text floating around the page ending up in odd places with sizes that don’t fit the new browser dimensions. And I’ve used fixed layout for many pages I’ve designed and they never look broken when zoomed out. White space is to be expected on a zoom out and to try and compensate by stretching an image to keep it full width is meaningless if the top is cut by the screen. And yes all of that is sloppy code. But my concern is mostly that there’s no option for fixed layout. I’m not a fan of responsive web design but true that’s a stylistic choice and one which Ghost gives me no control over.
Not true. You can customize a theme to do anything you want.
I downloaded the Casper theme but unable yet to change it to fixed layout as mentioned. I can write my own html/css but trying to modify what someone else wrote is not as simple. And that assumes it’s not part of the back end that can’t be altered. I can’t create my own theme because I don’t know the rules Ghost themes have to subscribe to to work. I’m guessing all of that is doable but my chief complaint was the brokenness of the responsive website aspect of all the themes. I can’t understand how this hasn’t come up a hundred times before from other users and why it hasn’t been addressed by management.
I hope you’ll make a bug report on the specific issues! :)
Thank you for your replies. I’ll consider where to go from here.