Jump to content
  • 0

Background не растягивается на мобильных экранах


webdrug
 Share

Question

Подскажите пожалуйста почему background не растягивается на моем проект-сайте на всю ширину, и почему открывая сайт на мобильном браузере моего s4 изначально сайт открывается увеличенным в пол сайта? Вот пример как выглядит сайт на мобилах СМОТРЕТЬ.

 

Заранее спасибо!

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Такой простой дизайн можно было бы  адаптивным сделать, тогда проблем не было бы.

В вашем случае скорее всего нужно убрать вот это <meta name="viewport" content="width=device-width, initial-scale=1.0">   тогда сайт на мобильных будет полностью масштабироваться

Edited by ALEEX SWN
Link to comment
Share on other sites

  • 0

Такой простой дизайн можно было бы  адаптивным сделать, тогда проблем не было бы.

В вашем случае скорее всего нужно убрать вот это <meta name="viewport" content="width=device-width, initial-scale=1.0">   тогда сайт на мобильных будет полностью масштабироваться

Так он адаптивный правда только под экраны до 1024, спасибо пока помогло удаление viewport...

 

Что бы фон не сжимался нужно контейнерам прописывать минимальную ширину.

.color1{  min-width: 1014px;}

Cпасибо ваш вариант тоже подошел, но с ним сайт все равно открывается расшириным, в вашем случае наверно мне придется адаптировать для более мелких экранов сайт.

<meta name="viewport" content="width=1004">  сделал вот так фиксировав ширину...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Алеся
      Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
      <div class="banner"> 
            <div class="container background-image">
            <div class="banner_text"></div>
            </div>
          </div>
      CSS:
      .background-image {
        background-image: url('/img/new_oranges.jpg');
        background-size: cover;
        height: 200px;
      }
    • By rpalenko
      Должно быть как на первом скриншоте. Что не так я делаю или как правильно переделать???
      Помогите пожалуйста уже всю голову сломал!
    • By Sanchous
      Подскажите пожалуйста как растянуть фон за пределы блока, который лежит в контейнере. В верстке так же использовалась библиотека Bootstrap(решение должно быть адаптивным). 
    • By mejta
      Приписал  body{
      background-image: url(img/fon.png)
      }
       Сразу фон есть ,  а после обновления изчезает.
      И так с любой картинкой
      Подробней в скриншотах
       
    • By Dizred
      Добрый день! Помогите с такой проблемой:
      Есть шаблон с общим фоном:

      Для понятности разметки поменял на другой цвет:

      Суть вопроса: надо где черный квадрат и цифра 1, вставить изображение прозрачное в самый угол, ну типо ленточки георгиевской и всё остальное залить фоном:

      Вот css:
      html{background-color:#5d1338;} body{background:url(../images/purple/bg.jpg) no-repeat top center;} a.read_more{background-color:#ff9694;} .button_divider{border-bottom:1px #6a2146 solid; border-top:1px #6a2146 solid;} a{color:#ff9694;} h1 span, h2 span, h3 span, h4 span, h1 strong, h2 strong, h3 strong, h4 strong{color:#ff9694;} ul#main_menu li a.selected {color:#ff9694;} ul#main_menu li a:hover, ul#main_menu li.current-menu-item a{color:#ff9694;} ul#main_menu ul li a {color:#ff9694;} ul#main_menu ul li ul li a {color:#ff9694;} .footer_menu ul li.selected a{ color:#ff9694;} .footer_menu ul li a:hover{ color:#ff9694; } .post_date, .post_date_nothumb, .service_pricespecial, input#searchsubmit, ul.filter_portfolio li.selected a, ul.filter_portfolio li a:hover, input.form_submit, a.icon_link_img{ background-color:#ff9694;} .footer_text a:hover{ border-bottom:1px dotted #ff9694;} ul#main_menu ul, ul#main_menu ul li ul, .flex-caption {background-color:#5d1338;} a.more, .left13 ul li, .entry ul li, .sidebar ul li{ background:url(../images/purple/bullet.png) no-repeat left;} .home_underslider{ background:url(../images/purple/home_underslider.jpg) no-repeat center top;} .slide_frame{background:url(../images/purple/slider_frame.png) no-repeat center;} .footer{background-color:#460d29;} .footer_text, .footer_menu ul li a{color:#b05877;} @media screen and (max-width: 1024px) { .show_menu, .hide_menu, ul#main_menu, ul#main_menu ul{ background-color:#5d1338;} ul.filter_portfolio li.selected a, ul.filter_portfolio li a:hover{background-color:#5d1338;} ul.filter_portfolio li a{color:#ff9694;} }  
      Помогите пожалуйста это сделать  
      Вроде получилось подробно описать суть вопроса...
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy