Bug Fixes
This guide walks through the final fixes for the code structure in order for all of the styles to work properly.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

Before adding the final touches to our project, let's fix some of the issues we're currently seeing.

Firstly, we'll have to fix the double logo.

large

If you see, our category links are all the way down, and not on the right side, and we'll have to fix this too.

Both these issues are related, so a common fix would work for both. Since we have a double logo, the second one pushes our content down, and this in turn, has moved the category links below the article.

To fix this issue, I went to main.css file, and started looking for a class called .logo. Then, I found that there were two logo classes, and this is what is causing the problem.

.logo {

    padding:29px 48px 30px 2px;

}

img.logo-small {

    width:59px !important;

    height:57px;

    position: absolute;

    top: 25px;

    left: 20px;

    display:none;

This class was not included in the html file, so to fix it, let's add this class here:

<a class="col-xs-3 logo pull-left" href="#">
  <img src="images/common/logo.png" alt="Logo">
  <img class="logo-small" src="images/common/logo_small.png" alt="Logo">
</a>

Now, if you refresh the browser, everything should work fine.

large

Let's see how it looks on a smartphone, and this is fine too. Here, you can see the small logo alone.

So, how does this work? If you go to the .logo-small class, you'll see that it has a value of "none" for the display attribute. So, it won't be displayed for a normal screen. But, when the size shrinks, the value of display will change to "block", in the @media code for mobile screens, while the regular logo's display would be changed to "none".
I think that's a cool implementation.

Before we end, there are a few small changes I want to make. The logo is getting a little stretched for mobile screens, so let's fix that by changing the image width and height. Let's put a value of 50px for the width, and we'll get rid of the height attribute completely.

img.logo-small {

    width:59px !important;

    position: absolute;

    top: 25px;

    left: 20px;

    display:none;

}

This looks a lot better now.