[CSS][HTML] Responsywny Element Opcje

[DonPolaczek]

Witam serdecznie mam problem przy stworzeniu responsywnego elementu a mianowicie dodałem sobie do strony własny newsletter taki box który w htmlu wygląda tak:

[HTML] pobierz, plaintext 
<section class="newsletter">
        <p class="Slogan">Otrzymuj informację o <strong>najnowszych artykułach</strong> <br> 
        i <strong>technikach marihuany</strong> prosto na Twój e-mail.</p>
        <form method="post" action="https://app.freshmail.com//pl/actions/subscribe/">
        <input type="hidden" name="subscribers_list_hash" value="ulceinuovc" />
        <input type="text" id="freshmail_imie" name="freshmail_custom_field[imie]" class="freshmail-imie" placeholder="Twoje imię" autofocus>
        <input type="text" id="freshmail_email" name="freshmail_email" class="freshmail-email" placeholder="Twój adres e-mail" autofocus>
        <input type="submit" class="freshmail_button" value="Zapisz mnie" />
        </form>
        </section>
[HTML] pobierz, plaintext 

Plik CSS:

[CSS] pobierz, plaintext 
/* Newsletter
----------------------------------------------- */
 
.newsletter {
  margin: 20px auto;
  padding: 20px;
  width: 920px;
  height: 30px;
  background: #eeeeee;
  border-style: solid;
  border-width: 2px;
  border-top-color: #dddddd;
  border-bottom-color: #dddddd;
  border-right-style:hidden;
  border-left-style:hidden;
}
.newsletter-slogan {
	padding-left: 120px;
}
 
.Slogan {
	margin-left: 15px;
	margin-top: -8px;
	margin-bottom: -10px;
    color: #333;
	font-size: 15px;
	font-family: Tahoma, Geneva, sans-serif;
}
 
.freshmail-imie {
  width: 140px;
  height: 24px;
  position: absolute;
  margin-top: -31px;
  margin-left: 390px;
  border: 1px solid #b6b6b6;
  background: url("images/Imie_Icon.png") left top no-repeat #fafafa;
  background-size: 23px 24px;
  background-position: 7px 6pt;
}
 
.freshmail-email {
  width: 140px;
  height: 24px;
  position: absolute;
  margin-top: -31px;
  margin-left: 595px;
  border: 1px solid #b6b6b6;
  background: url("images/Email_Icon.png") left top no-repeat #fafafa;
  background-size: 20px 17px;
  background-position: 7px 9pt;
}
@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
 
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
 
@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
 
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
 
.freshmail_button {
	display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
	background: #b4d236;
	padding: 5px 21px;
	color: #fff;
	display: inline-block;
	font: inherit;
	height: 35px;
	margin-top: -45px;
	margin-left: 800px;
}
.freshmail_button:hover, .freshmail_button:focus, .freshmail_button:active {
	 -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
	background: #19232d;
}
 
 
input[type="text"] {
  font-family: sans-serif;
  font-size: 15px;
  color: #515151;
  padding-left: 33px;
}
[CSS] pobierz, plaintext 

I teraz mam problem ponieważ nie wiem jak stworzyć responsywność tego elementu czytałem o media queries ale nie bardzo mi to wychodzi a mianowicie wcale. z góry dziękuje za porady. Pozdrawiam.

[rad11]

Ogolnie rzecz polega na tym abys jak najwiecej staral sie podawac szerokosci w % + na samym koncu uzycie media queries

[PHP] pobierz, plaintext 
//rozklad dla PC i notebookow
@media (min-width: 1024px) {
}
//notebooki
@media (max-width: 1023px) {
}
//tablety
@media (max-width: 734px) {
}
//smartfony
@media (max-width: 599px) {
}
 
[PHP] pobierz, plaintext 

Najlepiej jak bys korzystal z gotowych rozwiazac typu Bootstrap.
Podaj swoj przyklad gdzies na jsfiddlu bo tak to ciezko poprawnie pomoc

Ten post edytował rad11 19.06.2015, 18:31:41

[DonPolaczek]

Ogólnie używam Wordpress ale ten box newsletter napisałem sam w htmlu i wszystkie elementy są responsywne prócz mojego newslettera. dobrze już wrzucam wszystko na portal jsfiddlu.
Tutaj Link: http://jsfiddle.net/sr5rhu7g/
Wygląda to lepiej na wordpress ponieważ pozycja elementów pasuję jak i button.

[Mega_88]

[HTML] pobierz, plaintext 
@media screen and (min-width: 901px) and (max-width: 3000px) {
 // Tutaj wrzuć css odpowiedzialny za Twój newsletter, będzie to odpowiedzialne za wygląd tego boksu przy rozdzielczości (szerokości okna) od 901px do 3000px
}
 
@media screen and (min-width: 0px) and (max-width: 900px) {
 // Tutaj wrzuć css odpowiedzialny za Twój newsletter, będzie to odpowiedzialne za wygląd tego boksu przy rozdzielczości (szerokości okna) od 0px do 900px
}
[HTML] pobierz, plaintext 

Zakresy ((min-width: 0px) and (max-width: 900px)) już sobie dopasuj samemu jakich potrzebujesz, wyżej masz ładnie podane.

Ten post edytował Mega_88 20.06.2015, 12:47:03

[DonPolaczek]

Dziękuję rozumiem czy wartości takie jak:

[CSS] pobierz, plaintext 
width: 920px;
height: 30px;
[CSS] pobierz, plaintext 

Zmieniać według własnych upodobań czy raczej powinny tutaj być %. Pozdrawiam.

Ten post edytował DonPolaczek 25.06.2015, 10:42:58