AnsweredAssumed Answered

Landing page doesn't look good on mobile

Question asked by Ophir Gal on Oct 14, 2018
Latest reply on Oct 15, 2018 by Ophir Gal

Like • Show 0 Likes0
Comment • 10

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?

Outcomes

Grégoire Michel Oct 14, 2018 9:08 AM

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

Actions

Ophir Gal @ Grégoire Michel on Oct 15, 2018 12:58 AM

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

Actions

Ronen Wasserman @ Ophir Gal on Oct 15, 2018 1:54 AM

Hi,

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

Actions

Ophir Gal @ Ronen Wasserman on Oct 15, 2018 4:48 AM

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

Ronen Wasserman Grégoire Michel

Actions

Gerard Donnelly Oct 15, 2018 2:09 AM

Hi Ophir Gal,

Your Youtube iframes currently have a fixed width:

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

Also do this on the images you have inserted.

Hopefully that should fix your issues.

Thanks,

Gerard

Actions

Gerard Donnelly @ Gerard Donnelly on Oct 15, 2018 2:14 AM

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

Actions

Ophir Gal @ Gerard Donnelly on Oct 15, 2018 4:23 AM

Thanks Gerard Donnelly,

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

Any idea?

Actions

Ophir Gal @ Ophir Gal on Oct 15, 2018 4:40 AM

Gerard Donnelly

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

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

Thanks for the help so far!

Ophir

Actions

Gerard Donnelly @ Ophir Gal on Oct 15, 2018 4:44 AM

Hi Ophir Gal,

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

Actions

Ophir Gal @ Gerard Donnelly on Oct 15, 2018 4:49 AM

Exactly what I did.

Thanks Gerard Donnelly

1 person found this helpful

Actions

10 Replies

Grégoire Michel Oct 14, 2018 9:08 AM
Mark Correct
Correct Answer
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
Like • Show 0 Likes0
Actions
- Ophir Gal @ Grégoire Michel on Oct 15, 2018 12:58 AM
  Mark Correct
  Correct Answer
  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
  Like • Show 0 Likes0
  Actions
  - Ronen Wasserman @ Ophir Gal on Oct 15, 2018 1:54 AM
    Mark Correct
    Correct Answer
    Hi,
    Usually, such issues are only dealt in the HTML/CSS as Grégoire Michel mentioned.
    Like • Show 0 Likes0
    Actions
    - Ophir Gal @ Ronen Wasserman on Oct 15, 2018 4:48 AM
      Mark Correct
      Correct Answer
      Thanks both - see the almost ideal solution by Gerard (and myself... ).
      Ronen Wasserman Grégoire Michel
      Like • Show 0 Likes0
      Actions
Gerard Donnelly Oct 15, 2018 2:09 AM
Mark Correct
Correct Answer
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
Like • Show 1 Like1
Actions
- Gerard Donnelly @ Gerard Donnelly on Oct 15, 2018 2:14 AM
  Mark Correct
  Correct Answer
  Here are examples of what it looks like when I swapped the widths to be 100% and removed the height. Everything looks good.
  Like • Show 1 Like1
  Actions
  - Ophir Gal @ Gerard Donnelly on Oct 15, 2018 4:23 AM
    Mark Correct
    Correct Answer
    Thanks Gerard Donnelly,
    It works perfect for images, but the YouTube videos gets squashed on desktop:
    
    Any idea?
    Like • Show 0 Likes0
    Actions
    - Ophir Gal @ Ophir Gal on Oct 15, 2018 4:40 AM
      Mark Correct
      Correct Answer
      Gerard Donnelly
      I added height="315" as a default for now, and it looks ok:
      if you got a better solution, I'll give it a try.
      Thanks for the help so far!
      
      Ophir
      Like • Show 1 Like1
      Actions
    - Gerard Donnelly @ Ophir Gal on Oct 15, 2018 4:44 AM
      Unmark Correct
      Correct Answer
      Hi Ophir Gal,
      Try leaving the height at 315 on the iframe and just change the width to 100%.
      Like • Show 0 Likes0
      Actions
      - Ophir Gal @ Gerard Donnelly on Oct 15, 2018 4:49 AM
        Mark Correct
        Correct Answer
        Exactly what I did.
        Thanks Gerard Donnelly
        1 person found this helpful
        Like • Show 0 Likes0
        Actions

Landing page doesn't look good on mobile

Outcomes

Related Content

Recommended Content