Рекомендуемые сообщения

newjey    1

В карточке товара не получается один блок выровнять

454545.jpg

 

4ый блок почему-то ровняется по 2му блоку и получается не красиво. Как его подтянуть выше, под 3ий блок?

margin пробовал, но при просмотре на мобильном блоки наезжают друг на друга.

 

Сейчас разметка имеет такой вид

 <div class="row" style="margin-top:-13px;"> <?php echo $column_left; ?>
       <?php if ($column_left && $column_right) { ?>
    <?php $class = 'col-sm-6'; ?>
    <?php } elseif ($column_left || $column_right) { ?>
    <?php $class = 'col-sm-9'; ?>
    <?php } else { ?>
    <?php $class = 'col-sm-12'; ?>
    <?php } ?>
    <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>
      <div class="row">
		<div class="col-xs-12 col-sm-12 col-md-5 col-lg-4 visible-lg visible-md nopad" style="float:right;">	
		логотип		
		</div>
		
		<div class="col-xs-12 col-sm-12 col-md-7 col-lg-8" style="float:left;">
			1ый блок
		</div>
		   

		<div class="col-xs-12 col-sm-12 col-md-5 col-lg-4" style="float:right;">
			3ий блок
		</div>
		
			<div class="col-xs-12 col-sm-12 col-md-7 col-lg-8" style="float:left;">	
				
			2ой блок
				
		</div>	
			<div class="col-xs-12 col-sm-12 col-md-5 col-lg-4" style="float:right;">	
				4ый блок
        </div>
      </div>	
		</div>	
			 </div>

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
n3bo    188

<div class="row">
 <div class="col-sm-8">
   <div>1</div>
   <div>2</div>
 </div>
 <div class="col-sm-4">
   <div>3</div>
   <div>4</div>
</div>

Сразу пришел такой вариант в голову, но цена будет после описания на мобилках... Сейчас подумаем)

 

Как вариант:

<div class="row">
 <div class="col-sm-8">
   1
 </div>
 <div class="col-sm-4">
   <div>3</div>
   <div>4</div>
</div>
<div class="col-sm-8">
 2
</div>
Изменено пользователем n3bo

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
newjey    1

Спасибо за ответ, но надо что бы блок 4 на мобильных был тоже в конце.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
newjey    1

На мобильном сейчас отображается вот так

9999999999_4536078_24672167.jpg

 

И так должно остаться.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pimur    117

Используйте media запросы с margin. Для компьютеров используйте отрицацельный margin, для мобильных как положено. Как вариант.

Изменено пользователем pimur

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
rim89    9

Дублировать 4ый блок и скрывать его же 

<div class="test">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-8">
                1
            </div>
            <div class="col-xs-12 col-md-4">
                3
                <div class="hidden-xs hidden-sm">
                    4
                </div>
            </div>
            <div class="col-xs-12 col-md-8">
                2
            </div>
            <div class="col-xs-12 col-md-4 hidden-md hidden-lg">
                4
            </div>
        </div>
    </div>
</div>

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
newjey    1

 

Дублировать 4ый блок и скрывать его же 

<div class="test">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-8">
                1
            </div>
            <div class="col-xs-12 col-md-4">
                3
                <div class="hidden-xs hidden-sm">
                    4
                </div>
            </div>
            <div class="col-xs-12 col-md-8">
                2
            </div>
            <div class="col-xs-12 col-md-4 hidden-md hidden-lg">
                4
            </div>
        </div>
    </div>
</div>

 

Ооо, как же я сам не додумался, идеально помоему)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу