CSS doesn't work correctly in my RoR application

Question

I'm making a blog following Mackenzie Child 12 in 12 RoR tutorials.

I followed the tutorial perfectly and followed his code to the letter.

My issue is that the css stylesheets don't work as expected. My problem for the blog project is that no matter what I do, I cannot get the .svg logo to resize with the CSS code. I even went so far as to copy and paste his code exactly into my files which were identically named.

the original logo size is something like 400x600px and I want it resized to 40x60 to fit in the side bar.

This is the CSS I am using:

@import 'normalize';

html, body {
    font-family: 'Raleway', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
}

a {
    text-decoration: none;
    color: inherit;
}

#sidebar {
    width: 250px;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    background: #f5f7f9;
    padding: 7em 0 0 0;
    border-right: 1px solid #d6dce0;

    #logo {

        width: 50px;
        position: absolute;
        right: 3em;
        top: 3em;
    }
    ul {
        list-style: none;
        text-align: right;
        padding-right: 3em;
        .category {
            font-weight: 700;
            font-size: 0.7em;
            text-transform: uppercase;
            color: #33acb7;
        }
        li {
            padding: .5em 0;
            a {
                color: #9eafba;
                text-decoration: none;
                transition: all .4s ease;
                &:hover {
                    color: #33acb7;
                }
            }
        }
        .active {
            a {
                color: #33acb7;
            }
        }
    }
    .sign_in {
        position: absolute;
        right: 3em;
        top: 80%;
        font-size: .8em;
        color: #9eafba;
    }
}

and this is the html.erb code I am modifying:

<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
</head>
<body>
    <div id="sidebar">
        <div id="logo">
            <%= link_to root_path do %>
                <%= image_tag "logo.svg" %>
            <% end %>
        </div>

        <ul>
            <li class="category">Website</li>
            <li>Blog</li>
            <li>About</li>
        </ul>
    </div>

<%= yield %>

</body>
</html>

I can't figure it out for the life of me. I am using normalize to zero-out the browser presets.

The other issues I am having with css and rails has to do with css not adding table styles as it should. half of the styles I apply don't do anything at all, relating to padding, text formatting, colors, etc. Has anybody else had this issue with CSS not working as it should?

It's like my CSS compilers are broken on both of my macs.

I'm running ruby on rails server in terminal on OS X yosemite... if it makes a difference.

Thanks in advance.

KB

Answer 1

Try changing the #logo selector to include #logo img and see if that output correct results:

#logo img {
    width: 50px;
    position: absolute;
    right: 3em;
    top: 3em;
}

CSS doesn't work correctly in my RoR application

Question

1 answers

solution1
1 ACCPTED 2015-07-16 03:31:02

CSS doesn't work correctly in my RoR application

Question

1 answers

solution1 1 ACCPTED 2015-07-16 03:31:02

solution1
1 ACCPTED 2015-07-16 03:31:02