One Page Website, Mobile Responsiveness Issues

How To
1

Hi all,

I am new to the forum and new to bricks too (and not a website builder either) so please excuse me for this in advance. I tried looking for YouTube videos, but couldn’t get the info I need, nor found anything related to my issue. So here is my problem:

  • I am trying to build a simple and clean single-page website with 5-6 sections that showcases my design services.
  • I want to have each section to fit the desktop 100% (width and height) and use scroll snap so that each section represents different information. For example: section 1 is a hero slider, section 2 is about, section 3 is customers, section 4 extra info, section 5 contact …etc.
  • While for the hero slider it’s relatively simple, for some other sections like ‘about’ for example, I am trying to achieve the following full-size layout where left hand side is 50% wide with text on a clear dark grey background, on the right it’s also 50% wide a nice hero photo. Both of them to fit 100% the height of the screen.
  • To achieve this I tried the following structure: a section with 100VH >> container in the middle with width 100% and height 100% so that it can span across the full width of the site >> inside this container I am placing two other containers (for left and right) with 100% width/height for both so they fill up nicely the layout. The idea is that one of them has a background hero image, the other has a clean background for text.

THE ISSUE

  • It all looks good on the desktop and I kind of achieve the desired look, but for the mobile it’s a total mess! I tried to play around with the main container that holds the left/right sub-containers and play with the vertical/horizontal alignment for the mobile and they go all over the place. On one of the test pages, they won’t even sit below one another regardless of the settings of the section/container etc. On another test page I even see them overlapping other containers from other sections on the website further down below - looks like a total mess. I just can’t get my head around how to setup the sections/containers in order to achieve the desired layout that works. Sadly all of the templates that I looked at don’t fit the job…

Any advice?

Best Regards,
Miro

2

Still waiting for a reply… Anybody please?

small update: It seems like the sections on the mobile versions overlap each other by quite a bit. I haven’t set any conditions for overlapping (negative margins etc.), but they seem to overlap over each other. I hope this helps troubleshooting the problem. Thanks!