App displayed wrongly depending on the monitor

App displayed wrongly depending on the monitor
0.0 0

#1

Good evening,

I recently built my wikipedia app. The app works perfectly when I tried it, but the problem came when I post it on a feedback threat.

The app is not displayed the same way depending on if I use it on my computer or another’s. (link to a

Here’s how it is displayed on my computer :

It looks like this weather I open it on firefox, chrome , edge or on the desktop.

Now here’s how it’s displayed on my fellow campers’ computer :

Again, it looks like this whatever the program he uses to open it. I really have no clue about why this kind of thing happens, I don’t know the dimension of the monitor of my comrade, but is it possible that depending on the size of a monitor the app might be displayed differently ? And if so, is it a way to ensure the good axhibition of the page ? Thanks a lot for your time !

EDIT : link to the codepen : https://codepen.io/Hadrienallemon/full/ddVGby/


#2

is it possible that depending on the size of a monitor the app might be displayed differently ?

Indeed^^
I don’t know if this is the case ( if the problem persist i’ll suggest you to share your codepen ) but the page could look completely different ^^
Just thinking about a % distance from the top of the first box where results are displayed, maybe something else…anyway if you want a responsive page you should consider those variations ( adjust the size of your browser window to control the behaviour of your elements).
Something you can do is to use media-queries (MDN - media queries) if you can’t manage to link each element to the other in a ‘responsive’ way^^

Hope it helps,
-LyR-


#3

Oh yeah I completely forgot the the link of the codepen, it is fixed.

Thr problem is that I do not have the same weird-responsiveness even when I re-size my window, and I have a pretty big monitor. I’ll visit my parent this weekend and i’ll borrow their cpu to see if the problem persists. Anyway, thanks for the awnser, i’ll look into the article if I don’t find a solution :slight_smile:


#4

It is more about the change of browser window height and not the width. If I shrink my height, then the search box is above.

Browser window full height

Browser window height shrunken


#5

Mai I enquire about your monitor size ?
Also, if would you please try it again now that I changed the position of the results into a percentage ?
Thanks you !


#6

You can simulate a taller monitor by using Ctrl - on Chrome. It will appear as if your app is on a taller and wider screen. The problem with what you changed, is if someone splits there desktop screen vertically which I do alot (to have multiple documents showing at once), then your entire top portion disappears. You can simulate this by using Ctrl + See how there is no way to access the content (even with the scroll bar)?


#7

I see. Well I really need to follow some tutorials on responsive designs, my app is a total mess :frowning: