Why is the hero section on mobile horizontal view very crowded on published site? Webflow designer doesn’t show this issue. Mobile vertical is fine. Please help!


having this problem on mobile view of nitka.com

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey Sarah!

Mind sharing screenshots of what you mean? I’m guessing you are talking about the waves at them bottom of the section; if so, try replacing the embed code with this code. The custom code is overwriting the Webflow settings. Thats why it looks fine in preview but not on the published website.

I can’t test if it works since it needs to be published, so let me know!


    margin; 100px

  @media only screen and (min-width: 991px) {
      font-family:'shape divider from ShapeDividers.com';
      position: absolute;
      z-index: 3;
      pointer-events: none;
      background-repeat: no-repeat;
      bottom: -0.1vw;
      left: -0.1vw;
      right: -0.1vw;
      top: -0.1vw; 
      background-size: 128% 164px;
      background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23ffffff"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23ffffff"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 0 .87v1.2h35.28z" opacity=".5" fill="%23ffffff"/></svg>'); 
    margin; 100px

  @media (min-width:2100px){
      background-size: 128% calc(2vw + 164px);
      margin; 100px



This is due to your section being 90vh height on phone horizontal view. That’s a very short section that you’re trying to squeeze a lot of content into. Try switching it to svh or auto on this viewport.

Good test is to shrink your browser to a relative height of a phone.

Adding to port_of_folio’s comment, another way is using the Finsweet vertical resize tool instead of resizing the browser.

1 Like

Are you the same person who is looking around the solutions in other platforms…? I also made an easier version of your site. This do not need any code or any other extensions. Please have a look. This will be your final output.

Mobile Landscape View:

Mobile Portrait View:

Tab View:

Hope it will help you to understand between previous and present layouts. Send me a massage if you want to talk more on this issue.