3 quirks that are confusing me

These all relate to the project I submitted for the last community challenge:

  1. Between the hero section, and the subsequent section (‘text’), there is a gap; I don’t understand why it’s there as neither has margin applied. I gave the text section negative margin to reduce the gap, but would love to know the correct way round this issue.

  2. Previewing the smartphone view in browser, all looks fine, but on my iphone (4), the main heading “the shape of things to come” busts out the side of the screen, meaning that the vertical scroll of the site wobbles from side to side. Previewing it in the browser, it also breaks if I shrink the width down to the ‘old Android phones mark’.

  3. Again, previewing the phone view in browser, I can click the menu icon and the menu appears, but the links on it don’t work. On my iphone, the menu slides out and immediately disappears again; it behaves as if the tracklisting button has already been pressed.

Many thanks in advance for any help/ advice. And thanks for a great tool.


Try this… there might be a better way to address the issues.

With a quick look… I came up with the following:

  1. You are setting your image at 700px high but the image is 600px high. You are creating a 100px gap.
    You added -80px top margin to TextSection… but leaving a 20px gap.

Try this
a: remove the height 100% from the heroSection. You don’t need the min or max either.
b: remove the top margin from TextSection.
c: set overflow to hidden on TextSection.

2: Your portrait mobile same as 1abc. Your settings are flowing down to the mobile. You need to remove Height min max.

  1. It’s works for me. However, I am previewing it in the browser… not on the actual device.

see video:

1 Like

Thanks heaps for this; I tried it and it works in browser for me also.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.