Materializecss is not responsive

Question

Asked 9 years ago

Viewed 255 times

2

A few days ago I made a template in materializecss; today I stopped the phone and realized that it is not getting responsive.

I’ll leave some prints to clarify:

Responsive (only when browser decreases)

Non-responsive (when accessed from a mobile phone even

Someone would know to shed some light on why this is happening?

This may be because the resolution of your phone is too large, so it takes the high resolution css and directs it to the pc. You can solve this by decreasing the range of resolution to which the mobile css properties are assigned. I think I was clear

– Tiago P.C

2015/12/17 at 15:14
@Tiagop. C The worst is that I simulated all phones in Chrome and gave the same problem. My Galaxy S3 mini that has a screen considered small also looked like this. If you want to take a look: https://megamund-scofield17.c9users.io/index.html

– SCOFIELD

2015/12/17 at 15:19
Doesn’t look like it went wrong, it looks okay.. What’s the problem?

– PauloHDSousa

2015/12/17 at 15:34
@SCOFIELD, try putting this in the head of your html: <meta name="viewport" content="width=device-width, initial-Scale=1.0" />

– Tiago P.C

2015/12/17 at 15:38
Ready @Guilhermenascimento ;)

– Tiago P.C

2015/12/17 at 18:04

2 answers

3

Place the following code in the head of your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

This must be it +1

– Guilherme Nascimento

2015/12/17 at 18:19
That’s right @Tiagop. C I thought it was not necessary to declare the viewport with materialize, I was wrong. Thankful!

– SCOFIELD

2015/12/17 at 20:19
Happy to help! ;)

– Tiago P.C

2015/12/18 at 15:33

Browser other questions tagged html html5 materialize

You are not signed in. Login or sign up in order to post.

by Nelson Derato • 19 points · Answer 1 · 2015-12-17T17:25:21+00:00

Utilize media queries to make adjustments in certain resolutions: Ex.:

@media screen and ( max-width: 768px){
    .h2{
        font-size: 3.0em;
    }
}