html - Website not displaying correctly on mobile devices -


i cannot seem figure out why pages on website not displaying correctly on mobile devices. here link type of page i'm having trouble with: http://www.designelopers.com/html-2/what-is-html/

if view in chrome , inspect in chromes mobile viewer (little mobile icon left of inspection toolbar) , select apple's iphone 6 , refresh can see issue i'm having. here picture of looks like:

site body squished left

right have main width's content set percentages. if change them pixels works don't want that. added few media queries medium , high pixel densities so:

@media screen , (-webkit-device-pixel-ratio: 1.5)  {  { #sidebarcontainer { display: none; float: none; } #maincontentcontainer { float: none; border: none; width: 100%} #textsectioninner { padding: 5rem; }  }  @media screen , (-webkit-device-pixel-ratio: 2)  {  { #sidebarcontainer { display: none; float: none; } #maincontentcontainer { float: none; border: none; width: 100%} #textsectioninner { padding: 5rem; } } 

does have idea why occuring? thank help

you need create media queries different screen sizes. common desktop version, medium(for tablets), small (for phones). search media queries.


Comments

Popular posts from this blog

jquery - How do you format the date used in the popover widget title of FullCalendar? -

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -