Как изменить размер заголовка для мобильного устройства

Question

Я ищу правильный размер моего изображения заголовка, чтобы при просмотре на мобильном устройстве, таком как мой Iphone, он соответствовал экрану.

Сайт адрес www.maxim-industries.com

Любая помощь с этим было бы весьма признателен. Если кто-то может показать мне правильный css, я добавлю его в свой ноутбук для дальнейшего использования.

Спасибо,

Chris

Answer 1

Крис,

Используйте правило @media, так что веб-сайт настраивает на основе различных устройств и размеров. Используйте ширину min-device-width и max-device-width, а также высоту для более узкого сужения. Конечно, вам нужно посмотреть, как различаются и разные модели iPhone.

Apple - iPhone Compare

Кроме того, вы должны размер изображение вниз по мере необходимости в правиле @media. Судя по тому, что вы используете SquareSpace, вероятно, есть панель где-то в разделе ADMIN, где вы можете изменить таблицы стилей.

Обратите внимание, что в следующий раз, когда ваш вопрос, скорее всего, будет помечен и заблокирован, если окажется, что вы не проводили исследование или не зафиксировали ваши попытки выполнить эту работу. Вот за это печально известная ссылка - я тоже прошел тот же процесс. How to Ask Good Questions on StackOverflow

Answer 2

Похоже, что у вас есть все виды ненужной разметки. все, что в стороне, вам нужно только дать изображение width: 100%;. Но из-за других компонентов на вашем сайте. это не сработало, как должно - поля и прокладки и т. д.

#siteWrapper { 
    padding-top: 95px; 
} 


@media only screen and (max-width: 640px) { 
#siteWrapper { 
    padding-top: 60px; 
} 
.header-inner { 
    padding: 5px 0; 
    display: block 
    } 
} 
#5330ee6ae4b05a2fa30d68c6 { 
display: none; 
} 

.banner-thumbnail-wrapper has-description { 
    padding: 0; 
} 
#thubnail { 
    position: relative; 
} 
#thumbnail img { 
top: 0px; 
width: 100%; 
position: relative; 
/*left: 0;*/ 
} 
.transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail-wrapper { 
/* padding: 180px 0 155px; GET RID*/ 
/* min-height: 0; GET RID */ 

} 
.clearfix:before, .clearfix:after { 
content: " "; 
display: table; 
height: 0px; 
}