Changes to updated CSS file do not take effect

Question

I have the following haml file in my ROR application, which I am trying to implement typography and font changes to via CSS for the portion of text under #index_orders. However, when I've implemented the changes below, specifcally in the CSS file, nothing is taking effect when I refresh my development environment (localhost:3000).

Here is the haml file below with the appropriate nesting and spacing included:

index.html.haml

<div class="jumbotron">
%h1 <center><font color ="#c0392b"><i>Hello World!</i></font>
<center>
%br/
%h3 Some Generic Message, Woot! :)
%br/
<a class="btn btn-danger btn-lg" href="#" role="button">Sign Up</a>

#index_orders
  - @orders.each do |order|
      %h3= link_to order.date.strftime("%A %B %d, %Y"), order
      %h4= order.name

Now here is the select portion of the application CSS file with the relevant code:

application.css.scss

#index_orders {
    h2 {
        margin-bottom: 0;
        font-weight: 100;
            a {
               color: white;
            }
        }
    }

Why aren't the font color/typography changes taking effect?

Many thanks!

Have you tried clearing your browser cache?

Barmar
– Barmar

2016-02-13 00:43:40 +00:00
Commented Feb 13, 2016 at 0:43 — Barmar
– Barmar, Commented Feb 13, 2016 at 0:43

Alex Zielonko · Accepted Answer · 2016-02-13 00:44:38Z

1

The styling rule is only targeting the h2 element. As there is not an h2 element in your index.html.haml, you will not see the anticipated visual changes.

To see the styling rule applied, change the h2 selector in application.css.scss to target the desired h1 or h3 element.

For example,

#index_orders {
    h3 {
        margin-bottom: 0;
        font-weight: 100;
            a {
               color: white;
            }
        }
    }

answered Feb 13, 2016 at 0:44

Alex Zielonko

411 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changes to updated CSS file do not take effect

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related