Landing page mobile optimisation issue

[Sasha_Panina]

Hello! 

I'm having a trouble with the mobile optimisation of the landing page. I've created it from a template. 

The main picture and the text on it look incorrectly. Could you please help me with that?

Here is the page: https://resources.amazinghiring.com/hackathon_1209-0?hs_preview=wCpFpTpl-6551708024

Desktop:

Mobile:

Is there a way to work on the design of the mobile page only? 
Looking forward to hearing from you!

[jzilch]

Hi Sasha, 

To better fix this issue I would try to use media queries to give you better control of the design in different viewports. The main problem here is you have a hardcoded height on the selector .header-wrappers of 570px. When the viewport scales down the text will run out of the room as the height is not going to respond to the viewport. You could fix this by doing the following

@media (max-width: 800px) {
  .header-wrappers {
     height: 700px;
  }
}

It may also help if you try and scale down the title of the page in a media query too as the current font size is set to 60px which is a bit large for mobile devices.