Denly Denly - 4 years ago 196
Sass (Sass) Question

The website width changed in mobile

Hi my website width doesn't show up normally in mobile, so the website looks too small. The normal width is supposed to be 375, but it become 980. I have no idea why? since I only use materialize and my SCSS doesn't hard code any width. I don't have any clue to get start. Wish to get some help. Thank you.

My website
A sample website

.brand-logo {
margin: 0 10px 0 10px;
}

.YellowtailLogo {
font-family: 'Yellowtail', cursive;
}
.brand-logo img{
height: 28px;
position: relative;
margin-right: 10px;
top: 3px;
}

.h1Landing {
font-family: 'Yellowtail', cursive;
color: #ee6e73;
}

.msg_page_container {
height: 100%;
position: fixed;
width: 100%;
overflow: hidden;
left: 0px;
padding: 0 10% 0 10%;

.collection {
overflow: scroll;
height: 40%;
}

.msg_input_div{

}
}

Answer Source

use media query to change content-width to width of mobile screen:

@media screen and(max-width:375px){
html,body{width:100%;
box-sizing:border-box;
}
}

and include

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

in CSS

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download