how to make my site more mobile friendly?

[candycanearter07]

hi,

ive been getting some complaints from users about how my site is unreadable when on mobile or "not in full screen".. how can i make it more viewable for mobile?

[larvapuppy]

Hi! You can make your site appear differently in different sizes by adding a rule like this to your css:

Code

@media (max-width : 1920px){
}

... and changing the pixel amount to whatever size you like! For example, on my site I have all of my desktop specifications inside a 1920px rule, and all of my mobile specifications inside a 750px rule.

Just put all your selectors that you want to differ between sizes under each rule, and change the properties accordindly. For example, on my site I have this code:

Code

@media (max-width : 1920px){
  #navigation {
    display: block;
  }
  #mobilenav{
    display: none;
  }
}

@media (max-width:750px) {
  #navigation {
    display: none;
    }
  #mobilenav {
    display: block flex;
    }
}

My navigation bar is in a vertical format in desktop, and a horizontal format in mobile, so I have the vertical one set to appear and the smaller one to disappear on larger displays - and vice versa.

Some other things that are helpful to have change between display sizes: box width, text size, the % of space an image takes up, and so on. It's helpful to check out sites you like on a mobile phone to see how they do things, too 

[candycanearter07]

Hi! You can make your site appear differently in different sizes by adding a rule like this to your css:

Code

@media (max-width : 1920px){
}

... and changing the pixel amount to whatever size you like! For example, on my site I have all of my desktop specifications inside a 1920px rule, and all of my mobile specifications inside a 750px rule.

Just put all your selectors that you want to differ between sizes under each rule, and change the properties accordindly. For example, on my site I have this code:

Code

@media (max-width : 1920px){
  #navigation {
    display: block;
  }
  #mobilenav{
    display: none;
  }
}

@media (max-width:750px) {
  #navigation {
    display: none;
    }
  #mobilenav {
    display: block flex;
    }
}

My navigation bar is in a vertical format in desktop, and a horizontal format in mobile, so I have the vertical one set to appear and the smaller one to disappear on larger displays - and vice versa.

Some other things that are helpful to have change between display sizes: box width, text size, the % of space an image takes up, and so on. It's helpful to check out sites you like on a mobile phone to see how they do things, too 

thanks! i made some updates to the site using max-width restrictors if you want to use devtools to test it ^^