why is my bootstrap page here not mobile friendly?

Question

My site is hosted at "nateshmbhat.github.io". I have used mdboostrp's row and col for my dom. But its not mobile friendly (shows lot of background space).

Site : https://nateshmbhat.github.io/ . Its a static site.

How do i fix it ?

Site code : https://github.com/nateshmbhat/nateshmbhat.github.io

I did not down vote, but you could provide more details about your problem/what you have done and show us some specific code here, for more accurate answers. — amartine, Jul 23 '18 at 11:54

score 2 · Answer 1 · answered Jul 23 '18 at 07:46

2

Add this tag to the head: <meta name="viewport" content="width=device-width, initial-scale=1">

answered Jul 23 '18 at 07:46

Joe Karam

54
6

it still looks like all the cards stick to the right edge of screen and shows only left margin\ – Natesh bhat Jul 23 '18 at 07:56
1

@Nateshbhat, You have set up a width in the line, ```
``` and i think so it was not making the responsive, try to remove the ```width: 22rem``` in mobile devices using media query and so you can get mobile responsive..
– Maniraj Murugan Jul 23 '18 at 08:26

Paul92ilm · Accepted Answer · 2018-07-24T05:28:19.780

0

It looks like your cards use the class "m-5".

<div class="card m-5 hoverable projectCard" style="width: 22rem;">

If you want them to be responsive using boostrap the class is "col-md-5".

<div class="card col-md-5 hoverable projectCard">

Does it answer your question ?

edited Jul 24 '18 at 05:28

answered Jul 23 '18 at 08:05

Paul92ilm

32
5

Where did you find `md-5`? The docs don't mention it: https://getbootstrap.com/docs/4.0/utilities/spacing/ – Klooven Jul 23 '18 at 13:27
The bootstrap 4 grid system works as follow https://getbootstrap.com/docs/4.1/layout/grid/ – Paul92ilm Jul 24 '18 at 05:26

why is my bootstrap page here not mobile friendly?

2 Answers2