Как сделать этот код отзывчивым

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

<div style="padding-left: 500px" class="bt-contact"> 
    <input style="width: 130px" class="des-button-dark des-button-dark-1 des-button-dark-1d" id="button-s" name="submit" type="submit" value="Submit" > 
</div>

источник

2015-04-24 Poovarasan RK

обивка-левый: 500px – polarysekt

Вы не можете задать подобный код. Вы должны показать, какие разумные усилия вы сделали самостоятельно, чтобы решить проблему, прежде чем обращаться за помощью. См. [Ask]. – mins

Возможная запись для CodeReview? –

Вы должны использовать запросы СМИ:

/* Style applied everywhere */ 
.bt-contact input { 
    width: 130px 
} 
@media screen and (min-width: 800px) { 
    /* Style applied if your screen is larger than 800px */ 
    .bt-contact { 
    padding-left: 500px; 
    } 
}

источник

2015-04-24 07:12:47 zessx

<html><head></head><body><div style="padding-left: 40%;" class="bt-contact"> 
    <input style="width:16%;min-width:160px" class="des-button-dark des-button-dark-1 des-button-dark-1d" id="button-s" name="submit" type="submit" value="Submit"> 
</div></body></html>

Для создания Отзывчивый сайта, выложиться в% не пикс. Если вы еще не получили отзывчивые запросы css media.

источник

2015-04-24 07:13:24

Мы используем проценты для ** жидких ** макетов. Адаптивный макет будет использовать медиа-запросы, но не обязательно проценты. – zessx

Огромное вам спасибо (дайте все в%, а не в px). Если вы еще не получили отзывчивое использование css-медиа-запросов.) Его работы прекрасны –

Все самое лучшее .. :) –

Вам необходимо добавить медиа в CSS, понять, как добавить медиа в css и сделать ваш сайт отзывчивым.

/*------------------------------------------ 
Responsive Grid Media Queries - 1280, 1024, 768, 480 
1280-1024 - desktop (default grid) 
1024-768 - tablet landscape 
768-480  - tablet 
480-less - phone landscape & smaller 
--------------------------------------------*/ 
@media all and (min-width: 1024px) and (max-width: 1280px) { } 

@media all and (min-width: 768px) and (max-width: 1024px) { } 

@media all and (min-width: 480px) and (max-width: 768px) { } 

@media all and (max-width: 480px) { } 


/* Portrait */ 
@media screen and (orientation:portrait) { /* Portrait styles here */ } 
/* Landscape */ 
@media screen and (orientation:landscape) { /* Landscape styles here */ } 


/* CSS for iPhone, iPad, and Retina Displays */ 

/* Non-Retina */ 
@media screen and (-webkit-max-device-pixel-ratio: 1) { 
} 

/* Retina */ 
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (-o-min-device-pixel-ratio: 3/2), 
only screen and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-device-pixel-ratio: 1.5) { 
} 

/* iPhone Portrait */ 
@media screen and (max-device-width: 480px) and (orientation:portrait) { 
} 

/* iPhone Landscape */ 
@media screen and (max-device-width: 480px) and (orientation:landscape) { 
} 

/* iPad Portrait */ 
@media screen and (min-device-width: 481px) and (orientation:portrait) { 
} 

/* iPad Landscape */ 
@media screen and (min-device-width: 481px) and (orientation:landscape) { 
}

Вам просто нужно проверить, какое разрешение вы хотите сделать отзывчивым и конкретным CSS на этом носителе. Вам нужно использовать еще один элемент проверки для тестирования. Еще одна вещь, которую вы также используете в процентах для заполнения или поля, поэтому в соответствии с шириной вашей DOM ваша кнопка будет настроена.

источник

2015-04-24 07:14:45 Codelord

Большое вам спасибо –

@PoovarasanRK Просто убедитесь, t добавьте носитель для одного устройства. Вы должны проверить требования к проблеме. Используйте хром для разработки. – Codelord

Попытайтесь использовать медиа-запросы .. Я подозреваю, что padding-left: 500px вызывает проблему.

Проверить эту ссылку

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media screen and (max-width: 420px) { /*According to mobile size you can change the width*/ 
    .bt-contact{ 
     padding-left: 100px;/* give some less px value */ 
    } 
}

источник

2015-04-24 07:15:29

Как сделать этот код отзывчивым

ответ

Смежные вопросы