Skip to main content
Main Content

CSS not working on mobile

CSS not working on mobile
Posted 2021-10-07 08:12:00
#537231
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
#562513
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