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!
<style>
.shapedividers_com-9840{
overflow:hidden;
position:relative;
margin; 100px
}
@media only screen and (min-width: 991px) {
.shapedividers_com-9840::before{
content:'';
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 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23ffffff"/></svg>');
}
margin; 100px
}
@media (min-width:2100px){
.shapedividers_com-9840::before{
background-size: 128% calc(2vw + 164px);
margin; 100px
}
}
</style>
</style>
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.
Regards,
Istiaque
1 Like