CODEWITHSUNDEEP
htmlcss
colinebrlt
colinebrlt

Reputation: 15

rails css: website not responsive on mobile devices

My website looks great on desktop but I'm having trouble making it responsive on mobile devices (it's just a zoomed out version of the desktop website, except for the jumbotron that is actually completely zoomed in and blurry...).

The website is just one homepage with a jumbotron that takes up the entire screen size and then multiple sections one after the other that 'wrap' over the jumbotron when scrolling down. This effect looks great on desktop so I'd like to keep it, but I believe this may be why it's completely unresponsive on smaller devices.

My jumbotron:

<div class="container-fluid jumbo">
  <div class="jumbo-text text-center">
    <h4>TITLE</h4>
    <div class="btn btn-primary mt-3"><a href="tel:06 00 00 00 00" class="text-white"><i class="fa fa-phone-alt mr-2"></i> 06 00 00 00 00</a></div>
  </div>
</div>

My homepage (the content class allows me to do the section wrap over jumbotron effect):

<%= render 'jumbotron' %>

<div class="content">
  <%= render 'therapy' %>
  <%= render 'consult' %>
  <%= render 'modalities' %>
  <%= render 'method' %>
  <%= render 'background' %>
  <%= render 'contact' %>
  <%= render 'map' %>
  <%= render 'layouts/footer'%>
</div>

My main.css (I believe this might be where the problem is, with all of the z-index, and fixed jumbotron?):

/* HOMEPAGE */

.content {
  position: relative;
  z-index: 2;
  margin-top: 100vh;
  width: 100%;
}

.custom-section {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

/* JUMBOTRON */

.jumbo {
  background-image: url("L1000286.jpg");
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
  padding: 40px 10px;
  color: blue;
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100vh;
  top: 0;
}

.jumbo-text {
  position: absolute;
  left: 50%!important;
  z-index: 10;
  color: rgb(236, 234, 234);
  text-align: center;
  top: 50%!important;
  transform: translate(-50%, -50%);
  width: fit-content;
  padding: 50px
}

Example of a section (they're essentially always the same layout):

<section class="bg-primary text-white custom-section" id="consult">
  <div class="container">
    <h3>Title</h3><br>

    <p>Some random text</p>
  </div>
</section>

My main.js:

function dynamicNavbar() {

  $(document).ready(function() {
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        var height = $(window).height() - $(".navbar").height();
    
        if (scroll >= height) {
            $(".navbar").addClass("bg-pink");
        } else {
          $(".navbar").removeClass("bg-pink");
        }
    });   
  });
};

function softScroll() {

  $(document).ready(function(){
    $( "a.scrollLink" ).click(function( event ) {
        event.preventDefault();
        $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 500);
    });
  });

}

softScroll();
dynamicNavbar();

My application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
  </head>

  <body>
    <%= render "layouts/navbar" %>
    <%= render 'layouts/flash' %>
    <%= yield %>
  </body>
</html>

Any idea what I could do to make my website friendly?

Upvotes: 0

Views: 359

Answers (1)

sam
sam

Reputation: 1161

I believe you are missing a viewport tag in your layout. This is from Bootstrap if that's what you're using.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    ...

Upvotes: 1

Related Questions