CSS not recognising class

Asked by At

Trying to adjust the height & width of an image, but the CSS isn't recognising the class/isn't working. I know my class method is different to my other classes, but when I try and make it the same, it gives a error message. I'm using the Ruby language. It's probably going to be something simple, but I'm too new at this to understand. Also having a problem with Twitter bootstrap rows. I'll be forever grateful if you can see anything wrong with that too.

HTML is:

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <%= image_tag @user.profile.avatar.url, class: 'lego-man' %>
    </div>
    <div class="col-md-6">
      <h1><%= @user.profile.first_name %> <%= @user.profile.last_name %></h1>
      <h3><%= @user.profile.job_title %></h3>
      <div class="well">
        <h3>Decription</h3>
        <%= @user.profile.description %>
      </div>
      <% if current_user.plan_id == 2 %>
        <div class="well">
          <h3>Contact Information</h3>
          <%= @user.profile.phone_number %><br/>
          <%= @user.profile.contact_email %><br/>
        </div>
      <% end %>
    </div>
  </div>
</div>

CSS is:

.lego-man {
  width: 128px;
  height: 128px;
}

4 Answers

1
anjali khant On

can you try like this

 <%= image_tag @user.profile.avatar.url , size: "128x128" %>

For reference

Click here:- https://apidock.com/rails/ActionView/Helpers/AssetTagHelper/image_tag

0
rony36 On

Just make sure the CSS code you are writing is properly loading.

e.g. in your layouts/application.html.erb contains this type of line to load application.css

<%= stylesheet_link_tag 'application', media: 'all' %>

And that css containing file is included in application.css

0
Ayush Kanoongo On

In rails, three methods are available to add your css styles.

  1. Add this style property Inline in image_tag

    <%= image_tag @user.profile.avatar.url, :style => "width: 128px; height: 128px;" %>
    
  2. Add this style property internally in same file using <style> tags

    <style>
      .lego-man {
        width: 128px;
        height: 128px;
      }
    </style>
    
  3. Add this css property externally in app/assets/stylesheets/application.css

0
Anshul Riyal On
.lego-man {
  width: 128px!important;
  height: 128px!important;
}

try using over ride your class.

<div class: 'lego-man'>
  <%= image_tag @user.profile.avatar.url %>
</div>

and then add <%= stylesheet_link_tag 'application', media: 'all' %> to application layout