Horizontally full screen split website

Question

I am trying to create a website that has its main content on home always split (70% top and 30% bottom). I have tried using split.js but the result is still junky as whenever i go below any major breakpoint (1280, 1024, 1980px) everything breaks.

This is the site - https://lknahk.ee/ i am working on and i will open it to the public soon but i just can't get the homepage to work correctly on both mobile and screen so i am asking here for help as to what should i do. I know vertically splitting screen is easier because content can flow below, but i don't want any content to push scrolls for the user.

Link to barebone codepen of the site - https://codepen.io/bleedeagle/pen/zWBqLj

<div class="split-wrapper">
    <section id="one" class="split"></section>
    <section id="two" class="split"></section>
</div>

Thanks

it looks like the bottom 30% of your screen is not scaling whereas the top part is. It would be easier to provide an answer if you provided a working snippet of the the problem. The more work you put into your question the faster you'll get an answer — DCR, Mar 16 '18 at 14:49
My problem lies in the unknown - i don't know where to look at. I did make a codepen by pulling the content from the web and only adding the most barebone css but i don't know if it helps ( i'll add it to my post up) — Kevin Lehtla, Mar 17 '18 at 09:40
what exactly is wrong? The bottom section is sizing correctly. The pictures in the bottom section are not scaling, is that your problem? — DCR, Mar 17 '18 at 15:40
Yes one problem is images not scaling - the plugin used doesn't allow them to be as responsive as i want or i just don't know the correct css to apply in this situation. Second problem and them main one is when it comes to phone screens everything ignores the split screen stuff and my divs overflow for some reason. — Kevin Lehtla, Mar 17 '18 at 16:07

DCR · Answer 1 · 2018-03-18T01:06:32.577

I would start by setting up your html as follows. This will give you a top and bottom split of 70/30 without using the split.js function. Then, within the top and bot divs make sure your images scale. If you need help with that let me know.

With the way you have your html set up you have divs that occupy both the top and the bottom portions of your screen.

html,body{
   height:100%;
   overflow:hidden;
   margin:0}
   
   
#container{
   height:calc(100% - 20px);
   border:10px solid black;}
   
#top{
   height: calc(70% - 10px);   
   border:5px solid red}
   
#bot{
   height:calc(30% - 10px);   
   border:5px solid green}

<html>
   <body>
      <div id='container'>
         <div id='top'>
         </div>
         <div id='bot'>
         </div>
      </div>
   <body>
<html>

Thanks, i really should remove split.js as it has no point if i can mimic it with simple css. But i am going to have to close the question as i have deducted that about 80% of the problems came from the plugin i am using to show content in slide format - i need to ask questions directly from the author. — Kevin Lehtla, Mar 17 '18 at 22:33

score 0 · Answer 2 · answered Mar 17 '18 at 22:35

I have deducted that the problem came from the plugin i am using for wordpress called " Carousel Anything ". All of my main content was placed inside it and that was the fault responsive views were off so i am going to direct my question to the author of the plugin.

Horizontally full screen split website

2 Answers2