# Advise on the issue

**URL:** https://talk.openelis-global.org/t/advise-on-the-issue/858
**Category:** Uncategorized
**Tags:** dev
**Created:** [September 9, 2024, 11:54am UTC](https://talk.openelis-global.org/t/advise-on-the-issue/858 "2024-09-09T11:54:55Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![tasksolver](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/tasksolver/32/1067_2.png) [@tasksolver](https://talk.openelis-global.org/u/tasksolver)
#### Post date: [September 9, 2024, 11:54am UTC](https://talk.openelis-global.org/t/advise-on-the-issue/858/1 "2024-09-09T11:54:56Z")

</div>

I’m currently working on this issue [Iprove Responsivenes for the Global Search bar on the main Menu bar · Issue #1249 · I-TECH-UW/OpenELIS-Global-2 · GitHub](https://github.com/I-TECH-UW/OpenELIS-Global-2/issues/1249) and below are the results so far, any advise?? @Moses_Mutesasira

 ![Screenshot from 2024-09-09 14-48-34](https://canada1.discourse-cdn.com/flex030/uploads/openelisci/original/1X/23e882d929420a319d82b4e9bc92c3da20d26d0d.png)  
 ![Screenshot from 2024-09-09 14-54-14](https://canada1.discourse-cdn.com/flex030/uploads/openelisci/original/1X/4cda2b7e306f3f784af818936be67c965f9b5c7f.png)

---

<div class="post-metadata">

### Author: ![tasksolver](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/tasksolver/32/1067_2.png) [@tasksolver](https://talk.openelis-global.org/u/tasksolver)
#### Post date: [September 9, 2024, 5:18pm UTC](https://talk.openelis-global.org/t/advise-on-the-issue/858/2 "2024-09-09T17:18:54Z")

</div>

the challenge I am facing is that when it gets below 465px, it displays the following

at 465px

 ![Screenshot from 2024-09-09 20-23-16](https://canada1.discourse-cdn.com/flex030/uploads/openelisci/original/1X/b7ff24cd0693df435316c8bd55cf719ec0f0f0fb.png)

below 465px

 ![Screenshot from 2024-09-09 20-16-18](https://canada1.discourse-cdn.com/flex030/uploads/openelisci/original/1X/5823683ce65f42ccd2a5beade4c8ee26217bfb69.png)

---

<div class="post-metadata">

### Author: ![Manish](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/manish/32/472_2.png) [@Manish](https://talk.openelis-global.org/u/Manish)
#### Post date: [September 9, 2024, 5:48pm UTC](https://talk.openelis-global.org/t/advise-on-the-issue/858/3 "2024-09-09T17:48:12Z")

</div>

Hey @tasksolver in this what you can do is when the user is in mobile screen and if he clicks search icon make only openelis logo to appear, hide the title and adjust the grid size accordingly in the navbar . …and also we can replace the search button by just search icon …i guess in mobile screen there is no need for that!

---

<div class="post-metadata">

### Author: ![tasksolver](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/tasksolver/32/1067_2.png) [@tasksolver](https://talk.openelis-global.org/u/tasksolver)
#### Post date: [September 9, 2024, 6:48pm UTC](https://talk.openelis-global.org/t/advise-on-the-issue/858/4 "2024-09-09T18:48:52Z")

</div>

thanks @Manish , lemme keep on fixing

---

<div class="post-metadata">

### Author: ![tasksolver](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/tasksolver/32/1067_2.png) [@tasksolver](https://talk.openelis-global.org/u/tasksolver)
#### Post date: [September 10, 2024, 2:37pm UTC](https://talk.openelis-global.org/t/advise-on-the-issue/858/5 "2024-09-10T14:37:00Z")

</div>

looking for this search button, but have not found it yet, i believe it is defined by some class and place holder which im still looking for.

 ![Screenshot from 2024-09-10 17-31-36](https://canada1.discourse-cdn.com/flex030/uploads/openelisci/original/1X/c84b3bc3253e3219d9554abe537ddc171190500a.png)  
I am intending to hide the such button in blue above when it is on small screens.

---

<div class="post-metadata">

### Author: ![ELAI](https://avatars.discourse-cdn.com/v4/letter/e/ac8455/32.png) [@ELAI](https://talk.openelis-global.org/u/ELAI)
#### Post date: [September 12, 2024, 2:23am UTC](https://talk.openelis-global.org/t/advise-on-the-issue/858/6 "2024-09-12T02:23:41Z")

</div>

> <https://github.com/I-TECH-UW/OpenELIS-Global-2/blob/develop/frontend/src/components/layout/search/searchBar.css>

In media put in the .main className and shifting its top position shall move from the header as the screen gets smaller

---

<div class="post-metadata">

### Author: ![tasksolver](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/tasksolver/32/1067_2.png) [@tasksolver](https://talk.openelis-global.org/u/tasksolver)
#### Post date: [September 12, 2024, 4:42pm UTC](https://talk.openelis-global.org/t/advise-on-the-issue/858/7 "2024-09-12T16:42:33Z")

</div>

thanks @ELAI , this helped me figure out some solution.

 ![Screenshot from 2024-09-12 19-41-03](https://canada1.discourse-cdn.com/flex030/uploads/openelisci/original/1X/076a72b2aa516c71b71258a2642e3141995f1c09.png)  
 ![Screenshot from 2024-09-12 19-41-42](https://canada1.discourse-cdn.com/flex030/uploads/openelisci/original/1X/2224054184311ef7e933c6c1caeab29e13556d4f.png)

 ![Screenshot from 2024-09-12 19-38-42](https://canada1.discourse-cdn.com/flex030/uploads/openelisci/original/1X/eadfb2f5e24d9c2baed7969a697528186ff7ac72.png)

it goes below the h5 at 1036px screen size. think it is solved @Moses_Mutesasira

---

<div class="post-metadata">

### Author: ![ELAI](https://avatars.discourse-cdn.com/v4/letter/e/ac8455/32.png) [@ELAI](https://talk.openelis-global.org/u/ELAI)
#### Post date: [October 7, 2024, 1:58pm UTC](https://talk.openelis-global.org/t/advise-on-the-issue/858/8 "2024-10-07T13:58:01Z")

</div>

Hello Guys, hope Your Doing fine 🥰  
Am on the issue of making the **patientHeader** responsive [Here just a click 👆](https://github.com/I-TECH-UW/OpenELIS-Global-2/issues/1254)but every thing works well when in the .patient-head position is absolute but when the position is relative it overlaps it comes to span 3 column, I used the patient history page, some advise coledges

---

<div class="post-metadata">

### Author: ![tasksolver](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/tasksolver/32/1067_2.png) [@tasksolver](https://talk.openelis-global.org/u/tasksolver)
#### Post date: [October 7, 2024, 7:03pm UTC](https://talk.openelis-global.org/t/advise-on-the-issue/858/9 "2024-10-07T19:03:15Z")

</div>

hello @ELAI , try out these, they may help

- **Use a grid layout with explicit column spans** : You can control the exact number of columns an element should span using `grid-column: span N` for `N` columns.
- **Z-index** : Use `z-index` to control the stacking order of elements if they overlap unintentionally.
- **Margins and padding** : Adjust margins or padding to avoid overlapping elements. let me know incase

---

<div class="post-metadata">

### Author: ![ELAI](https://avatars.discourse-cdn.com/v4/letter/e/ac8455/32.png) [@ELAI](https://talk.openelis-global.org/u/ELAI)
#### Post date: [October 9, 2024, 2:10pm UTC](https://talk.openelis-global.org/t/advise-on-the-issue/858/10 "2024-10-09T14:10:42Z")

</div>

The issue is mainly on the fact that some of the pages have there grid system only with the lg={16} and the md and the sm attributes were not given values hence the problem arising

---

<div class="post-metadata">

### Author: ![tasksolver](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/tasksolver/32/1067_2.png) [@tasksolver](https://talk.openelis-global.org/u/tasksolver)
#### Post date: [October 10, 2024, 4:57pm UTC](https://talk.openelis-global.org/t/advise-on-the-issue/858/11 "2024-10-10T16:57:39Z")

</div>

will you attend tonight’s call
