API tools faq
paste
roxcoder

responsive.less

roxcoder
Nov 23rd, 2015
177
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.82 KB | None | 0 0
raw download clone embed print report
  1. /**
  2.  * @package Helix Framework
  3.  * @author JoomShaper http://www.joomshaper.com
  4.  * @copyright Copyright (c) 2010 - 2013 JoomShaper
  5.  * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
  6. */
  7.  
  8. .responsive {
  9.  
  10.     /* Large Devices, Wide Screens */
  11.     @media only screen and (max-width : 1200px) {
  12.         // full / desktop menu
  13.         #sp-main-menu ul.level-0 > li{
  14.             margin-right: 0;
  15.         }
  16.         // Partners image wrapper
  17.         #sp-clients-wrapper .sp-clients ul li {
  18.             width: 12%;
  19.         }
  20.        
  21.     }
  22.     /* End Large Devices, Wide Screens */
  23.  
  24.  
  25.     /* Medium Devices, Desktops */
  26.     @media only screen and (max-width : 979px) {
  27.         /*Home*/
  28.         .sp-main-menu-toggler{
  29.             padding: 0;
  30.         }
  31.         .searchwrapper {
  32.             height: 90px;
  33.         }
  34.         #sp-header-wrapper #sp-top-right .module .ecom-top-cart{
  35.             margin-right: 55px;
  36.         }  
  37.  
  38.         #sp-header-wrapper #sp-top-right .top-cart-wrapper .hikashop_cart.active {
  39.             top: 60px;
  40.         }
  41.         .top-cart-wrapper .hikashop_cart:before {
  42.             right: 140px;
  43.         }
  44.         #sp-feature-wrapper .span3 {
  45.             width: 47%;
  46.             float: left;
  47.             margin:0 0 30px 0;
  48.             border:0;
  49.         }
  50.  
  51.         #sp-feature-wrapper .sp-feature {
  52.             padding: 30px 0;
  53.         }
  54.         div.hikashop_category, div.hikashop_product {
  55.             width: 50% !important;
  56.         }
  57.  
  58.         .latest-review .itemWrapper .itemList {
  59.             width: 50%;
  60.             float: left;
  61.         }
  62.         .action-content {
  63.             max-width: 70%;
  64.         }
  65.         img.sp_simple_gallery {
  66.             width: 75px;
  67.         }
  68.  
  69.         /*Shop variation*/
  70.         .hikashop_products_listing ul li {
  71.             width: 50%;
  72.             float: left;
  73.         }
  74.         #hikashop_small_image_div .hikashop_child_image {
  75.             width: 107px;          
  76.         }
  77.         #hikashop_small_image_div .hikashop_child_image:last-child {
  78.             margin-right: 0;
  79.         }
  80.  
  81.         /*Shop*/
  82.         .itemBorderWrapper {
  83.             margin-bottom: 40px;
  84.         }
  85.         div.itemContainerLast {
  86.             margin-bottom: 15px;
  87.         }
  88.         // Partners image wrapper
  89.         #sp-clients-wrapper .sp-clients ul li {
  90.             width: inherit;
  91.         }
  92.        
  93.     }
  94.     /*End Medium Devices, Desktops */
  95.  
  96.  
  97.     /* Small Devices, Tablets */
  98.     @media only screen and (max-width : 767px) {
  99.  
  100.         // Body Padding
  101.         padding: 0;
  102.  
  103.         // Sub Header
  104.         #sp-subheader-wrapper{
  105.             padding: 20px 10px;
  106.         }
  107.  
  108.         .overlay-image-wrapper .overlay-img img {
  109.             width: 100%;
  110.         }
  111.  
  112.         /*Home*/
  113.         #sp-logo, #sp-top-right {
  114.             max-width: 50%;
  115.             float: left;
  116.         }
  117.         #sp-top-right{
  118.             padding-right: 40px;
  119.         }
  120.  
  121.         #sp-menu{
  122.             display: none;
  123.         }
  124.  
  125.         #sp-header-wrapper #sp-top-right .searchwrapper form .icon-remove-wrapper{
  126.             right: 60px;
  127.         }
  128.  
  129.  
  130.         #sp-header-wrapper #sp-top-right .top-cart-wrapper .hikashop_cart.active{
  131.             top: 45px;
  132.             right: 5px;
  133.             padding: 15px;
  134.         }
  135.  
  136.         section,
  137.         header#sp-header-wrapper{
  138.             padding-left: 10px;
  139.             padding-right: 10px;
  140.             box-sizing: border-box;
  141.         }
  142.         section#sp-slideshow-wrapper {
  143.             padding: 0;
  144.         }
  145.         section#sp-latest-review-wrapper{
  146.             padding: 95px 25px 55px 25px !important;
  147.         }  
  148.  
  149.         #sp-smart-slider.sp-glamour-layout h2.sp-posttitle, .sp-glamour-layout .sp-slider-content .sp-introtext{
  150.             padding: 0 20px;
  151.         }
  152.  
  153.         // #sp-smart-slider.sp-glamour-layout, .sp-glamour-layout .sp-slider-item {
  154.         //  height: 450px;
  155.         // }
  156.         .sp-glamour-layout .sp-slider-item {
  157.             padding: 0 15px;
  158.         }
  159.         #sp-slideshow-wrapper #sp-smart-slider.sp-glamour-layout .sp-slider-content .sp-vertical-middle {
  160.             margin-top: 140px !important;
  161.         }
  162.         #sp-slideshow-wrapper #sp-smart-slider.sp-glamour-layout .sp-slider-content h1.sp-title {
  163.             font-size: 50px;
  164.         }
  165.         #sp-slideshow-wrapper #sp-smart-slider.sp-glamour-layout .sp-slider-content h2.sp-posttitle, .sp-glamour-layout .sp-slider-content .sp-introtext {
  166.             font-size: 32px;
  167.             margin-top: 5px;
  168.             margin-bottom: 5px;
  169.             line-height: 40px;
  170.         }
  171.  
  172.  
  173.         #sp-feature-wrapper .span3, .latest-review .itemWrapper .itemList, .hikashop_products_listing ul li {
  174.             width: 50%;
  175.             float: left;
  176.             padding: 15px;
  177.         }
  178.         #sp-feature-wrapper .sp-feature {
  179.             padding: 30px 0;
  180.         }
  181.         #sp-call-to-action-wrapper {
  182.             padding: 40px 30px;
  183.             text-align: center;        
  184.             .action-button {
  185.                 float: none !important;
  186.                 display: inline-block;
  187.             }
  188.         }
  189.         #sp-clients {
  190.             padding:0 25px;
  191.         }      
  192.         #sp-news-letter-wrapper .newsletter-field .acymailing_form {
  193.             left: 0;
  194.             text-align: center;
  195.         }  
  196.        
  197.         #sp-news-letter-wrapper .newsletter-field .acysubbuttons {
  198.             right: 12%;
  199.         }  
  200.         #sp-newsletter1 {
  201.             padding: 0 25px;
  202.             text-align: center;
  203.         }
  204.         #bottom .span3 {
  205.             width: 50%;
  206.             float: left;
  207.             padding: 0 25px;
  208.             min-height: 275px;
  209.             margin-bottom: 25px;
  210.         }
  211.         #sp-footer-wrapper {
  212.             text-align: center;
  213.         }
  214.         #sp-footer-wrapper #sp-footer1 .copyright,
  215.         #sp-footer-wrapper #sp-footer1 .designed-by {
  216.             float: none;
  217.         }
  218.  
  219.         #sp-footer-wrapper #sp-footer2{
  220.             text-align: center;
  221.         }
  222.         .action-content {
  223.             max-width: 100%;
  224.         }
  225.  
  226.         /*sp-pricing*/
  227.         .sp-pricing {
  228.             margin-left: -10px;
  229.         }
  230.         .sp-pricing .span3 {
  231.             width: 45%;
  232.             float: left;
  233.             margin-left: 27px;
  234.             margin-bottom: 30px;
  235.         }
  236.  
  237.         .sppb-pricing-box {
  238.             margin-bottom: 30px;
  239.         }
  240.  
  241.         /* Experts */
  242.  
  243.         .item-persons-wrapper{
  244.             .sppb-row > div{
  245.                 margin-bottom: 60px;
  246.                 &:last-child{
  247.                     margin-bottom: 0;
  248.                 }
  249.             }
  250.         }
  251.     }
  252.     /* End Small Devices, Tablets */
  253.  
  254.  
  255.     /* Extra Small Devices, Phones  */
  256.     @media only screen and (max-width : 480px) {
  257.         /*Home*/
  258.         // Top cart and search icon
  259.         #sp-header-wrapper #sp-top-right {
  260.             padding-right: 10%;
  261.             .module .ecom-top-cart{
  262.                 margin-right: 10px;
  263.             }
  264.         }
  265.  
  266.         .overlay-image-wrapper .overlay-img img {
  267.             width: 100%;
  268.         }
  269.  
  270.         // Top cart list
  271.         #sp-header-wrapper #sp-top-right .top-cart-wrapper .hikashop_cart {
  272.             right: -50px;
  273.             &:before{right: 45px;}
  274.             form{
  275.                 max-width: 228px;
  276.             }
  277.         }
  278.        
  279.         #sp-slideshow-wrapper #sp-smart-slider.sp-glamour-layout .sp-slider-content h1.sp-title {
  280.             font-size: 36px;
  281.             line-height: 36px;
  282.         }
  283.         #sp-slideshow-wrapper #sp-smart-slider.ssp-glamour-layout .sp-slider-content h2.sp-posttitle,
  284.         #sp-call-to-action-wrapper .action-content h2, #sp-smart-slider.sp-glamour-layout .sp-slider-content .sp-introtext {
  285.             font-size: 24px;
  286.         }
  287.  
  288.         #sp-feature-wrapper .span3, .latest-review .itemWrapper .itemList {
  289.             width: 100%;
  290.             float: none;
  291.         }
  292.        
  293.         .btn, .btn.btn-primary, button {
  294.             padding: 10px 20px;
  295.             font-size: 12px;
  296.         }
  297.         .sp-main-menu-toggler{
  298.             font-size: 24px;
  299.         }
  300.  
  301.         .module h3{
  302.             font-size: 20px;
  303.         }
  304.         #sp-news-letter-wrapper .newsletter-field .acymailing_form span.acyfield_email input {
  305.             width: 85% !important;
  306.         }
  307.         #sp-news-letter-wrapper .newsletter-field .acysubbuttons {
  308.             left: 75%;
  309.             top: 0px;
  310.         }
  311.         .action-content {
  312.             max-width: 100%;
  313.         }
  314.         #bottom .span3 {
  315.             width: 100%;
  316.             float: none;
  317.             min-height: 230px;
  318.         }
  319.         div.k2ItemsBlock ul li div.moduleItemIntrotext a.moduleItemImage img {
  320.             width: 100%;
  321.         }
  322.         #sp-bottom-wrapper {
  323.             padding-bottom: 0 !important;
  324.         }
  325.         #sp-news-letter-wrapper .newsletter-field .acysubbuttons > input[type="submit"] {
  326.             padding: 10px 20px;
  327.         }
  328.         /*shop variation*/
  329.         .module h3 {
  330.             text-align: center;
  331.         }
  332.         .hikashop_products_listing ul li {
  333.             width: 100%;
  334.             float: none;
  335.         }
  336.         #hikashop_small_image_div .hikashop_child_image {
  337.             width: 90px;
  338.             margin-right: 8px !important;          
  339.         }
  340.         #hikashop_small_image_div .hikashop_child_image:last-child {
  341.             margin-right: 0;
  342.             max-width: 80px;
  343.         }
  344.  
  345.         /*Shop & Review Variation*/
  346.         #sp-subheader-wrapper #subheader {
  347.             margin-top: 10px;
  348.         }
  349.         #sp-subheader-wrapper #subheader .subheader-title h3 {
  350.             text-align: center;
  351.             font-size: 24px;
  352.         }
  353.         #sp-subheader-wrapper #subheader .subheader-title h3{
  354.             &:after, &:before {
  355.                 top: 5px;  
  356.             }
  357.             &:before{
  358.                 left: -55px;
  359.             }
  360.             &:after{
  361.                 right: -55px;
  362.             }
  363.         }
  364.  
  365.         #sp-breadcrumb {
  366.             text-align: center;
  367.         }
  368.         .hikashop_products .hikashop_product .hikashop_container .hikashop_subcontainer form .hikashop_product_stock:before {
  369.             top: 10px;
  370.             left: 30%;
  371.         }
  372.         div.hikashop_category, div.hikashop_product {
  373.             width: 100% !important;
  374.         }
  375.  
  376.         /*Shop*/
  377.         .itemBorderWrapper {
  378.             margin-bottom: 30px;
  379.         }
  380.         div.itemContainerLast {
  381.             margin-bottom: 40px;
  382.         }
  383.  
  384.         //Pagination
  385.  
  386.         .hikashop_products_pagination_bottom .list-footer ul .pagenav{
  387.             padding: 0 10px;
  388.         }
  389.  
  390.         /*about-us*/
  391.         .about-us .content-heading {
  392.             margin-bottom: 30px;
  393.         }
  394.         .about-us .span4 {
  395.             margin-bottom: 30px;
  396.         }
  397.  
  398.         /*sp-pricing*/
  399.         .sp-pricing .span3 {
  400.             width: 100%;
  401.             float: none;
  402.             margin-bottom: 30px;
  403.             margin-left: 10px;
  404.         }
  405.  
  406.  
  407.         #hikashop_checkout_page .hikashop_checkout_login .hikashop_checkout_login_left_part .form-inline .input-append input {
  408.             width: 85%;
  409.         }
  410.         #hikashop_checkout_page .hikashop_checkout_login .hikashop_checkout_login_left_part .form-inline .input-append a.btn.hasTooltip {
  411.             padding:8px 20px;
  412.         }
  413.         #hikashop_checkout_page .hikashop_checkout_login .hikashop_checkout_login_right_part .form-horizontal select {
  414.             width: 57%;
  415.         }
  416.  
  417.        
  418.    
  419.     }
  420.     /* End Extra Small Devices, Phones  */
  421.  
  422.  
  423.     /* Custom, iPhone Retina */
  424.     @media only screen and (max-width : 320px) {
  425.  
  426.        
  427.  
  428.         // Title
  429.         #hikashop_checkout_page legend{
  430.             text-align: center;
  431.         }
  432.  
  433.         #sp-page-builder .sppb-section-title .sppb-title-heading{
  434.             font-size: 20px;
  435.             :before{
  436.                 left: -55px;
  437.             }
  438.             &:after{
  439.                 right: -55px;
  440.             }
  441.         }
  442.  
  443.         .hikashop_products .hikashop_product .hikashop_container .hikashop_subcontainer form .hikashop_product_stock:before {
  444.             top: 10px;
  445.             left: 25%;
  446.         }
  447.         /*Shop*/
  448.         .itemBorderWrapper {
  449.             margin-bottom:30px;
  450.         }
  451.         div.itemContainerLast {
  452.             margin-bottom: 15px;
  453.         }      
  454.         #hikashop_checkout_page .hikashop_checkout_login .hikashop_checkout_login_left_part .form-inline .input-append input {
  455.             width: 85%;
  456.         }
  457.         #hikashop_checkout_page .hikashop_checkout_login .hikashop_checkout_login_left_part .form-inline .input-append a.btn.hasTooltip {
  458.             padding:8px 20px;
  459.         }
  460.         #hikashop_checkout_page .hikashop_checkout_login .hikashop_checkout_login_right_part .form-horizontal select {
  461.             width: 57%;
  462.         }
  463.  
  464.         // Singup form
  465.         .hikashop_checkout_login_right_part .input .hikashop_contentpane{
  466.             padding: 0;
  467.         }
  468.  
  469.         // Cart product list
  470.         #hikashop_checkout_page .hikashop_checkout_login .hikashop_checkout_login_right_part{
  471.             border: none;
  472.         }
  473.  
  474.         #hikashop_checkout_page .hikashop_checkout_cart{
  475.             .hikashop_cart_product_name_title,
  476.             .hikashop_cart_product_name_value ,
  477.             .hikashop_cart_product_quantity_refresh,
  478.             .hikashop_cart_product_quantity_delete,
  479.             .hikashop_cart_empty_footer{
  480.                 display: none;
  481.             }
  482.         }
  483.         // Partners image wrapper
  484.         #sp-clients-wrapper .sp-clients ul li {
  485.             width: 44%;
  486.             margin: 6px;
  487.         }  
  488.         #sp-clients-wrapper img {
  489.             margin-top: 25px;
  490.         }
  491.  
  492.         .sp-glamour-layout .sp-slider-item .container .sp-slider-content .sp-vertical-middle {
  493.   display: block;
  494.   margin-top: 80px;
  495.   vertical-align: middle;
  496. }
  497.  
  498.     }
  499.     /* End Custom, iPhone Retina */
  500.  
  501. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!