Τι γίνεται επιτελους με τα responsive themes???

killer76 · 12 Μαρτίου 2014

Όποτε και αν έχω χρησιμοποιήσει responsive theme γίνονται ολά σκ@τ@. Σε αυτό το θέμα δεν έχω πρόβλημα αλλά δεν μπορώ να καταλάβω το όφελος να ενεργοποιείτε και σε ipad landscape.

Μπορείτε να βοηθείσετε τι πρεπει να κανω στο κωδικα ωστε να ενεργοποιείτε π.χ. κάτω από τα 900px.

/* Responsive */
@media only screen and (max-width: 1250px) {
	
	#wrapper {
		width: 1020px;
	}
	
	#slider .home-reservation-box,
	#slider-full .home-reservation-box {
		left: 30px;
	}
	
	.slider-caption-wrapper {
		width: 1020px;
	}
	
}

@media only screen and (max-width: 1050px) {
	
	#wrapper {
		width: 768px;
	}
	
	#topbar-wrapper,
	.content-wrapper {
		width: 700px;
	}
	
	.topbar-left {
		width: 25%;
	}
	
	.topbar-right {
		width: 75%;
	}
	
	.slider-caption-wrapper {
		width: 768px;
	}
	
	#slider .home-reservation-box,
	#slider-full .home-reservation-box {
		left: 0;
		width: 708px;
	}
	
	#slider-full .home-reservation-box {
		bottom: 0;
	}
	
	.home-reservation-box .select-wrapper select {
		width: 123%;
		background-position: 74% center !important;
	}
	
	.home-reservation-box input[type="text"] {
		width: 121px;
	}
	
	.widget-reservation-box input[type="text"] {
		width: 132px;
	}
	
	.home-reservation-box .select-wrapper {
		width: 121px;
	}
	
	 .widget-reservation-box .select-wrapper {
		width: 150px;
	}
	
	.widget-reservation-box .select-wrapper select {
		width: 118%;
		background-position: 77% center;
	}
	
	#navigation {
		display: none;
	}
	
	.mobile-menu-wrapper {
		display: block;
	}
	
	.flickr_badge_wrapper .flickr_badge_image {
		float: left;
		margin: 0 8px 8px 0;
		height: 47px;
	}

	.flickr_badge_wrapper .flickr_badge_image img {
		width: 47px;
		height: 47px;
	}
	
	#page-header {
		text-indent: 30px;
	}
	
	#page-header h2 {
		width: 100%;
	}
	
	.accommodation-listing .col {
		width: 100%;
	}
	
	/*.button-space1 {
		margin: 0 0 0 10px;
	}*/
	
	.accommodation-listing .col:nth-child(3n) {
		margin: 0 3% 40px 0;
	}
	
	.comment-right {
		width: 79%;
	}
	
	.widget .latest-posts-list li .lpl-content {
		width: 63%;
	}
	
	.step-wrapper {
		width: 135px;
	}
	
	.ui-datepicker-inline {
		width: 100% !important;
	}
	
	.booking-side input[type="text"] {
		width: 167px;
	}
	
	.booking-side .select-wrapper {
		width: 185px;
	}
	
	.booking-side .one-half-form input[type="text"] {
		margin: 0 0 10px 0;
	}
	
	.booking-side .last-col input[type="text"] {
		margin: 0;
	}
	
	.rooms-wrapper .label {
		width: 100%;
		padding: 0;
		margin: 0 0 20px 0;
	}
	
	#open_datepicker .ui-datepicker-group {
		width: 100%;
		border-right: none;
	}
	
	#open_datepicker .ui-datepicker-group-first {
		padding: 0;
	}
	
	#open_datepicker .ui-state-default {
		width: 54px;
	}
	
	.ui-datepicker-group-last {
		margin: 30px 0 0 0;
	}
	
	.room-list-right .room-meta {
		float: none;
		border-bottom: #424242 1px solid;
		margin: 0 0 15px 0;
	}
	
	.room-list-right .room-price {
		float: none;
	}
	
	.room-list-right .price-breakdown {
		text-align: left;
	}
	
	.booking-main .input-left {
		width: 47%;
	}
	
	.event-entry .event-date-wrapper {
		width: 11%;
	}
	
	.event-inner-wrapper {
		width: 85%;
	}
	
	.event-preview .event-date-wrapper {
		width: 14%;
	}
	
	.event-preview .event-entry-inner {
		width: 81%;
	}
	
	#footer .widget-reservation-box input[type="text"] {
		width: 141px;
	}

	#footer .widget-reservation-box .select-wrapper {
		width: 159px;
	}
	
}


