How can I modify my landing page code to include a mobile-friendly banner?

Technical Q&A
1

Greetings, I’m creating a landing page that will be used for a giveaway event. I already have custom code to use for Turbo theme that creates a landing page with only the logo and links to privacy statement.

I would like to use this same landing page template, however instead of my logo at the top I want to place a banner style image that will look good on desktop and mobile. Is someone able to assist me with the best way to achieve this? How can I edit the code? Do I change “logo” style dimensions? What size should my banner image be to make sure it appears correct on desktop and mobile?

Here is the code I’m working with:

Copy and paste this code into the page.landing.liquid template. (for TURBO THEME)

#header, .header, header{display:none !important;} #footer, .footer, footer{display:none !important;} .newsletter_section { display:none; }

{{ shop.name }}

{{ page.title }}

{{ page.content }}

2

Hi @Sselman ,

First, you need to upload the logo.png image in Assets.

You can upload any size you want, because the code dropped it with max-width:200px.

Hope it is clear to you.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

3

Thank you for your response.

I did upload the image into assets. The issue I’m having is that the image looks correct on desktop but shrinks down and looks really small on mobile.

Do I need to adjust the code to ensure the scale of the image appears correct on desktop and mobile?