CODEWITHSUNDEEP
css
joe
joe

Reputation: 1135

How to make logo stay in position even when the browser is resized

JSFIDDLE demo

HTML

    <div class="ratio-1439-330 bg-cover" style="background-image: url('https://www.agtinternational.com/wp-content/uploads/2013/11/City-solution.jpg');">
      <div class="l-center" style="max-width: 1240px;">
       <div class="square-logo bg-cover"
        style="background-image:url('http://www.astronautamarcospontes4077.com.br/wp-content/uploads/2014/07/person-icon.png');">
        </div>

        <div class="header-cover" style="background-color: #373737; opacity: 0.9; position: absolute; bottom: 0; left:0; width: 100%; overflow: hidden; padding: 10px 0;">
          <div class="l-center" style="max-width: 1240px">
          <div class="nav nav-tabs" style="margin-left: 338px">
            <a class="active" href="#overview" data-toggle="tab">
              Overview
            </a>
            <a href="#visits" data-toggle="tab">
              Visit
            </a>
          </div><!-- ./tab-lined-top-->
       </div><!--tabs-->
       </div><!--header cover-->
     </div>
    </div>

    <div class="tab-content l-center" style="max-width: 1240px;">
      <div id="overview" class="tab-pane active">
        <div class="l-center" style="max-width: 1240px;background:red;">
         TEST 1
       </div>
      </div><!--#overview-->
      <div id="visits" class="tab-pane">
       <div>
       TeST 2
      </div>
      </div>
    </div><!--tab-content-->

CSS
[class*="ratio"] {
  position: relative; }
  [class*="ratio"]:after {
    content: '';
    display: block; }
  [class*="ratio"] .cly-ratio-content {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }

.ratio-1439-330:after {
  padding-top: 22.932592078%; }

.l-center{
  margin: 0 auto;
}

.square-logo{
  background: #fff;
  position: absolute;
  width: 180px;
  height: 180px;
  bottom: 25px;
  left: 0;
  margin-left: 115px;
  z-index: 800;
  opacity: 1;
}

.bg-cover{
   background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover;
}

.nav-tabs{
  border-bottom: 0;
}

.nav{
  margin-bottom: 0;
}

Currently it works on jsfiddle, but not on my local machine so you might not understand what I am asking. Bootstrap is only there for tabs to be clickable. The logo move from left to right when browser is being resized and it looks jumpy while moving. Another issue is that the div with l-center and max-width seems not to be working well for tab pane content. Suspect that it is because of no height.

Is there any way around to force make logo stay vertically lined to tab content and tabs should move as well while browser is resizing?

Help appreciated!

Upvotes: 0

Views: 1568

Answers (2)

Ahmad Sharif
Ahmad Sharif

Reputation: 4435

First of all please remove the inline css for flexibility. If your html code like this

 <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="square-logo">
                        <a href="#"><img src="images/logo.png" alt="Logo"></a>
                </div>      <!-- End Logo Block -->
            </div> <!-- End Column 12 -->
        </div> <!-- End row -->
</div> <!-- End Container -->

Then to make your logo center add this css code.

.square-logo {
    display: table;
    margin: 0 auto;
}

Upvotes: 1

Sleek Geek
Sleek Geek

Reputation: 4686

If I understand you correctly, the problem must be that the block of code below has a fixed margin left property value of 115px. So it doesn't actually move on re-size, it just leans on the given margin value. Until there isn't a fixed margin-left, it will keep happening.

.square-logo {
     background: #fff;
     position: absolute;
     width: 180px;
     height: 180px;
     bottom: 25px;
     left: 0;
     margin-left: 115px;
     z-index: 800;
     opacity: 1;
}

Fix I suggest you do something like below

     .square-logo{
          background: #fff;
          position: absolute;
          width: 50%; /* Adjust as needed */
          height: auto;
          bottom: 25px;
          left: 25%; /* Adjust as needed */
          z-index: 800;
          opacity: 1;
        }

Note: You may need to adjust the example to suit your need. Just don't use margin-left

Upvotes: 1

Related Questions