CODEWITHSUNDEEP
htmlcssresponsive-design
aln447
aln447

Reputation: 1011

Make text stick to right edge of div

I'm working on a responsive website, and have ran into a small problem with menu text. What I want it to do is to stick to the right edge of its div, while scaling the width down. The container in which the div and text are, scales with the site, when the width goes below 1000px. Unfortunately I can't seem to find a decent css command to make this possible. My html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Żaglówki!</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

      <!--

          COLOR SHEME:
            000c14
            008ee8
            0aa1ff
            5fb2e8
            6fc7ff  -->



  </head>
  <body>
      <div id="container">
      <div class="hpanel"></div>
      <div id="MainPhotoMenu" style="background-image: url(image/bg1.jpg);">
          <h1 id="name">SUPER ŻAGLÓWKI!!</h1>
          <ul>
          <li><a href="#" class="menulink">O Nas</a></li>
           <li><a href="#" class="menulink">Eventy</a></li>
              </ul>
          </div>
      <div class="hpanel"></div>



      </div>










    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

and CSS:

body{font-family: 'Droid Serif', serif;}

#container{
width: 1000px;
height: 1300px;
margin: auto;
   box-shadow: 4px 4px 20px #9b9b9b;
    background-color: #5fb2e8;
}

#container:before{
background-image: url(image/ELM2.jpg);
    display:block;
position: absolute;
    width:100%;
    height:100%;
    z-index:-1;
}

.hpanel{
    display:block;
     width: 100%;
    height: 20px;
    background-color: #0aa1ff;
    box-shadow: 5px 1px 9px #9b9b9b;
}

#MainPhotoMenu{
    position:relative;
width:100%;
height:220px;
background-position: bottom;
background-attachment: fixed;
    background-size: cover;
    box-shadow: inset 1px 1px 120px;
     background-repeat: no-repeat;
    text-align: right;
}

#name{
color:#52a3d9;
    position:absolute;
    top: 145px;
    font-size: 60px;
    text-shadow: 1px 1px 10px #000c14;

}

.menulink{
color:white;
position:relative;
top: 50px;
left: 30px;
font-size: 40px;
    text-shadow: 1px 1px 15px #000c14;
    vertical-align: middle; 


}




@media only screen and (max-width: 1000px) {
    #body {
        width: 100%;
    }
}

@media only screen and (max-width: 580px) {
    #name {
        top:175px;
        font-size:2em;
    }
}

div {
  @include box-sizing(border-box);
}

Will be grateful for any help

Upvotes: 1

Views: 1540

Answers (1)

mohammad sirajuddin Rayyan
mohammad sirajuddin Rayyan

Reputation: 106

Solution 1:

why don't you change "container" width to 100% if you need div as responsive in resolution less than 1000px

@media only screen and (max-width: 1000px) {
#body {
    width: 100%;
}#container{width:100%}

}

Solution 2:

You need to change "container" width to max-width

#container{max-width: 1000px;height: 1300px;margin: auto;box-shadow: 4px 4px 20px #9b9b9b;background-color: #5fb2e8;

}

Upvotes: 1

Related Questions