Placeholder Length Issue On Certain Devices

Hi there.

Can anyone advise on what length I should make my placeholders? On devices with bigger screens they are coming up short (see pic)

@cpughmusic, Welcome onboard! :slight_smile:

This is the challenge! It is just impossible to cater for all devices out there and the ones of us with an eye for pixels it just outright frustrates! If your image had an auto-screen-height then that would solve your problem. It can be done with a bit of CSS by giving your image an ID and then CSS(ing) the ID.

1 Like

Hi. Thanks for helping me. I’m fairly new to this so apologies for any silly questions. What is ‘auto-screen height’ and how do I get it?

Thanks.

@cpughmusic, For now your image on mobile has a fixed height so you want to have it understand to respond to the screen height of your device. So instead of a height of 200px, you want it to detect the screen height and allow it that by the following CSS "height: 100vh;

So first you need to give your image an ID by going to Settings / Miscellaneous / Allow HTML element id customisation This will now present (after you click on the image) “Code Integration” under your Arrange tab at the top right hand side. In this area assign your image an identifier like “mobile-hero”.

You then need to drop in an “Embed Element” and in the element (right hand panel) place the following CSS code…

<style>
#mobile-hero {height: 100vh;}
</style>

That should allow your image to fill out the hight of your device.
Good luck! :slight_smile:

@greenskin thanks very much. I’ll give this a go an report back.

What you are experiencing is the placeholder is a different aspect ratio than the view window on the device. Dealing with aspect ratios for images and video is not an easy concept to grasp in the beginning. Since placeholders don’t have content by design, their aspect ratio is fixed until you add content.

If you’re not familiar with aspect ratio and don’t want to dive into the complexities, the easiest way to deal with this is to find a generic image that matches the screens you are targeting. Then make the image a placeholder and use throughout Sparkle.