Click here to Skip to main content
14,454,890 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hello,

I am close to finishing a webpage but I cant get the sidebar to align on the right side of the page like it is supposed to on the clone website (https://hackpacific.github.io/newsweek_clone/). I've tweaked the html/css multiple times but did not get the proper result. Also, the text under the main image has a transparent effect but the value background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), #fff 50%, #fff); is not working as well. If anyone could help me understand how to solve the issue it would be greatly appreciated. Thank you

What I have tried:

**HTML:**
<!DOCTYPE html>
<html lang="en">


  <!-- Body -->
  <body>
 <div class="container-fluid main-content">
      <div class="row">
        <div class="col-xs-12" col-md-9>
            <!--Main-->
            <div class="main-article">
            <div class="col-md-9 main wrapping">
              <div class="row">
              <div class="content-background">
                <img src="images/main/main_main.jpg" class="img-responsive">
                <div class="info-wrapper">
                <div class="glass"></div>
                  <div class="info">
                    <h2 class="category-main">
                      <a href="#">U.S.</a>
                    </h2>
                    <h2 class="story text-center"><a href="#">Justice Dept. To Force Reforms</a></h2>
                    <div class="summary text-center">"The residents of Ferguson have waited   nearly a year for their city to adopt an agreement."
                    </div>
                  </div>
                </div>
              </div>
            </div>

          
        
      
    

              <div class="main-horizontal-divider"></div>
              <div class="row">
              <div class="col-xs-12 col-sm-6 sub-box vertical-divider">
                <img src="images/main/main1.png" class="img-responsive">
                <div class="sub-info">
                  <h2 class="category-main">
                    <a href="#">U.S.</a>
                  </h2>
                  <h2 class="story text-center"><a href="#">Gravitational Waves Detected, Proving Einstein Right</a></h2>
                  <div class="summary text-center">"This [was] truly a scientific moon shot, and we landed on the moon."
                  </div>
                </div>
              </div>




              <div class="col-xs-12 col-sm-6 sub-box" id="sponsor-special">
                <div id="blue-background">
                  <img src="images/main/main2.jpg" class="img-responsive">
                  <div class="sub-info">
                    <h2 class="category-main blue">
                      <a id="asia" href="#">SPONSOR INSIGHT</a>
                    </h2>
                    <h2 class="story text-center"><a href="#">The Best Universities of Asia</a>
                    </h2>
                    <div class="summary text-center">"Universities from Asia and Europe are challenging the best schools in the USA. When it comes to choosing the right school then, the options have never been more diverse…"
                    </div>
                  </div>
                </div>
              </div>
            



            <!--Side Menu-->
            <div class="sidebar col-xs-12 col-md-3">
              <div class="nav nav-sidebar">
                <div class="grey-background">
                  <div class="bullet-list">
                    <div class="headlines-title">
                      Latest headlines
                    </div>
                    <ul id="sidebar-list">
                      <li class="bullet"><a class="bullet-a" href="#">Harriet Harman: The New Law on Gender Pay was Labour's</a></li>
                      <li class="bullet"><a class="bullet-a" href="#">French Court Will Hear Facebook Nude Painting Case</a></li>
                      <li class="bullet"><a class="bullet-a" href="#">Rolf Harris Faces Seven Indecent Assault Charges</a></li>
                      <li class="bullet"><a class="bullet-a" href="#">U.K. Airbnb Host Rejects Israeli for 'Occupying Lands'</a></li>
                      <li class="bullet"><a class="bullet-a" href="#">Watch: Real Madrid's Pepe Gets Into Valentine's Spirit</a></li>
                      <li class="bullet"><a class="bullet-a" href="#">Indonesia Blocking Gay Emojis From Facebook, Whatsapp</a></li>
                      <li class="bullet"><a class="bullet-a" href="#">Mourinho and Woodward ‘Cannot Have Spoken’ - Van Gaal</a></li>
                      <li class="bullet"><a class="bullet-a" href="#">Rwanda to Relocate Burundian Refugees</a></li>
                      <li class="bullet">
                        <div class="see-all">
                          <button class="see-all-headlines" type="button" class="btn btn-default">See All Headlines</button>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
                

              
    

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

**MAIN.CSS:**
body {
	color: black;
	background-color: white;
	margin: 0px;
}

.main {
    padding-left: 0px;
    padding-right: 0px;
    top: -20px;
    margin-left: -15px;
    margin-right: -15px;
}

media only screen and (max-width: 767px)
.wrapping {
    padding-left: 0;
    padding-right: 0;
}

.content-background {
	position: relative;
	background-image: linear-gradient(to bottom,rgba(255,255,255,0.5) 0,#fff 50%,#fff 100%);
}

.img-responsive {
    width: 100%;
}

.info-wrapper {
    position: relative;
}

@media only screen and (min-width: 768px)
.glass {
    background-image: linear-gradient(to bottom,rgba(255,255,255,0.5) 0,#fff 50%,#fff 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 155px;
}

.info {
	border-top: 4px solid #ff0500
	padding: 15px 30px 25px;
	position: relative;
	bottom: 0; left: 0; right: 0;
}

@media only screen and (min-width: 768px)
.info {
    margin-top: -150px;
}

.category-main {
	color: rgb(255,55,51);
	text-transform: uppercase;
	text-align: center;
}

@media only screen and (min-width: 992px)
.category-main {
    font-size: 22px;
}

a {
    color: inherit;
}

.story {
    text-transform: uppercase;
    color: black;
}

.main-horizontal-divider {
    width: 100%;
    border-bottom: 1px solid #f2f2f2;
}

.sub-box {
    margin-top: 15px;
    border-bottom: 1px solid #f2f2f2;
}

@media only screen and (min-width: 768px)
.sub-box {
    height: 550px;
}

@media only screen and (min-width: 992px)
.sub-box {
    height: 670px;
}

@media only screen and (min-width: 1200px)
.sub-box {
    height: 690px;
}

.vertical-divider {
    border-right: 1px solid #f2f2f2;
}

.main-content {
    overflow-y: visible;
    position: relative;
    height: 100px;
}

.main-article {
  margin-left: -15px;
  margin-right: -15px;
}

#blue-background {
    border: 1px solid #cdf0ff;
    background-color: #e6ffff;
}

@media only screen and (min-width: 768px)
#blue-background {
    height: 535px;
}

@media only screen and (min-width: 992px)
#blue-background {
    height: 555px;
}