@media only screen and (max-width: 767px) {
	
	#wrapper {
		width: 465px;
	}
	
	.slider-caption-wrapper {
		width: 465px;
	}
	
	#topbar-wrapper, .content-wrapper {
		width: 415px;
	}
	
	#logo {
		float: none;
		margin: 40px auto 0 auto;
		width: 185px;
	}
	
	.mobile-menu-wrapper {
		float: none;
		margin: 30px auto;
		width: 260px;
	}
	
	.one-third {
		float: none;
		width: 100%;
		margin: 0 0 30px 0;
	}
	
	.two-thirds {
		float: none;
		width: 100%;
		margin: 0 0 30px 0;
	}
	
	#footer .one-fourth {
		width: 100%;
		margin: 0 0 30px 0;
	}
	
	#footer-bottom .fl,
	#footer-bottom .secondary-navigation,
	#footer-bottom .secondary-navigation .fr {
		float: none;
	}
	
	#footer-bottom .secondary-navigation {
		margin: 8px 0 0 0;
	}
	
	.slider {
		min-height: 205px;
	}
	
	#slider .home-reservation-box {
		bottom: inherit !important;
		top: -1px;
		position: relative;
	}
	
	#slider-full .home-reservation-box {
		bottom: inherit !important;
		top: 0px;
		position: relative;
	}
	
	#slider .home-reservation-box,
	#slider-full .home-reservation-box {
		width: 405px;
	}
	
	#slider {
		margin: 0 0 30px 0;
	}
	
	.home-reservation-box input[type="text"], .widget-reservation-box input[type="text"] {
		width: 387px;
		margin: 0 0 10px 0;
	}
	
	.home-reservation-box .select-wrapper, .widget-reservation-box .select-wrapper, .booking-side .select-wrapper {
		width: 405px;
		margin: 0 0 10px 0;
	}
	
	.home-reservation-box input[type="submit"] {
		width: 405px;
	}
	
	.home-reservation-box .select-wrapper select {
		background-position: 77% center !important;
	}
	
	.slider-caption {
		display: none;
	}
	
	.topbar-right .header-contact {
		display: none;
	}
	
	.gmap-button {
		left: 179px;
	}
	
	.flickr_badge_wrapper .flickr_badge_image {
		margin: 0 8px 8px 0;
		height: 60px;
	}

	.flickr_badge_wrapper .flickr_badge_image:nth-child(3n+1) {
		margin: 0 8px 8px 0;
	}

	.flickr_badge_wrapper .flickr_badge_image img {
		width: 60px;
		height: 60px;
	}
	
	#ui-datepicker-div .ui-datepicker-calendar tbody tr td a,
	.ui-datepicker-calendar tbody tr td.ui-datepicker-unselectable span {
		width: 50px;
	}
	
	#ui-datepicker-div {
		padding: 20px 24px;
	}
	
	.main-content, .sidebar {
		width: 100%;
		margin: 0 0 50px 0;
	}
	
	.sidebar {
		padding: 50px 0 0 0;
		border: none;
		border-top: #e8e8e8 1px solid;
	}
	
	.widget-reservation-box input[type="text"] {
		width: 337px;
	}
	
	.widget-reservation-box .select-wrapper {
		width: 355px;
	}
	
	.widget-reservation-box .select-wrapper select {
		width: 110%;
		background-position: 88% center;
	}
	
	#tabs .nav li {
		width: 100%;
	}
	
	#tabs .nav li a {
		width: 367px;
		border-left: #e8e8e8 1px solid;
		border-right: #e8e8e8 1px solid;
	}
	
	.booking-side-wrapper,
	.booking-main-wrapper {
		width: 100%;
	}
	
	.booking-main-wrapper {
		margin: 0 0 30px 0;
	}
	
	.step-wrapper {
		margin: 0 50px 30px 0;
	}
	
	.booking-step-wrapper {
		margin: 0 0 20px 0;
	}
	
	.step-line {
		display: none;
	}
	
	.step-icon-wrapper {
		float: left;
		width: 40px;
	}
	
	.step-title {
		float: left;
		text-align: left;
		width: 60%;
		margin: 10px 0 0 15px;
	}
	
	.step-wrapper {
		width: 100%;
		border-bottom: #e8e8e8 1px solid;
		padding: 0 0 10px 0;
		margin: 0 0 10px 0;
	}
	
	.booking-step-wrapper .last-col {
		border-bottom: none;
	}
	
	#open_datepicker .ui-state-default {
		width: 50px;
	}
	
	.one-half-form {
		width: 171px;
	}
	
	.booking-side input[type="text"] {
		width: 153px;
	}
	
	.booking-side .select-wrapper {
		width: 355px;
	}
	
	.room-list-right .button2 {
		width: 100%;
		margin: 0 0 10px 0;
	}
	
	.testimonial-one-half {
		width: 100%;
		margin: 0 0 20px 0;
	}
	
	.blog-event-one-half {
		width: 100%;
		margin: 0 0 20px 0;
	}
	
	.event-preview .event-date-wrapper {
		width: 12%;
	}
	
	.event-preview .event-entry-inner {
		width: 84%;
	}
	
	#footer .widget-reservation-box input[type="text"] {
		width: 397px;
	}

	#footer .widget-reservation-box .select-wrapper {
		width: 415px;
	}
	
}

