stackoom
  简体   繁体   中英

How to shrink webpage to any size screen- I can't tell what I'm doing wrong

 原文  2017-04-27 01:26:05  0   1    html/ css

Question

After learning a little bit of web development in one of my college classes I decided to give it a shot on my own and make my own webpage. I want it to serve as a virtual resume. I have it's visuals and styling set up and it looks good on my laptop screen however it's not adaptive to the screen size. I've looked at others similar question and have tried implementing their ideas (such as setting my wrapper div width and height to 100%) but nothing works. Can someone tell me where I am going wrong. I'll provide an image of what it should look like in case your screen may be larger or smaller. Webpage visual goals Github repo- development branch: branch1/land-page My HTML: 

<!Doctype html>
   <html>
<head> 
    <title>Jordyn N. Smith</title>
    <!--JQuery Library-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <!-- My CSS stylesheet -->
    <link rel="stylesheet" href="stylesheet.css">
    <!-- Google fonts -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Marck+Script|Poiret+One">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--Javascript file functionality -->
    <script type=text/javascript src="index.js"></script>
</head>
<!--Angular functionality-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="myCntrl.js"></script>
<div id=wrapper>
    <body onload="onload()">
        <!--Info Drawer-->
        <div id="infoDrawer" class="drawer" ng-controller="myCntrl" ng-app="myApp">
            <span class="drawerFont" id=information>{{Information}}</span>
            <!--Side navbar-->
            <div id="mySidenav" class="sidenav col-lg-3">
                <a id=aboutMe class="menu-btn abt" ng-click="aboutMe()">About Me</a>
                <a id=skills class="menu-btn skill" >Skills</a>
                <a id=exp class="menu-btn exp" >Experience</a>           
                <a id=award class="menu-btn award" >Awards/Honors</a>
                <a id=contact class="menu-btn contact" ng-click="contacts()">Contacts</a>
                <a id=dlResume class="menu-btn dl" href="Resources/Resume-lastupdate1:31:17.docx.pdf" download>Download Resume</a>     
            </div>
        </div>
        <!--Name and message-->
        <div class="col-lg-9 message">
            <div class="name">Jordyn Niara Smith</div>
            <div class="wel-message">Welcome to my page. Take a look around.</div>
        </div>
    </body>
</div>

My CSS: 

/*Background image styling*/
body{
background-image: url(Resources/FaceQ.jpg);
background-repeat: no-repeat; /*don't repeat image*/
background-position: center top; /*position image in center from top*/
background-color: black !important; /*override default color value w/ image*/
/*height: 100%; fix height of page*/
/*position: fixed;*/
overflow-x: scroll;
overflow-y: scroll;
padding: 0;
margin: 0;
 min-width:900px;
min-height: 450px;
}

body#wrapper{
width:100%;
height: 100%;
}


/*Name and welcome message div styling */
div.name{
color:white; 
/*    text-align: center; */
font-size: 7em;
font-weight: bold;
font-variant: small-caps;
font-family: 'Marck Script', cursive; /*googl font*/
text-shadow: 4px 4px 4px black;
width: 913px;
}
div.wel-message{
color: white;
text-align: center;
font-variant: small-caps;
font-size: 2em;
font-family: 'Poiret One', cursive;
text-shadow: 2px 2px 2px black;
margin-top: 0px;
width: 900px;
}
div.message{
/*keeps message fixed to center of screen*/
position: fixed;
/*
height: 200px;
width: 994px;
*/
height: 30%;
width: 90%;
margin: -100px 0 0 -200px;
top: 375px;
left: 458px;
}

/*nav bar styling*/
body div.col-lg-3{
padding: 0;
width: 278px;
height: auto;
position: fixed;
z-index: -1; /*position behind splash message*/
top: 200px; /*set position from top*/
left: 0;/*set position from left*/
}
div.sidenav {
height: 330px; /* 100% Full-height */
width: 278px; /* 0 width - change this with JavaScript */
background-color: transparent;
overflow-x: hidden; /* Disable horizontal scroll */
}

a.menu-btn{
padding: 8px 8px 8px 32px;/*spaces out buttons*/
font-family: 'Poiret One', cursive; /*google font*/
font-size: 2em;
width: 100%;
float:left;
}

#aboutMe{
color:red;
} 
/*change color on hover */
a.abt:hover{
color:white !important;
background-color: red;
text-decoration:none;
}

#skills{
color:dodgerblue;
float: none;
padding-right: 70%;
}
a.skill:hover{
color:white !important;
background-color: dodgerblue;
text-decoration:none;
}

#exp{
color:greenyellow
}
a.exp:hover{
color:white !important;
background-color: greenyellow;
text-decoration:none;
}

#contact{
color:yellow;
}
a.contact:hover{
color:white !important;
background-color: yellow;
text-decoration:none;
}

#dlResume{
color: mediumpurple;
}
a.dl:hover{
color:white !important;
background-color:mediumpurple;
text-decoration:none;
}

#award{
color:darkorange;
}
a.award:hover{
color:white !important;
background-color: darkorange;
text-decoration:none;
}

/* The info drawer */
.drawer {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
opacity: .9;
top: 0;
right: 0;
background-color:#111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.drawerFont{
/*font styling*/
font-family: 'Poiret One', cursive; /*google font*/
color: white;
z-index: 1;
font-size: 4em;
}

1 answers

solution1
 0  2017-04-28 23:13:43

I added the background size attribute to the body a set it to a percent, and modified my font size to use vw instead of pixels or percent, and found it to be more adaptive to browser size. Now I just need to keep them from shift around...

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Can someone please tell me why my css won't link with html? I can't figure out what I'm doing wrong? My code is malfunctioning, but I can't see what I'm doing wrong How can I fix the page width to shrink to the screen size? How can I shrink images to fill screen size? Can't insert values in database MYSQLI what I'm doing wrong? Can't figure out what I'm doing wrong with this php conditional I'm working on a webiste and this code in the Gutenberg editor doesn't make any sense. Is this normal, what am I doing wrong? Trying to get 4 pictures into a grid but can't see what I'm doing wrong Jquery command not executing, can't see what I'm doing wrong I can't get my background image properly linked on my webpage. what am I doing wrong?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM