Здравствуйте! Работаю над макетом сайта Кексби.
Нужно выровнять заглавие по левому краю, кнопку - по правому. Делаю с помощью флоатов.
Получается что кнопка выравнивается по правому но поднимается вверх.
<div class = "reviews clearfix">
<div class = "container">
<h2 class = "article-title">Довольные коты</h2>
<a class = "btn width-btn" href = "#">Все отзывы</a>
<div class = "reviews-list">
<blockquote class = "review-item">
<p>Спасибо Кексу за давно напрашивающуюся идею! Набрал себе очков на все случаи жизни: для чтения и для вечеринок с котанами В-)</p>
<cite class = "review-author">Барсик, г. Москва</cite>
</blockquote>
<blockquote class = "review-item">
<p>Я просто не могу без шоппинга и теперь не нужно тащить хозяйку в магазин, заказываю все аксессуары на сайте у Кекса он-лайн!</p>
<cite class = "review-author">Мурка, г. Санкт-Петербург</cite>
</blockquote>
</div>
</div>
</div>
И ещё заодно. Подскажите как правильно сделать этот блок.
Интересует само выравнивание названия очков, цены ну и кнопок. Пробовал через дополнительный контейнер. Подскажите как нужно
<div class = "catalog-item">
<img src = "img/glasses-1.jpg" alt = "item-1" width = "306" height = "206">
<div class = "btn-container">
<h3 class = "glass" >Очки «Классика жанра»</h3>
<span class = "price">300 p.</span>
<a class = "btn btn-buy" href = "#">Описание</a>
<a class = "btn btn-buy" href = "#">Купить</a>
</div>
</div>
это у вас не кнопка поднимается, а заголовок опускается. Потому что маржины ему не обнулили и браузер их от себя добавляет. А добавляет он исходя из размера шрифта: больше шрифт - больше отступ.
Увлеклись флоатами в блоке популярных товаров. Ваш .popular-items получился нулевой высоты (забыли распорку).
Заголовок и цену можно поставить в одну строку, задав заготовку display: inline-block; Для кнопок можно сделать обертку и также воспользоваться этим свойством.
Еще было бы неплохо изображение обернуть в div.
<div class = "checkbox-area">
<input type="checkbox" name="checkbox" id="check">
<label for="check">Я согласен получать спам и смс на телефон</label>
</div>
Здравствуйте! Извините что тревожу, не могли бы вы помочь с мобильной версией сайта на основе медиа-запросов. Нужен пинок, а то что то туплю. Вот сайт.
Не знаю как выставить мобильную ширину? Подскажите, можно ли так?
Ширина контейнера должна быть меньше чем у body, если это центровщик.
Также нужно определиться, какой вы хотите видеть мобильную версию, будете ли перестраивать контент или просто “стянете” всё с помощью %.
Почитайте об адаптивности дополнительно (webref.ru хороший справочник). В целом выглядит всё неплохо, только кнопка не на месте и текст примыкает к краям. Возможно, нужно добавить небольшие внутренние отступы справа и слева.
Спасибо за ответ. Обязательно посмотрю. Но вся суть в том, что у меня получается пол экрана. Может я что то упустил… Не могу разобраться как описать ширину.
