How to fix the element size with screen size in html

Question

I don't know but when I change the screen size my elements do not arrange themselves even though I have used meta viewport tag please visit my GitHub page https://github.com/SouradipMandal/Orgdal for understanding what's the problem I am talking about and please help me solve this issue.
Download the code and open the .html file in your browser and type "Benzene" in the input field and press "Enter" a output will come , now minimize the browser window and try to resize see what happens. Please help me fix this.
I will not be able to explain my problem to you until you yourself see the problem.

I had included the code above but for better again removed it. Open it from the link above by downloading it.

yes yes offcourse please – Souradip Mandal Jun 16 '21 at 13:40 — Souradip Mandal, Jun 16 '21 at 13:40
Wait i am seeing what i can do – Souradip Mandal Jun 16 '21 at 13:41 — Souradip Mandal, Jun 16 '21 at 13:41
I have inserted my code. – Souradip Mandal Jun 16 '21 at 13:53 — Souradip Mandal, Jun 16 '21 at 13:53

Mh Eftekhari · Answer 1 · 2021-06-16T13:45:14.110

2

change your Css to

#body {
    background: #000000;
    height: 100vh;
    width: 100%;
}

edited Jun 16 '21 at 13:45

answered Jun 16 '21 at 13:36

Mh Eftekhari

31
3

you should set set your height and width under 100vh – Mh Eftekhari Jun 16 '21 at 13:38
Ok testing what you told – Souradip Mandal Jun 16 '21 at 13:46
why have you used 100% – Souradip Mandal Jun 16 '21 at 13:47
no but still the elements clump over each other it didn't fix my issue – Souradip Mandal Jun 16 '21 at 13:49
1

why you dont use bootstrap. you used in all element over 100vh and you use absolute position in your element they broken your template to responsive – Mh Eftekhari Jun 16 '21 at 13:54
What is the difference between relative and absolute? – Souradip Mandal Jun 17 '21 at 04:28
1

if you use absolute you should set left and top. and you should use javascript to manage your object in your page. but you can use html and css. if you want set object in center you can use margin:auto; for obj and set position relative for body and display inline and .... – Mh Eftekhari Jun 17 '21 at 08:24
I got an idea I just set the max and min size of every element in px and set original size in vh/vw now it works thank you. – Souradip Mandal Jun 17 '21 at 10:32

score 1 · Accepted Answer · answered Jun 16 '21 at 13:53

You are using vh and vw way too much and it's breaking the styling you have. I can not give you a fix for your styling. it will be too complicated.

And you are also using a display absolute everywhere. it's ok to be used, but if you depend on it, it will make your life harder when styling a page.

simple steps that can "help" a bit can be:

removing the height and width values from the #body styling.
change every vw and vh to % on the #screen styling.
change the left property from 65 to 15 so it will be width : 15% (can be 20 or so).
change the height value from the "display_top_margin" class to be about 60px and that should fix your top bar.
the Max-width and Max-height are breaking your buttons on the "name_more_info" class.

I advise you to "Restyle the page again and try making it work without depending on vh and vw as units.

The difference between vh/vh and % is explained simply here: CSS Units - What is the difference between vh/vw and %?

Wait lets see what happens – Souradip Mandal Jun 16 '21 at 14:00 — Souradip Mandal, Jun 16 '21 at 14:00

How to fix the element size with screen size in html

2 Answers2