Bootstrap - col-offset при с ужении прыгает с лева на право

@Semenov Alex · Регистрация: 27.06.2016

Author24 — интернет-сервис помощи студентам

Доброе время суток всем и заранее благодарен тому кто откликнется!!!

При с ужении монитора из-за заданного класса col-offset, блок на картинке начинает играть с право на лево, что и получаеться не корректное с ужение!!!
Как можно это подкорректировать???
Общая область картинки 1600рх, рабочая область 1250рх

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css?family=Gentium+Book+Basic:700|Lato|Open+Sans:400,400i,700|Yeseva+One" rel="stylesheet">
    <link rel="stylesheet" href="main/font.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="main/style.css">
</head>
<body>
<section class="ingrediaens">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-offset-6 col-lg-6">
                <div class="block">
                    <h2>Fine ingredients</h2>
                    <div class="icon"></div>
                    <p>If you’ve been to one of our restaurants, you’ve seen – and tasted – what keeps our customers coming back for more. Perfect materials and freshly baked food, delicious Lambda cakes,  muffins, and gourmet coffees make us hard to resist! Stop in today and check us out!
                    </p>
                    <a href="#"><img src="img/ingredients/ingredients-images1.png" alt="ingredients-images1"></a>
                    <a href="#"><img src="img/ingredients/ingredients-images2.png" alt="ingredients-images2"></a>
                    <a href="#"><img src="img/ingredients/ingredients-images3.png" alt="ingredients-images3"></a>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="main/jquery-3.2.1.min.js"></script>
</body>
</html>

CSS

.ingrediaens {
    background: url("../img/ingredients/seedling.jpg") center top no-repeat;
    min-height: 758px;
    margin: 0 auto;
}
.block {
    height: 561px;
    width: 570px;
    background: rgba(0,0,0, .5);
    padding: 83px 81px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 98px 0 0 0;
    text-align: center;
}
.block h2 {
    font-size: 36px;
    font-family: "YesevaOne", cursive;
    color: #ffffff;
}
.icon {
    background: url("../img/ingredients/divider.png");
    width: 247px;
    height: 24px;
    margin: 24px auto 30px;
}
.block p {
    color: white;
    font-family: "Lato", sans-serif;
    font-size: 16px;
    line-height: 24px;
    padding-bottom: 72px;
}
.block a {
    margin-right: 29px;
}
.block a:nth-child(6) {
    margin-right: 0;
}

картинка с макета

@Speli · 30.05.2017, 09:28

Если я правильно понял, у вас отступ col-lg-offset-6, этот отступ работает только на разрешении 1200+, если нужно чтобы и при меньших разрешениях был отступ, замените например на col-sm-offset-6

@Semenov Alex · 30.05.2017, 19:14 **[ТС]**

Большое спасибо!

Тут на самом деле ошибся в

CSS

1
2
3

block {
    margin: 98px 0 0 0;
}

А корректно стало работать при margin: 98px auto 0

@Speli 4 / 4 / 3 Регистрация: 06.03.2013 Сообщений: 40
	30.05.2017, 09:28	2
	Если я правильно понял, у вас отступ col-lg-offset-6, этот отступ работает только на разрешении 1200+, если нужно чтобы и при меньших разрешениях был отступ, замените например на col-sm-offset-6 1

	30.05.2017, 19:14

Опции темы