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:
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
Post a Comment