문제

I'm using Joomla 3 and editing an application and trying to get it cellphone compatible. I'm using a div container with 2 div that will actas columns, example:

<div>
<div style="float:left; max-width:50%;">code for left</div>
<div style="float:right; max-width:50%;">code for right</div>
</div>

this will be HORRIBLE with any cellphone, i'm trying with an iPhone. Seems like the generated content inside the 2nd div exceeds the screen size or div width available and then overflow.

There is any way to split screen on mobile and show the "right div" below the "left div" on cellphone?

thanks in advance

도움이 되었습니까?

해결책

You need to use a media query.

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

EXAMPLE :http://jsfiddle.net/Svqt5/ (resize the browser window to see the media query work)

source: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top