@media only screen and (min-width: 1200px)
#blue-background {
    height: 675px;
}

.category-main.blue {
    color: #00B7FF;
}

#asia {
    color: green;
}

.navbar {
  margin-bottom: 0;
}

**SIDEBAR.CSS:**
.bullet-list {
    padding: 30px 0px;
}

.headlines-title {
    letter-spacing: 0.25px;
    color: #FF0500;
    text-transform: uppercase;
    margin-bottom: 10px;
    position: relative;
}

@media only screen and (max-width: 992px)
.headlines-title {
    text-align: center;
    font-size: 21px;
}

#sidebar-list {
    margin-bottom: 40px;
}

.bullet {
    position: relative;
    padding: 15px 15px 15px 15px;
    top: 15px;
    left: -25px;
    color: #FF0500;
    list-style-position: inside;
    list-style-type: square;
}

@media only screen and (max-width: 992px)
.bullet {
    text-align: center;
}

.bullet-list li:first-child {
    border-top: 0;
}

.bullet a {
    font-weight: bold;
    font-size: 18px;
    color: #181818;
}

.bullet-list li {
    border-top: 1px solid #e5e5e5;
}

.bullet-list li:last-child {
    list-style-type: none;
    border-top: 0;
}

.see-all {
    display: block;
    text-align: center;
}

.see-all-headlines {
    background-color: #e5e5e5;
    color: #757575;
    font-size: 16px;
    line-height: 50px;
    display: block;
    text-align: center;
    width: 100%;
}

.bullet-list {
    padding: 30px 0px;
}
Posted
Updated 14-Feb-20 3:13am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100