Стиль портится при уменьшении размера экрана

Пожалуйста, взгляните на мой тренировочный сайт - http://codepen.io/silentarrowz/pen/rLJABR

У меня есть несколько проблем с ним:

  1. При уменьшенном размере экрана eElectronics и корзина вверху не центрируются, а отображаются с одной стороны экрана. Я бы хотел, чтобы он был центрирован для небольших размеров экрана. Я могу центрировать логотип eElectronics, но не могу центрировать div корзины, хотя я использую медиа-запросы.

  2. Панель навигации переполняется для небольших размеров экрана, а ссылки в конце, такие как ДРУГИЕ И КОНТАКТЫ, переходят на следующую строку. Как это исправить?

  3. Заголовок карусели перемещается за пределы экрана для уменьшения размера. Как это исправить?

Пожалуйста, предлагайте свои предложения и советы.

.navcolor{
  background-color:#1abc9c;
}
.logo a{
  padding-bottom:10px;
  color:#999;
}
.logo a span{
  color:#1abc9c;
}
.cart {
  border:1px solid rgb(221,221,221);
  font-family:"Titillium Web";
  font-size:18px;
  width:140px;
  height:50px;
  padding-top:10px;
  padding-left:10px;
}
.cart a{
  color:#666;
}
.cart a span{
  color:#1abc9c;
  font-weight:bold;
}
.cart:hover {
  background-color : #1abc9c;
}
.cart:hover span, .cart:hover a{
  color:white;
}
.no-underline :hover{
  text-decoration:none;
}
.navbar-default .navbar-menu{
   height:50px;
}
.navbar-default .navbar-menu li > a{
  color:white;
  font-weight:bold;
  font-size:14px;
}
.navbar-default .navbar-menu > .active > a {
  background-color:#333;
  color:white;
}
.navbar-default .navbar-menu > .active > a:hover {
  background-color:#333;
  color:white;
}
.navbar-default .navbar-menu li>a:hover{
  background-color:#333;
  color:white;
}
#carousel1 img{
  width:100%;
  height:70%;
}
.logo{
  font-family:"Titillium Web";
  font-size:40px;
}
.cart{
  font-size:18px;   
}
.carouse-inner{
  position:relative;
}
.carousel-caption{
  background-color:rgba(0,0,0,0.5);
  color:white;
  display:block;
  width:600px;
  padding-left:20px;
  text-align:left;
  position:absolute;
  left:600px;
  bottom:150px;
}
.latest img{
  border:1px solid grey;
}
.details p{
  height:150px;
  display:block;
  border:1px solid #17a78b;
  margin-top:30px;
  margin-bottom:30px;
  padding-top:10px;
  padding-bottom:10px;
  font-size: 30px;
  font-weight:200;
  color:#fff;
  text-align:center;
}
.details p:hover{
  background-color:black;
}
.details p>i{
  font-size:50px;
  font-weight:500;
}
.details{
  background-color:rgb(26,188,156);
}
.latest{
  text-align:center;
}
@media (max-width: 300px) {
  .logo{
    text-align:center;
  }
  .cart{
    width:100%;
    text-align: center;
  }   
}

@media (min-width: 501px) {
  .logo {
    float: left;
  }
  .cart {
    float:right;
  }
}

html css responsive media-queries
person faraz    schedule 19.07.2016    source источник
comment
Если мы исправили вашу проблему, пожалуйста, проголосуйте за ответ или оставьте отзыв!   -  person Steve Morin    schedule 20.07.2016

Ответы (2)


arrow_upward
0
arrow_downward

Проблема 2. Кнопки меню "ДРУГОЕ" и "КОНТАКТЫ" располагаются в следующей строке, поскольку панель навигации находится в контейнере div шириной 750 пикселей для разрешений менее 768 пикселей, а для них нет места в той же строке. .

@media (min-width: 768px){
    .container {
        width: 750px;
    }
}

Вы можете дать ему другой класс с другой шириной, поскольку у вас есть класс .container, назначенный большему количеству div, и сделать его шире.

Вы также можете указать минимальную высоту 330 пикселей для вашего класса .navbar-colapse.in, чтобы сделать свернутое меню выше, когда разрешение ниже 768 пикселей:

@media (min-width: 768px){
    .navbar-collapse.in {
        overflow-y: auto;
        min-height: 330px;
    }
}

Проблема 3. Как сказал Стив, измените стиль .carousel-caption, указав ширину в процентах (100 %), а поля — автоматически.

.carousel-caption {
    width: 100%;
    left: auto;
    right: auto;
}
person jimmyLi    schedule 19.07.2016

arrow_upward
0
arrow_downward

Если вы пытаетесь центрировать div с выравниванием текста, это не тот путь. Вам нужно настроить поля справа и слева на авто:

    @media (max-width: 300px) {
      .logo{
        text-align: center;
        margin: 0 auto;
     }
     .cart{
        width:100%;
        margin: 0 auto;
     }
}

Дело в том, что ваша eElectronics не занимает все пространство div, центральный div с автоматическим отступом по бокам и выравнивание текста по центру внутри div.

Для меню в режиме сворачивания я получаю полосу прокрутки, и все в порядке, за исключением того, что она немного мала. Переопределение с переполнением: видимое; и установите z-index, если он перекрывает другие элементы.

.navbar-collapse.in {
    overflow-y: visible;
}

Заголовки карусели подходят для меня в Firefox. Вам просто нужно установить ширину в % и установить поля с каждой стороны на авто. Этот div должен быть адаптивным. Прямо сейчас он остается размером 600 пикселей, установленным в .carousel-caption.

person Steve Morin    schedule 19.07.2016
comment
Мне пришлось внести несколько изменений в код, чтобы он заработал. вот сработавший код: @media (max-width: 500px) { .logo{ text-align:center; } .cart{ ширина:100%; поле: 0 авто; выравнивание текста: по центру; } } Итак, вопрос 1 теперь решен. Не могли бы вы помочь с вопросами 2 и 3 ?? - person faraz; 19.07.2016
comment
Я получаю свиток для меню в коллапсе. И все выглядит хорошо, но его немного мало. Вы пробовали это в других браузерах? - person Steve Morin; 19.07.2016
comment
да, я тоже получаю прокрутку в меню, когда свернута. не знаю, почему это происходит - person faraz; 19.07.2016
comment
Я отредактировал свой ответ, проверьте его, вам нужно переопределить переполнение, чтобы оно было видимым. Переполнение включено автоматически, и по умолчанию включена прокрутка. Если вы хотите, чтобы прокрутки просто установили высоту больше, чем у вас есть, или переопределите переполнение, чтобы оно было видимым. - person Steve Morin; 19.07.2016