1

I am working on some website that is designed for users to move from section to section horizontally and vertically. So user needs to be able to click on the footer button on every section and it send him to next section which is on the right side from current section, for footer button on that section user should go to the next section which is down, after that left, down and so on. On the first image you can see how website look like from zoom out perspective. On second image how the website should look like on mobile device and on third what happened when user scrolls on the side with his fingers.
Problem is that I want to disable user to scroll the website horizontally by himself. With 'overflow:hidden' it works for desktop size (if I try to move on the side with keyboard arrows it will not scroll and that's good), only need to implement this method for mobile devices.

Image of the website:

enter image description here

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: black !important;
  color: #fff !important;
  overflow-y: hidden;
  overflow-x: hidden;
}

.connection {
  display: flex;
  width: 200%;
}

.home {
  height: 50vh;
  background: rgb(109, 106, 106);
}

a {
  color: white !important;
}
<div id="first" class="home">
  <p>coonection</p>
  <br>
  <a href="#second">next</a>
</div>

<div class="connection">
  <!-- VALUES 5 -->
  <div id="second" class="internal">
    <div class="purp">
      <p class="rowText">SECTION 1</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!,
        voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga.</p>
      <br>
      <a href="#third">next</a>
    </div>
  </div>

  <div id="third" class="internal">
    <div class="purp">
      <p class="rowText">SECTION 2</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!,
        voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga.</p>
      <br>
      <a>next</a>
    </div>
  </div>
</div>
bih_coder
  • 11
  • 2
  • Hi, @bih_coder. Welcome to SOF. Your question needs to be more specific. I would suggest you 1) to state your problem right at the title, e.g. "Div doesn't get hidden on mobile"; 2) better structure your paragraphs, don't be afraid to hit enterç 3) carefully read this https://stackoverflow.com/help/how-to-ask – Ismael Sarmento Feb 24 '22 at 14:22
  • So, are you trying to implement a responsive website with plain html+js+css? – Ismael Sarmento Feb 24 '22 at 14:24
  • Hi @IsmaelSarmento, thanks for advice and the link, I will look into it. Yes I need it to be responsive website but the most important requirements are stated above – bih_coder Feb 24 '22 at 14:44
  • Looks like this other answer will work for you: https://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers – JoeKincognito Feb 25 '22 at 15:07
  • @JoeKincognito thanks man it works, that's what I need. – bih_coder Feb 25 '22 at 15:40

0 Answers0