CODEWITHSUNDEEP
cssruby-on-railsrubysinatra
slope
slope

Reputation: 33

CSS applied to all pages but one - Ruby/Sinatra

I'm creating a simple web application with Ruby using Sinatra, and when modifying the views, the CSS is applied to all .erb files except one. I'm not quite sure what the issue is. I've tried:

This is my layout.erb file 

<br/>
<h2>Upload a Video</h2>
<br/>
<br/>
<form action="/create_video" method="POST">
  <div class="col-6">
    <label for="videoTitle">Video Title</label>
    <input type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter video title" name="title">
  </div>
  <br/>
  <div class="col-6">
    <label for="videoDescription">Video Description</label>
    <input type="text" class="form-control" placeholder="Enter video description" name="description">
  </div>
  <br/>
    <br/>
    <div class="col-6">
     <label for="videoURL">Video Link</label>
     <input type="text" class="form-control" placeholder="Enter link to video" name="l_url">
    </div>
    <br/>
    <div class="col-6">
     <label for="listingUrl">Company</label>
     <input type="text" class="form-control" placeholder="Enter company name" name="company">
    </div>
    <br/>
  &nbsp;&nbsp;<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br/>
<br/>
</div>

My layout.erb file 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300|Niramit|Nunito" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>

    <%= erb :navigation %>

    <main role="main">

        <%= yield %>

    </main>


    <footer class="end">
         <div class="footer-grid">
      <div class="footer-one">
        <p> logo<p>
      </div>
        <div class="footer-two">
            <p>&copy; Copyright Ignite 2018. All rights reserved.</p>
            <p>Terms of use • Press Inquiries • General Inquiries • Investors</p>
        </div>
        <div class="footer-three">
        <img src="https://image.flaticon.com/icons/svg/185/185981.svg" width=40 height=40>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <img src="https://image.flaticon.com/icons/svg/185/185961.svg" width=40 height=40>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <img src="https://image.flaticon.com/icons/svg/185/185985.svg" width=40 height=40>
        </div>
    </footer>


    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Finally, this is a small snippet where the style sheet IS working:

   <br/>
   <br/>
   <h2>Videos</h2>
   <br/>
   <br/>
   <% @videos.each do |v| %>
      <img src="<%= v.logo %>" width="110" height="110">
      <h3><%= v.title %></h3>
      <p><%= v.l_url %></p>
      <p><%= v.description %> </p>
   <br/>
   <% end %>
   <br/>
   <br/>
   <br/>
   <br/>
</div>

Any idea what might be wrong? I appreciate any tips.

Upvotes: 0

Views: 350

Answers (1)

timbillstrom
timbillstrom

Reputation: 1176

I think this might resolve your issue, I think the link to your stylesheets might be broken. If the page is not in the top-path, if it looks something like this:

http://localhost/namespace/ThisIsThePage

In your layout.erb-file, you are refering to the stylesheets using:

href="style.css"

In your CSS-imports, I'd recommend to refer to the stylesheets by using e.g:

href="/style.css"

Note the slash before the filename. The slash tells the browser that the resource will loaded from the root-path of your webserver. Without the slash, the browser will try to grab the style.css from the path below:

http://localhost/namespace/style.css

Upvotes: 3

Related Questions