CODEWITHSUNDEEP
htmlcssruby-on-railsruby-on-rails-4responsive-design
user4965201
user4965201

Reputation: 973

Ruby on rails not loading layout responsive for mobile devices

Its been a Day since i am facing this issue . and i have no clue why this happening. i am trying to import a layout in the rails 4 application. I am using bootstrap.css and responsive.css i guess my responsive.css file is not working in my rails app

i can explain clearly by these images

when i load the layout by just clicking on the html file without the rails app this is the layout i am getting on mobile devices

enter image description here

and by importing the layout in the rails this is what i am getting

enter image description here

as by the rails app when it will run on mobile devices everything will look small i am seeing no error in the browser console all my assets are loading correctly . but what i think this may be the error of

@media (max-width: px) {
}

but i am not sure . and i have already included <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> in the head tag. can someone please help me with this so my app can be perfectly responsive

Upvotes: 2

Views: 1684

Answers (2)

Joaquin Diaz
Joaquin Diaz

Reputation: 175

You should control the composition in mobile browsers. Use the meta viewport tag in your head

<meta name="viewport" content="width=device-width, initial-scale=1.0" />    
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>

Upvotes: 3

Alex Suslyakov
Alex Suslyakov

Reputation: 2222

Try to use stylesheet_link_tag 'application', media: 'all' in your (probably 'application') layout (first argument can be any name of your css file)

Explanation from api-dock

The ‘media’ attribute will always be present and defaults to “screen”, so you must explicitly set it to “all” for the stylesheet(s) to apply to all media types.

Upvotes: 0

Related Questions