- Read Tutorial
- Watch Guide Video
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.
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.
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.