Блог

Главная - Вопросы по программированию - Скрытие значка ужасного шрифта на полноэкранном рабочем столе

Скрытие значка ужасного шрифта на полноэкранном рабочем столе

#html #css #font-awesome

#HTML #css #шрифт — потрясающий

Вопрос:

Я хочу скрыть значок телефона, который я добавил, когда браузер работает в полноэкранном режиме рабочего стола. Я использую шаблон, который находится в Сети здесь: https://sartre.thememountain.com/index-architecture-2.html

Пока в мобильном режиме все выглядит нормально. Когда я разворачиваюсь на весь экран, значок плавает в углу. Я хочу скрыть fa-phone от просмотра.

             <header class="header header-fixed header-fixed-on-mobile header-transparent" data-bkg-threshold="100">
                <div class="header-inner">
                    <div class="row nav-bar">
                        <div class="column width-12 nav-bar-inner">
                            <i class="fa fa-phone"></i>
                            <i class="far fa-envelope"></i>
                            
                            <div class="logo">
                                <div class="logo-inner">
                                    <a href="index.html"><img src="images/architecture/logo-dark.png" alt="Happy Kids Logo" /></a>
                                    <a href="index.html"><img src="images/architecture/logo-dark.png" alt="Happy Kids Logo" /></a>
                                </div>
                            </div>
                            <nav class="navigation nav-block secondary-navigation nav-right">
                                <ul>
 
 .fa-phone  {

color:#000;
font-size:25px;
display:inline-block;
position: absolute;
left: 78%;
top:29%;
    

}
    
.fa-phone:fullscreen{
display: none
}
'''

Комментарии:

1. Что .fa-phone:fullscreen делать? 🙂 Проверьте медиа-запросы.

2. .fa-phone { display: none; }

3. Использовали ли вы какие-либо медиа-запросы? Как вы собираетесь скрыть значок во весь экран?

4. : полноэкранный режим больше нигде не присутствует в коде, так что он не будет работать? Я использовал это из другого поста.

5. Сергей, спасибо. Я использовал .fa-phone { display: none; } Он скрыт в маленьком окне, но не на полном рабочем столе.

Ответ №1:

 @media only screen and (min-width: 768px) { /* For desktop: */ .fa-phone{ display: none; }
Метки: