CSS выравнивание при смене макетов

Я работаю над своим портфолио, и я начинаю все это.CSS выравнивание при смене макетов

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

В основном у меня возникли проблемы с правильной настройкой логотипа/кнопок контактов для разных макетов. Кроме того, на моем телефоне нижний колонтитул полностью ушел!

Вот мой тестовый сайт я загрузил: example

Мой CSS

body { 
    background-color:#0e0c0f; 
    margin: 0; 
    padding: 0; 
} 
#container{ 
    height: 865px; 
    font-size: 0; 
} 
#logo{ 
    margin-top: 10px; 
    position: fixed; 
    width: 100%; 
    height: 32px; 
} 
.nav{ 
    float: right; 
} 
#portfolio{ 
    margin-top: 47px; 
    height: 800px; 
    white-space: nowrap; 
    display: inline-block; 
} 
#footer{ 
    background-color:blue; 
    position: fixed; 
    width: 100%; 
    height: 32px; 
} 
@media only screen and (max-device-width: 800px) { 
#logo{ 
    margin-top: -50px; 
    position: fixed; 
    width: 100%; 
    height: 20%;  
    background-color:#0e0c0f; 
} 
.logoimage{ 
    margin-top:15px; 
    margin-left:15px; 
} 
.nav{ 
    float:right; 
    margin-left:15px; 
} 
#portfolio{ 
    margin-top: 47px; 
    white-space:normal; 
    display:list-item; 
} 
.art{ 
    width:100%; 
} 
#footer{ 
    background-color:red; 
    height: 32px; 
} 
}

И мой HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> 
<title>TEST</title> 
<link rel="stylesheet" type="text/css" href="style2.css"> 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> 
<script type='text/javascript' src='jquery.mousewheel.js'></script> 
    <script> 
     $(function() { 
      $("body").mousewheel(function(event, delta) { 
       this.scrollLeft -= (delta * 90); 
       event.preventDefault(); 
      }); 
     }); 
    </script> 

</head> 

<body> 
<div id="container"> 
    <div id="logo"> 
     <img src="images/logo.png" class="logoimage"> 
     <img src="images/resume.png" class="nav"> 
     <img src="images/contact.png" class="nav"> 
    </div> 
    <div id="portfolio"> 
      <img src="tester.png" class="art"> 
      <img src="tester.png" class="art"> 
      <img src="tester.png" class="art"> 
      <img src="tester.png" class="art"> 
      <img src="tester.png" class="art"> 
      <img src="tester.png" class="art"> 
      <img src="tester.png" class="art"> 
      <img src="tester.png" class="art"> 
    </div> 
    <div id="footer"> 
     Help 
    </div> 
</div> 
</body> 

</html>

Любая помощь или советы очень ценится.

источник

2015-12-22 user1837518

Вы будете иметь, чтобы получить возможность отправлять соответствующий код. Ваш CSS, по крайней мере. – QuestionMarks

В чем ваш вопрос? – Roope

В вашем CSS медиа-запрос, попробуйте использовать max-width вместо max-device-width

источник

2015-12-22 20:07:33 bruh

Thank's Bruh! Это сработало! – user1837518

Np. 'max-device-width' - это размер фактического экрана. Итак, если вы говорите, что ноутбук составляет 1400 x 900, и вы уменьшаете браузер до небольшой ширины - * экран * по-прежнему превышает ваше состояние, поэтому медиа-запрос не будет применяться. 'max-width' вместо этого будет нацелен на окно просмотра браузеров, которое вы хотите. Подробнее об этом [здесь] (http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web) – bruh

CSS выравнивание при смене макетов

ответ

Смежные вопросы