SOLVED

Landing page doesn't look good on mobile

Go to solution
Ophir_Gal
Level 2

Landing page doesn't look good on mobile

Hi,

I have build a landing page for a campaign, based on Landing Page Template - Guided.

It is fair on desktop (not too flexible though) but the problem is when going mobile:

1. Photos stays the same size (banner image, image on body) so they looked cut-out (half image)

2. Youtube videos (embed as iframe) the same

3. Navigation header (where the logo is), yep, the same

Not sure what to do.

Is there a template I can download to better fit mobile?

Other solution?

Thanks in advance,

Ophir

1 ACCEPTED SOLUTION

Accepted Solutions
Gerard_Donnell4
Level 10

Re: Landing page doesn't look good on mobile

Hi Ophir Gal​,

Try leaving the height at 315 on the iframe and just change the width to 100%.

View solution in original post

10 REPLIES 10
Grégoire_Miche2
Level 10

Re: Landing page doesn't look good on mobile

Please provide the URL of your page.

This is necessarily a HTML/CSS issue and we cannot help you without a URL.

And also, what template are you using ?

-Greg

Ophir_Gal
Level 2

Re: Landing page doesn't look good on mobile

Hi Grégoire Michel​,
It's Landing Page Template - Guided, and the page is https://go.landanano.com/Japan-VIP-Event-2018-Summary.html

Do you mean it is necessary to edit the code?

Thanks,

Ophir

Ronen-Was-SRpro
Level 7

Re: Landing page doesn't look good on mobile

Hi,

Usually, such issues are only dealt in the HTML/CSS as Grégoire Michel mentioned.

Ronen Wasserman
Ophir_Gal
Level 2

Re: Landing page doesn't look good on mobile

Thanks both - see the almost ideal solution by Gerard (and myself... ).

Ronen WassermanGrégoire Michel

Gerard_Donnell4
Level 10

Re: Landing page doesn't look good on mobile

Hi Ophir Gal​,

Your Youtube iframes currently have a fixed width:

<iframe width="560" height="315" src="https://www.youtube.com/embed/hjxK26reKP4?rel=0&cc_load_policy=1&hl=ja" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>

Try removing the height completely and setting the width to 100%.

<iframe width="100%" src="https://www.youtube.com/embed/hjxK26reKP4?rel=0&cc_load_policy=1&hl=ja" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>

Also do this on the images you have inserted.

Hopefully that should fix your issues.

Thanks,

Gerard

Gerard_Donnell4
Level 10

Re: Landing page doesn't look good on mobile

Here are examples of what it looks like when I swapped the widths to be 100% and removed the height. Everything looks good.

Screen Shot 2018-10-15 at 10.11.42.pngScreen Shot 2018-10-15 at 10.11.49.pngScreen Shot 2018-10-15 at 10.11.56.png

Ophir_Gal
Level 2

Re: Landing page doesn't look good on mobile

Thanks Gerard Donnelly​,

It works perfect for images, but the YouTube videos gets squashed on desktop:
pastedImage_1.png

Any idea?

Ophir_Gal
Level 2

Re: Landing page doesn't look good on mobile

Gerard Donnelly

I added height="315" as a default for now, and it looks ok:

pastedImage_0.png

if you got a better solution, I'll give it a try.

Thanks for the help so far!

Ophir

Gerard_Donnell4
Level 10

Re: Landing page doesn't look good on mobile

Hi Ophir Gal​,

Try leaving the height at 315 on the iframe and just change the width to 100%.