trAvis - MANAGER
Edit File: responsive.css
/* ------------------------- Responsive Design --------------------------*/ #main-container { min-width: 350px; } #content-container { max-width: 94%; } #sidebar { width: 29%; } #content-container img { max-width: 100%; height: auto; } #content .post-content { max-width: 100%; } #content-container .testimonial-img { max-width: 20% !important; } #full-width .testimonial-container blockquote { max-width: 74%; } #content { width: 68%; } .page #content,.single #content,.error404 #content { padding-left: 2%; padding-right: 2%; width: 64%; } .page-template-template-featured-php #content { padding: 0; width: 68%; } #sidebar-projects li { width: 28%; margin-left: 5%; margin-bottom: 15px; padding: 0; height: auto; } #sidebar-projects li img { width: 100%; height: auto; } body { font-size: 15px; } .post-content-content a.read-more, .post-content a.read-more { margin-right: -2%; margin-bottom: -5px; } .post-content-content a.read-more { margin-right: -20px; margin-bottom: -5px; } #content-container { max-width: 94%; margin-bottom: 35px; } #sidebar .search-input, .widget-contact-form input[type="text"] { width: 100%; max-width: 95%; padding: 2%; } .widget-contact-form textarea { width: 100%; max-width: 95%; padding: 2%; } #sidebar #SGM { width: 100%; max-width: 100%; } .tabs .w2 a { width: auto; padding: 0px 15px; } textarea, input[type="text"], input[type="password"], #content .gallery, #portfolio-preview-container .gallery, blockquote, .testimonial-container { max-width: 100%; } .invalid textarea, .invalid input[type="text"] { max-width: 94%; } #slider-container { max-width: 94%; } #nivo-slider { min-height: 160px; } #nivo-slider { max-width: 100%; height: auto; } .nivo-caption { width: 96%; margin-left: 2%; margin-right: 2%; } #static-header-img img { max-width: 100%; height: auto; } .page #full-width, .single #full-width, .error404 #full-width, #full-width, .blog #full-width { max-width: 96%; width: 96%; padding: 2%; } .blog #full-width { max-width: 100%; width: 100%; padding: 0; padding-bottom: 0; } .page-template-template-featured-php #full-width { padding-left: 0; padding-right: 0; max-width: 100%; width: 100%; } .testimonial-container blockquote { width: 70%; } .columns-wrapper { width: 620px; max-width: 100%; float: none; overflow: hidden; } #full-width .columns-wrapper { width: 940px; } .columns-wrapper p { margin-bottom: 7px; margin-top: 7px; } .two-columns { width: 47%; float: left; margin-right: 6%; } .three-columns, #content .three-columns { width: 30%; float: left; margin-right: 5%; } .four-columns, #content .four-columns{ width: 22%; float: left; margin-right: 4%; } .nomargin, #content .nomargin{ margin: 0 0 0 0; } .nivo-directionNav a { top: 50%; margin-top: -25px; } .latest-small, #full-width .latest-small { width: 47.6%; } .latest-small-right { margin-left: 4.8%; } #full-width .latest-small-right { margin-left: 3.2%; } #full-width .latest-small, #full-width .latest-small { width: 48.4%; } #content .latest-small .post-content, #full-width .latest-small .post-content { max-width: 93%; padding: 4%; } .latest-small .post-content a.read-more { margin-right: -4%; margin-bottom: -4%; } #full-width .featured-post-big .post-content { padding: 0; } #blog-latest .columns-wrapper p { margin: 0; } #content-container .latest-small .post-content img { max-width: 110%; margin: -5% 0 0 -4.5%; height: auto; } #hide-button { bottom: -29px; } /*------ Mobile Navigation --------*/ .mobile-nav { display: block; float: right; cursor: pointer; margin: 26px 3.06%; margin-right: 2%; display: none; position: absolute; top: 0; right: 0; } .mob-nav-btn { display: block; background-size: 20px 15px; padding-left: 27px; line-height: 1.2em; text-transform: uppercase; font-size: 14px; } .mob-nav-menu { display: block; } .mob-nav-menu ul ul a:before{ content:"> "; font-size:10px; line-height:14px; margin-right:3px; color:#ccc; } .mob-nav-menu ul { margin-left: 0; } #portfolio-categories { height: auto; min-height: 30px; padding-left: 40px; } #filter-btn { margin-left: 0; } .portfolio-sidebar { width: 28%; max-width: 28%; } .showcase-item { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; } #portfolio-big-pagination { width: 100%; } .portfolio-arrow { max-width: 48%; width: 31px; height: 20px; display: none; border-radius: 2px; margin-right: 2%; text-align: center; line-height: 21px; } .portfolio-sidebar .arrow-right:before { content: ">"; } .portfolio-sidebar .arrow-left:before { content: "<"; } .layout-left #sidebar { margin-right: 0; } .mob-nav-menu { position: absolute; z-index: 10000; width: 100%; } .mob-nav-menu ul { list-style: none; margin-left: 0px; } .mob-nav-menu li { line-height: 2.5em; text-transform: uppercase; font-size: 13px; } .mob-nav-menu a { padding-left: 10px; } .mob-nav-menu a:hover { text-decoration: none; } .mob-nav-menu ul ul a { padding-left: 4%; } .mob-nav-menu ul ul ul a { padding-left: 8%; } .mob-nav-menu ul ul ul ul a { padding-left: 10%; } #sidebar .widget_categories ul li, #sidebar .widget_nav_menu ul li, #sidebar .widget_archive ul li, #sidebar .widget_links ul li { width: 105%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .single .post { margin-left: -3.1%; margin-top: -12px; margin-bottom: 0px; width: 106.1%; } .single-post #full-width .post { margin-left: -2.1%; margin-top: -20px; } #full-width .page-content-box { background-color: #313131; padding: 10px 2%; margin-bottom: 40px; width: 96%; margin-left: 0; max-width: 100% } #content-container { padding-bottom: 50px; } #full-width .post-content { max-width: 100%; } #full-width .post { max-width: 104.2%; } #full-width .featured-post-big .post, .blog #full-width .post { max-width: 100%; } body.single #full-width .post-content { padding: 0; } #comments { padding: 2%; } .single #content { padding: 12px 2%; } .gallery a { margin-right: 5%; } .slider-info-btn { display: none; position: absolute; right: 0; bottom: 0; width: 155px; text-align: center; text-transform: uppercase; } .slider-info h2 { margin: 0; margin-bottom: -5px; } .portfolio-arrow { display: none; width: 50%; height: 23px; border-radius: 3px; line-height: 25px; } .showcase-item h6 { width: 50%; margin-bottom: 0; } .showcase-item .post-info { width: 50%; } #content-container .featured-posts .wp-pagenavi { margin-bottom: 0px; } .sidebar-box h4, .portfolio-sidebar h4 { width: 100%; max-width: 97.5%; } #content-container ul#sidebar-projects { margin: 10px 0 -10px -4%; } #menu ul li a:hover, #menu ul li.hovered>a { border-top: 0px; border-bottom: 0px; } .mobile .post-info a { font-size: 11px; } .mobile .post-title-wrapper h2 { font-size: 28px; } .mobile #comments { font-size: 13px; } .mobile #comments h4 { font-size: 18px; } .mobile .button,.mobile #submit,.mobile input[type="submit"] { font-size: 17px; } .mobile .testimonials-details { font-size: 9px; } /*.mobile h4 { font-size: 20px; } */ .mobile h1.page-heading { font-size: 22px; } .mobile input[type="text"],.mobile textarea,.mobile input[type="password"] { font-size: 14px; } .mobile p.form-submit { margin-bottom: 15px; } .coment-box { padding: 3%; } #content-container ul.commentlist ul.children { padding-left: 6%; } /*--------------------- Media Queries ------------------------*/ @media screen and (max-width: 1010px) { .showcase-item { padding: 5%; } .preview-item { max-width: 70%; } .portfolio-big-img { max-width: 100%; } } .mobile #grid-gallery { margin-left: auto; margin-right: auto; } @media screen and (max-width: 800px) { #logo-container { margin-left: 2%; margin-bottom: 7px; } #logo-container a img { max-height: 100px; max-width: 77%; float: left; } #navigation-container { display: none; } .mobile-nav { display: block; } .page-template-template-grid-gallery-php #header { margin-bottom: 17px; } #slider-navigation-wrapper { width: 360px; background-size: 446px 71px; } .with-filter { margin-top: -17px; } .with-filter .preview-content-wrapper { margin-top: 0px; } .horizontal-slider { bottom: -25px; } .showcase-item h6, .showcase-item .post-info { display: none; } .portfolio-sidebar, .portfolio-items { width: 20%; max-width: 20%; } .preview-item { max-width: 76%; } .showcase-item { padding: 0; width: auto; height: auto; width: 100%; } .portfolio-items img { width: 100%; height: auto; margin-right: 0; } .portf-navigation { display: none; } .portfolio-arrow { display: inline-block; } #portfolio-big-pagination { margin-top: 5px; margin-bottom: 20px; } ul.portf-navigation { display: none; } #slider-container { margin-bottom: 25px; margin-top: 25px; } #sidebar, #full-width .page-content-box { margin-bottom: 25px; } #header { min-height: 50px; } #sidebar-projects li { margin-left: 5%; margin-bottom: 10px; } .four-columns, #content .four-columns { width: 48%; } .four-columns:nth-child(1), .four-columns:nth-child(2), #content .four-columns:nth-child(1), #content .four-columns:nth-child(2) { margin-bottom: 15px; } .four-columns:nth-child(2), #content .four-columns:nth-child(2) { margin-right: 0; } .sidebar-box h4, .portfolio-sidebar h4 { max-width: 96.5%; } .showcase-selected { background: none #000; opacity: 0.5; } table td { padding: 2px; } #recaptcha_image{ max-width: 78%; } } @media screen and (max-width: 600px) { #content { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; } .page #content, .error404 #content { max-width: 90%; width: 90%; padding-left: 5%; padding-right: 5%; } .single-post #content { max-width: 96%; width: 96%; } .page-template-template-featured-php #content { width: 100%; max-width: 100%; padding: 0%; } #sidebar { width: 100%; margin-top: 30px; } .layout-left #content { float: left; } #footer-social-icons { float: none; text-align: center; } #footer-menu ul { text-align: center; } #footer-menu li { display: inline; float: none; } .copyrights { display: inline-block; float: none; text-align: center; width: 100%; margin-left: 0; } #gallery-container { margin-bottom: 120px; } .footer-spacer { display: none; } .single .post { margin-left: -2%; margin-top: -12px; margin-bottom: 0px; width: 112%; } .single-post .post { width: 104%; } .layout-full .single .post { margin-left: -3%; margin-top: -3%; } #content-container dl.gallery-item { margin-top: 0px; } /*Categories Filter*/ #filter-btn.filter-opened { border-radius: 5px; } #portfolio-categories ul { height: auto; background-color: #ccc; position: absolute; z-index: 100; top: 23px; width: 150px; border-radius: 0px 5px 5px 5px; } #portfolio-categories ul li { display: list-item; list-style: none; float: none; padding: 7px 11px 7px 12px; } #showcase-categories ul li { line-height: 22px; padding: 0px 13px; margin-top: 0px; font-size: 14px; } #showcase-categories { padding: 7px 0; } #showcase-categories ul li.selected { border-radius: 15px; } .portfolio-big-img { min-height: 90px; } #content-container .wp-pagenavi { margin-bottom: 0px; } #content-container { margin-bottom: 90px; } .sidebar-box h4, .portfolio-sidebar h4 { max-width: 98.7%; } #sidebar-projects li { width: 14.6%; margin-left: 2%; } #content-container ul#sidebar-projects { margin: 10px 0 -10px -2%; width: 102%; } #full-width .gallery { margin-top: 10px; } .iphone .mob-nav-menu ul ul a::before { font-size: 15px; } } @media screen and (max-width: 490px) { #slider-navigation-wrapper { width: 238px; background-size: 315px 71px; } .nivo-caption { display: none !important; } .latest-small, #full-width .latest-small { width: 100%; } .latest-small-right { margin-left: 0; } #content .latest-small .post-content { width: 100%; } #content-container .latest-small .post-content img { width: 110%; } .latest-small .read-more { margin-right: -4%; margin-bottom: -5%; } #sidebar-projects li { width: 18%; margin-left: 2%; } .content-box { margin: 0 0px 10px 0; } #content-container ul#sidebar-projects { margin: 10px 0 -10px -1%; } #content .three-columns, .three-columns, .four-columns, #content .four-columns, .two-columns ,#content .two-columns { width: 100%; } #full-width .latest-small-right { margin-left: 0; } .sidebar-box h4, .portfolio-sidebar h4 { max-width: 98%; } #nivo-slider { min-height: 120px; } #content-container ul#sidebar-projects { width: 100%; } } @media all and (max-height: 300px) { .back-btn { width: 155px; } .slider-info-btn { display: block; } .preview-description { min-height: 30px; position: relative; top: -13px; } #logo-container a img { max-height: 70px; } } .mobile .bg-image-pattern { background: none; } .gallery img { border-width: 0px; max-width: 100%; height: auto; }