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

Menu carousel works ok at small display sizes but becomes too large above medium display sizes #18

Closed simonjvardy closed 4 years ago

simonjvardy commented 4 years ago

Describe the bug The menu carousel was designed to be used on mobile phones and small display sizes. When the reponsive design is displayed on medium and large display sizes the carousel images become too large and take up the whole display.

To Reproduce Steps to reproduce the behavior:

  1. Open Chrome Browser and navigate to https://alexnexton.github.io/BI-Team-5/
  2. resize the window display from small to medium or large sizes
  3. scroll down to the menu section
  4. the image is responsive and maintains the screen width of 100% so becomes far too large.

Expected behavior The image is responsive so maintains the full width of 100% using the Bootstrap Class .col-12

Screenshots None

Desktop (please complete the following information):

Additional context The carousel design for smaller screen sizes is no longer appropriate for medium and larger display sizes due to the images resizing. New design layout is needed.

simonjvardy commented 4 years ago

The carousel was hidden at large sizes by adding the Bootstrap class to carousel container

<div class="row"
    <div class="col-12 d-lg-none">...</div>
</div>

An extra section was added with the images and tables duplicated from the carousel and created in a 3 column layout at larger display sizes and bigger but hidden at smaller display sizes using the following Bootstrap classes:

<div class="row">
    <div class="d-none d-lg-block col-lg-4">...</div>
</div>