Placeholder Length Issue On Certain Devices

Question
1

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)

Screenshot_20201003-145832_Chrome
Screenshot_20201003-145832_Chrome1079Ɨ2124 1010 KB

2

@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
3

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.

4

@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:

5

@FlaminFig thanks very much. Iā€™ll give this a go an report back.

6

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.