How do I make my site adjust to native monitor size? : webde...

Hello, I am from Croatia and I’m recreating my outdated school’s website.

I know this question has been asked to death, but still, I don’t understand what I have to change.

I found some guides, but whatever I add doesn’t help.

This is what the site looks configured to my monitor.

I centered it all with margins and used some absolute positioning.

I tried adding stuff like

body {     
    margin: 0;     
    padding: 0;     
    width: 100%;    
    text-align: center; 
}

#wrapper {
    width: 95%; 
 }

#wrapper {
    width: 1080px;
    margin: auto auto; 
 }

But it would all be misplaced.

The CSS

           body {

                margin: 0;
                padding: 0;
                height: 100%;

            }

            #wrapper {

                width: 95%;

            }

            #top-bar {

                background-color: #18181E;
                width: 100%;
                height: 35px;
                position: relative;
                margin: 0;
                padding: 0;

            }

            #Title {

                font-family: 'Bebas Neue', cursive;
                color: #DEC79B;
                font-size: 30px;
                float: left;
                margin-top: 0;

            }



            #titleLogo {

                float:left;
                width: 55px;
                height: 40px;
                margin: 0px 2px 10px 60px;
                position: absolute;
                top: -4px;

            }

            .topBarMenuItem {

                position: relative;
                top: 4px;
                font-family: 'Oswald', sans-serif;
                color: #ffffff;   
                text-decoration: none;  
                font-size: 18px;
                margin-left: 4px;
                border-left: 1px solid #ffffff; 
                padding-left: 4px;  
                vertical-align: top;

            }

            #Home {

                margin-left: 456px;
            
            }

            #arrow {

                width: 25px;
                height: 25px;
                color: #ffffff;
                margin: 6px 0px 0px 8px;

            }

            #clear {

                clear: both;

            }

            #osABPicture {

                height: auto;
                width: 100%;
                position: relative;
                top: -25px;

            }

            #column {

                width: 100%;
                height: 35px;
                background-color: #18181E;
                position: relative;
                top: -26px;

            }

            .borderRight {border-right: 1px solid #ffffff}
           
            #loginButton {border: none; color: #DEC79B}

            #ednevnik {

                padding-right: 10px;

            }

If I would add .center or remove margins for centering, the text would just sink or disappear.

I really want to continue this project but I don’t want to make a bad habit.

Any help or resource would be appreciated.

Source link