@media only screen and (max-width: 479px) {
	
	#wrapper {
		width: 305px;
	}
	
	#topbar-wrapper, .content-wrapper {
		width: 260px;
	}
	
	.gmap-button {
		left: 0px;
	}
	
	.slider {
		min-height: 137px;
	}
	
	#slider .home-reservation-box,
	#slider-full .home-reservation-box {
		width: 245px;
	}
	
	.home-reservation-box input[type="text"], .widget-reservation-box input[type="text"] {
		width: 227px;
	}
	
	.home-reservation-box .select-wrapper, .widget-reservation-box .select-wrapper, .booking-side .select-wrapper {
		width: 245px;
	}
	
	.home-reservation-box input[type="submit"] {
		width: 245px;
	}
	
	#ui-datepicker-div .ui-datepicker-calendar tbody tr td a,
	.ui-datepicker-calendar tbody tr td.ui-datepicker-unselectable span {
		width: 27px;
	}
	
	#ui-datepicker-div {
		padding: 20px 24px 20px 25px;
	}
	
	#tabs .nav li a {
		width: 212px;
	}
	
	.widget-reservation-box input[type="text"] {
		width: 182px;
	}
	
	.widget-reservation-box .select-wrapper {
		width: 200px;
	}
	
	.widget-reservation-box .select-wrapper select {
		width: 113%;
		background-position: 83% center;
	}
	
	#page-header h2 {
		font-size: 14px;
	}
	
	.comment-left {
		display: none;
	}
	
	.comment-right {
		width: 100%;
	}
	
	.blog-meta, .event-meta {
		line-height: 160%;
	}
	
	.room-list-left img {
		display: none;
	}
	
	.room-list-right {
		float: none;
		width: 100%;
	}
	
	.booking-main .input-left,
	.booking-main .input-right {
		width: 100%;
		float: none;
	}
	
	.contact_details_list li {
		line-height: 130%;
		min-height: 30px;
		margin: 0 0 10px 0;
		padding: 0 0 12px 45px;
	}
	
	.contact_details_list .phone_list:before, .contact_details_list .fax_list:before, .contact_details_list .email_list:before, .contact_details_list .address_list:before {
		top: 0;
	}
	
	.event-entry .event-date-wrapper {
		width: 19%;
	}
	
	.event-inner-wrapper {
		width: 75%;
	}
	
	.testimonial-text {
		width: 69%;
	}
	
	.event-preview .event-date-wrapper {
		width: 18%;
	}
	
	.event-preview .event-entry-inner {
		width: 76%;
	}
	
	#open_datepicker .ui-state-default {
		width: 28px;
	}
	
	.key-unavailable-wrapper,
	.key-available-wrapper,
	.key-selected-wrapper {
		width: 100%;
		margin: 0 0 10px 0;
	}
	
	.booking-side input[type="text"] {
		width: 182px;
	}
	
	.booking-side .select-wrapper {
		width: 200px;
	}
	
	#footer .widget-reservation-box input[type="text"] {
		width: 242px;
	}

	#footer .widget-reservation-box .select-wrapper {
		width: 260px;
	}
	
}

Έπαιξα λιγο στις πρώτες γραμμές με το κώδικα αλλα δεν έβγαλα άκρη. Βασικά το έκανα, απλά μέχρι τα 900px δεν μικραίνει το site και ανοίγει η οριζόντια scroll μπάρα

/* Responsive */
@media only screen and (max-width: 1250px) {
	
	#wrapper {
		width: 1020px;
	}
	
	#slider .home-reservation-box,
	#slider-full .home-reservation-box {
		left: 30px;
	}
	
	.slider-caption-wrapper {
		width: 1020px;
	}
	
}

@media only screen and (max-width: 1050px) {
	
	#wrapper {
		width: 768px;
	}
	
	#topbar-wrapper,
	.content-wrapper {
		width: 700px;
	}
	
	.topbar-left {
		width: 25%;

PCC · 12 Μαρτίου 2014

Βλακείες είναι όλα αυτά μέχρι να γίνει αυτόματο switch το HTML5 σε λίγο καιρό ή να μπορείς να ορίζεις μέσα στο CSS συνθήκες.

Μεγάλη αποτυχία - μεταβάτικο στάδιο - τα.... responsive.

Π Α Τ Α Τ Α !!!

Σύνδεση

Τι γίνεται επιτελους με τα responsive themes???

Προτεινόμενες αναρτήσεις

killer76

PCC

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση