search

AlexNexton / BI-Team-5

Cafe Java is a local coffee shop which is unable to operate smoothly due to the Global Pandemic (Covid). The cofee shop was only able to accept walk in customers, which under current safety regulations are seen as not safe and more importantly it has seen an increase in revenu loses. As a team, we have build a website to enable Cafe Java customers to make their orders online in advance of their visit to the shop with the aim to save the business from collapsing.
https://alexnexton.github.io/BI-Team-5/
0 stars 3 forks source link

While using google dev tools in mobile view the navbar wasn't "sticking" to the top. #6

Closed simonjvardy closed 4 years ago

simonjvardy commented 4 years ago

Describe the bug While using google dev tools (to check all was well) in mobile view the navbar wasn't "sticking" to the top. I had to double click it in mobile view on google dev tools before it fixed itself.

To Reproduce Steps to reproduce the behavior:

  1. Open Chrome Browser and navigate to https://alexnexton.github.io/BI-Team-5/
  2. Right click on 'the web-page and select 'Inspect' to open Chrome Developer Tools
  3. Click the 'Toggle Deive Toolbar' icon
  4. Select a iPhone 6/7/8 from the device options dropdown menu.
  5. Move the pointer onto the device screen area and left mouse click on the nav bar.
  6. The display is larger than the display max width but resets when the navbar "SomeCoffeePlace" text placeholder is clicked.

Expected behavior It was expected that the responsive design using bootstrap grid classes would resize to the full width of the selected display size without overflow.

Screenshots None available.

Desktop (please complete the following information):

Additional context We tried to reproduce the fault on other web-browsers and devices but could only reproduce this behaviour on Windows 10 desktop version of Chrome.

Tested OK using the following: Mac OSX El-Capitan Chrome Browser Dev Tools Mac OSX El-Captian Firefox Browser Dev Tools

Also tested the live website on an Apple iPhone running iOS 13.5.1 running both Chrome and Firefox web-browsers without fault.

Further investigation required to identify why Chrome on Windows 10 is showing this bug.

simonjvardy commented 4 years ago

The issue was traced to the bootstrap default .container-fluid class. the following css code was added to style.css to override the default bootstrap class behaviour


.container-fluid{
    padding: 0;
     overflow: hidden;}