Skip to main content
Main Content

CSS not working on mobile

CSS not working on mobile
Posted 2021-10-07 08:12:00
Title pretty much explains it. I'm getting into CSS, and I wrote some code for my den. It looks pretty cool on desktop, but once I load it on mobile (Kindle, iPad, phone) fonts, images, and the like won't load. I also messed up the font color for the tables and I won't be able to fix that until tonight, so sorry about that eye-bleeding ness. Does anyone know why this is happening?
Eainai
#48018

Posted 2021-11-16 08:02:14
Usually need some encoding done and make sure to always use PX for sizes to scale pixels vs exact scaling.

Some encoding examples
/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {}
/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) {}
/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {}
/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}


I recommend looking into how these and other encoding styles work to fit your display needs, and again cant stress how much for sizing always use "px" and for font size use "em", you'll save yourself many headaches with resizing issues down the road.

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

ØҜΔΜƗ
#10391

Search Topic