Twitter Bootstrap Question posted in

CSS not recognising class-Twitter bootstrap

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;
}
Tags:

4

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
  4. 0 
    .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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search