Jaydeep Shah Ответов: 1

Set tablate design отзывчивый

Эй, я работаю над приложением для чата.
где у меня есть заголовок,где отображается фотография,имя пользователя, статус.
я проверяю все устройства, это идеально отзывчивое ожидание только в ipad и ipad pro.
так что же я меняю, чтобы это работало во всех устройствах.
в ipad мое имя идет вниз, потому что оно динамично и если его 6 char, чем работа правильная и
если он больше 6, то он идет вниз под фотографией.

имя отображается в 
LogInUsernameLbl
ярлык

Что я уже пробовал:

<div style="height: 50px; padding: 1%">
                            <div class="col-sm-8 col-xs-10 heading-avatar">
                                <div class="heading-avatar-icon">
                                    <asp:Image ID="imgUser" runat="server" onerror="this.onerror = null; this.src = '../UploadPhotos/default_user.png';"/>
                                    <p style="display: inline-block; color: white; font-size: 20px; font-weight: 400;" class="statusname">
                                         <asp:Label runat="server" ID="LogInUsernameLbl"></asp:Label>
                                    </p>
                                </div>
                            </div>
                            <div class="col-sm-2 col-xs-2 pull-right">
                                <div class=" heading-dot  pull-right">
                                    <div class="dropdown">
                                        <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown"></button>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li><a href="#" class="statuschange" data-key='{"param1":"online"}'>Online</a></li>
                                            <li><a href="#" class="statuschange" data-key='{"param1":"offline"}'>Invisible</a></li>
                                            <li><a href="#" class="statuschange" data-key='{"param1":"busy"}'>Busy</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

1 Ответов

Рейтинг:
0

Anil Bandela

Привет Джейдип попробуйте этот код формы CSS файла

Надеюсь, это вам поможет.

iPad в портретном и ландшафтном режиме

@медиа только экран
и (min-device-width : 768px)
и (max-device-width : 1024px) { /* стили идут сюда */}

iPad в ландшафтном

@медиа только экран
и (min-device-width : 768px)
и (максимальная ширина устройства : 1024px)
и (ориентация : ландшафт) { /* стили идут сюда */}

iPad в портретном режиме

@медиа только экран
и (min-device-width : 768px)
и (максимальная ширина устройства : 1024px)
и (ориентация : портрет) { /* стили идут сюда */ }