CSS   207

responsive.css

Guest on 20th July 2021 03:58:22 PM

  1. @media only screen and (max-width: 1170px) {
  2.         .header-elements-wrap,
  3.         .container-boxed,
  4.         .top-bar-content,
  5.         .header-search-wrap #searchform input,
  6.         .top-bar-wrap-boxed {
  7.                 width:1000px;
  8.         }
  9.         .container-boxed .container,
  10.         .container-boxed .fullpage-item,
  11.         .container-boxed .footer-container  {
  12.                 padding-left: 30px;
  13.                 padding-right: 30px;
  14.                 width: auto;
  15.         }
  16.         .page-template-template-fullpage-php .container-boxed .container {
  17.                 padding-left: 0;
  18.                 padding-right: 0;
  19.         }
  20.         .title-container-wrap {
  21.                 padding-left: 20px;
  22.                 padding-right: 20px;
  23.         }
  24.  
  25. }
  26. /* #Tablet (Landscape)
  27. ================================================== */
  28. @media only screen and (max-width: 1024px) {
  29.  
  30.         .header-elements-wrap,
  31.         .sticky-menu-activate,
  32.         .top-bar-wrap {
  33.                 display: none;
  34.         }
  35.         .title-container-wrap {
  36.                 padding-left: 20px;
  37.                 padding-right: 20px;
  38.         }
  39.         .container,
  40.         .container-boxed,
  41.         .title-container,
  42.         .fullpage-item,
  43.         .footer-container,
  44.         .header-search-wrap #searchform input,
  45.         .top-bar-wrap-boxed {
  46.             width: 920px;
  47.         }
  48.         .container-boxed .container,
  49.         .container-boxed .fullpage-item,
  50.         .container-boxed .footer-container  {
  51.                 padding-left: 30px;
  52.                 padding-right: 30px;
  53.                 width: auto;
  54.         }
  55.         .page-template-template-fullpage-php .container-boxed .container {
  56.                 padding-left: 0;
  57.                 padding-right: 0;
  58.         }
  59.         .responsive-menu-wrap {
  60.             display: block;
  61.         }
  62.         .portfolio-nav-wrap {
  63.                 margin-top:0;
  64.                 position: static;
  65.         }
  66.         .portfolio-nav {
  67.                 position: static;
  68.         }
  69.  
  70.         #demopanel {
  71.                 display:none !important;
  72.         }
  73.  
  74. }
  75.  
  76. /* #Tablet (Portrait)
  77. ================================================== */
  78.  
  79.     /* Note: Design for a width of 768px */
  80.  
  81. @media only screen and (min-width: 768px) and (max-width: 959px) {
  82.  
  83.         .container,
  84.         .container-boxed,
  85.         .title-container,
  86.         .fullpage-item,
  87.         .footer-container,
  88.         .header-search-wrap #searchform input,
  89.         .top-bar-wrap-boxed {
  90.             width: 700px;
  91.         }
  92.         .container-boxed .container,
  93.         .container-boxed .fullpage-item,
  94.         .container-boxed .footer-container  {
  95.                 padding-left: 30px;
  96.                 padding-right: 30px;
  97.                 width: auto;
  98.         }
  99.         .page-template-template-fullpage-php .container-boxed .container {
  100.                 padding-left: 0;
  101.                 padding-right: 0;
  102.         }
  103.  
  104.         .sidebar-wrap,
  105.         .sidebar-wrap-single {
  106.                 position: static;
  107.         }
  108.         .sidebar,
  109.         .sidebar-wrap,
  110.         .sidebar-wrap-single {
  111.                 padding:0;
  112.         }
  113.  
  114.         .sidebar-widget .infobar-portfoliogrid li {
  115.             border: medium none;
  116.             float: left;
  117.             margin: 0;
  118.             padding: 0;
  119.             width: 16.6%;
  120.         }
  121.         .footer-widget .infobar-portfoliogrid li {
  122.             border: medium none;
  123.             float: left;
  124.             margin: 0;
  125.             padding: 0;
  126.             width: 14.2%;
  127.         }
  128.         .grid-list-portfolio-related ul li {
  129.                 width: 13%;
  130.         }
  131.  
  132.         .top-menu-wrap {
  133.                 width:100%;
  134.         }
  135.         .top-bar-wrap,
  136.         .header-elements-wrap,
  137.         .container,
  138.         .title-container,
  139.         .fullpage-item,
  140.         .slideshow_content_wrap{
  141.         }
  142.  
  143.         #flex-testimonails .flex-direction-nav {
  144.                 display:none;
  145.         }
  146.         /* Search Input */
  147.         #searchform input {
  148.             width: 198px;
  149.         }
  150.  
  151.         /* Audio Progress Bar */
  152.         div.jp-audio div.jp-type-single div.jp-progress {
  153.                 width:70%;
  154.         }
  155.  
  156.         /* Ajax Portfolio */
  157.         .ajax-gallery-navigation {
  158.                 float:none;
  159.         }
  160.         #ajax-gridblock-wrap .gridblock-contents-wrap {
  161.                 margin-top:0;
  162.         }
  163.  
  164.  
  165.         /* Main mneu and Logo */
  166.         .header-elements-wrap {
  167.                 padding: 20px 0;
  168.         }
  169.         .logo {
  170.                 float: none;
  171.         }
  172.  
  173.         /* Header search OFF */
  174.         .header-search-wrap {
  175.                 display:none;
  176.         }
  177.  
  178.         /* Mobile Menu ON */
  179.         .responsive-menu-wrap {
  180.                 display:block;
  181.         }
  182.         /* Main Menu and Header Menu OFF */
  183.         .mainmenu-navigation {
  184.                 display:none;
  185.         }
  186.         .header-menu-wrap,
  187.         .sticky-menu-activate {
  188.                 display:none;
  189.         }
  190.  
  191.         .container-boxed {
  192.         }
  193.        
  194.         /* Set Sidebar 100% */
  195.         .sidebar-wrap,
  196.         .sidebar-wrap-single {
  197.                 width:100%;
  198.                 margin-top:30px;
  199.                 padding-top:30px;
  200.         }
  201.         .sidebar-widget {
  202.             padding: 0 40px;
  203.         }
  204.  
  205.         /* Column based layouts to 100% */
  206.         .two-column {
  207.                 width:100%;
  208.         }
  209.  
  210.         .service-item {
  211.                 margin-bottom: 30px;
  212.         }
  213.  
  214.         /* All Collumns 100% */
  215.         .column1,
  216.         .column2,
  217.         .column3,
  218.         .column4,
  219.         .column5,
  220.         .column6,
  221.         .column32,
  222.         .column43,
  223.         .column52,
  224.         .column53,
  225.         .service-column-1 .service-item,
  226.         .service-column-2 .service-item,
  227.         .service-column-3 .service-item,
  228.         .service-column-4 .service-item,
  229.         .service-column-5 .service-item,
  230.         .service-column-6 .service-item
  231.         .service-item-space,
  232.         .pricing-table .column2,
  233.         .pricing-table .column3,
  234.         .pricing-table .column4,
  235.         .pricing-table .column5,
  236.         .pricing-table .column6,
  237.         #footer .footer-column {
  238.                 width:100%;
  239.         }
  240.         .person {
  241.                 width: 350px;
  242.                 max-width: 100%;
  243.                 margin: 0 auto;
  244.         }
  245.         /* Portfolio blocks to 100% */
  246.         .gridblock-one .gridblock-element,
  247.         .gridblock-two .gridblock-element,
  248.         .gridblock-three .gridblock-element,
  249.         .gridblock-four .gridblock-element {
  250.                 width:48.9%;
  251.         }
  252.         /* Portfolio container to 100% */
  253.         #gridblock-container {
  254.                 width:100%;
  255.         }
  256.         /* Clients columns to 50% each - 2 columns */
  257.         .client-column-1 .client-item,
  258.         .client-column-2 .client-item,
  259.         .client-column-3 .client-item,
  260.         .client-column-4 .client-item,
  261.         .client-column-5 .client-item,
  262.         .client-column-6 .client-item,
  263.         .client-column-7 .client-item,
  264.         .client-column-8 .client-item,
  265.         .client-column-9 .client-item,
  266.         .client-column-10 .client-item {
  267.                 text-align: center;
  268.                 width:50%;
  269.                 margin-bottom: 40px;
  270.         }
  271.  
  272.         /* Testimonial block */
  273.         .testimonial-say {
  274.                 margin-bottom: 20px;
  275.         }
  276.  
  277.         /* Tabs */
  278.         .ui-tabs .ui-tabs-nav li {
  279.                 width:100% !important;
  280.         }
  281.  
  282.         /* Post header Navigation */
  283.         .portfolio-nav-wrap {
  284.                 margin-top:0;
  285.                 position: static;
  286.         }
  287.         .portfolio-nav {
  288.                 position: static;
  289.         }
  290.         .post-previous {
  291.                 float: left;
  292.         }
  293.  
  294.         /* Comments Adjust */
  295.         ol.commentlist li p {
  296.                 margin-left: 0;
  297.         }
  298.         ol.commentlist li {
  299.                 padding:20px;
  300.         }
  301.  
  302.         /* Comments Adjust */
  303.         .callout-text {
  304.                 float: none;
  305.                 margin-bottom: 20px;
  306.                 text-align: center;
  307.         }
  308.         .callout .callout-title {
  309.                 margin-bottom: 20px;
  310.         }
  311.         .callout-button {
  312.                 float:none;
  313.                 text-align: center;
  314.         }
  315.         .sidebar-widget #searchform input {
  316.                 margin-top:20px;
  317.                 width:76%;
  318.         }
  319.  
  320.         #footer .footer-column {
  321.                 margin-right:0;
  322.                 margin-left:0;
  323.                 margin-top:30px;
  324.         }
  325.  
  326.         #demopanel { display:none;}
  327.  
  328.         .slideshow_title, .static_slideshow_title {
  329.                 font-size: 52px;
  330.                 line-height: 55px;
  331.         }
  332.        
  333.         .slideshow_content_wrap {
  334.                 padding: 50px 0 20px;
  335.         }
  336.         .slideshow_caption,.static_slideshow_caption {
  337.                 width: auto;
  338.                 margin:0 30px;
  339.                 line-height: 17px;
  340.         }
  341. .slideshow_caption, .static_slideshow_caption {
  342.         padding-bottom: 10px;
  343. }
  344. .slideshow_text_shift_up {
  345.         padding-bottom: 50px;
  346. }
  347.  
  348.         .sc_slideshowtitle {
  349.                 font-size:16px;
  350.                 line-height: 18px;
  351.         }
  352.  
  353.         .social-header-wrap ul li.contact-text {
  354.                 top:0;
  355.         }
  356.  
  357.         body,
  358.         h1,
  359.         h2,
  360.         h3,
  361.         h4,
  362.         h5,
  363.         h6,
  364.         .entry-content .entry-post-title h2 a,
  365.         .entry-title h1,
  366.         .entry-content p,
  367.         .work-description,
  368.         .postsummarywrap,
  369.         .sidebar h3,
  370.         .sidebar,
  371.         .sidebar a,
  372.         #copyright,
  373.         .gridblock-four h4 a,
  374.         .gridblock-three h4 a,
  375.         .gridblock-two h4 a,
  376.         .gridblock-one h4 a,
  377.         .gridblock-list h4 a,
  378.         #gridblock-filters li a,
  379.         h1.item-title,
  380.         h2.item-title,
  381.         h3.item-title,
  382.         h4.item-title,
  383.         h5.item-title,
  384.         h6.item-title,
  385.         .entry-content h1,
  386.         .entry-content h2,
  387.         .entry-content h3,
  388.         .entry-content h4,
  389.         .entry-content h5,
  390.         .entry-content h6,
  391.         .portfolio-share li.sharethis,
  392.         .mbutton span,
  393.         .mobile-menu-toggle,
  394.         .responsive-mobile-menu ul li a,
  395.         .responsive-mobile-menu ul.sub-menu li a,
  396.         .slideshow_title,
  397.         .slideshow_caption,
  398.         .sc_slideshowtitle,
  399.         .callout .callout-title,
  400.         .pagination,
  401.         .boxtitle-hover a,
  402.         .ui-tabs .ui-tabs-nav li a,
  403.         .ui-accordion-header.ui-state-default a,
  404.         .ajax-gridblock-data h2 a {
  405.         }
  406.         .sidebar,
  407.         .entry-content,
  408.         .postsummarywrap,
  409.         .mbutton span,
  410.         .gridblock-four .work-description,
  411.         .gridblock-three .work-description,
  412.         .gridblock-two .work-description,
  413.         .gridblock-one .work-description,
  414.         .gridblock-four h4 a,
  415.         .gridblock-three h4 a,
  416.         .gridblock-two h4 a,
  417.         .gridblock-one h4 a,
  418.         .gridblock-list h4 a {
  419.         }
  420.  
  421.         #demopanel {
  422.                 display:none !important;
  423.         }
  424.  
  425.         .portfolio-nav-wrap {
  426.                 margin-top:0;
  427.                 position: static;
  428.         }
  429.         .portfolio-nav {
  430.                 position: static;
  431.         }
  432.  
  433.         .ui-tabs-vertical .ui-tabs-panel,
  434.         .ui-tabs-vertical ul {
  435.                 width: 100%;
  436.         }
  437.  
  438. }
  439.  
  440.  
  441. /*  #Mobile (Portrait)
  442. ================================================== */
  443.  
  444.     /* Note: Design for a width of 320px */
  445.  
  446. @media only screen and (max-width: 767px) {
  447.  
  448.         .container,
  449.         .container-boxed,
  450.         .title-container,
  451.         .fullpage-item,
  452.         .footer-container,
  453.         .header-search-wrap #searchform input,
  454.         .top-bar-wrap-boxed {
  455.             width: 300px;
  456.             max-width: 100%;
  457.         }
  458.         .container-boxed .container,
  459.         .container-boxed .fullpage-item,
  460.         .container-boxed .footer-container  {
  461.                 padding-left: 30px;
  462.                 padding-right: 30px;
  463.                 width: auto;
  464.         }
  465.         .page-template-template-fullpage-php .container-boxed .container {
  466.                 padding-left: 0;
  467.                 padding-right: 0;
  468.         }
  469.         .sidebar-wrap,
  470.         .sidebar-wrap-single {
  471.                 position: static;
  472.         }
  473.         .sidebar,
  474.         .sidebar-wrap,
  475.         .sidebar-wrap-single {
  476.                 padding:0;
  477.         }
  478.  
  479.         .logo img {
  480.                 max-width: 100px;
  481.         }
  482.  
  483.         .top-menu-wrap {
  484.                 width:100%;
  485.         }
  486.         .top-bar-wrap,
  487.         .header-elements-wrap,
  488.         .container,
  489.         .title-container,
  490.         .fullpage-item,
  491.         .slideshow_content_wrap{
  492.         }
  493.  
  494.         #flex-testimonails .flex-direction-nav {
  495.                 display:none;
  496.         }
  497.  
  498.         /* Search Input */
  499.         #searchform input {
  500.             width: 198px;
  501.         }
  502.  
  503.         /* Audio Progress Bar */
  504.         div.jp-audio div.jp-type-single div.jp-progress {
  505.                 width:70%;
  506.         }
  507.  
  508.         /* Ajax Portfolio */
  509.         .ajax-gallery-navigation {
  510.                 float:none;
  511.         }
  512.         #ajax-gridblock-wrap .gridblock-contents-wrap {
  513.                 margin-top:0;
  514.         }
  515.  
  516.  
  517.         /* Main mneu and Logo */
  518.         .header-elements-wrap {
  519.                 padding: 20px 0;
  520.         }
  521.         .logo {
  522.                 float: none;
  523.         }
  524.  
  525.         /* Header search OFF */
  526.         .header-search-wrap {
  527.                 display:none;
  528.         }
  529.  
  530.         /* Mobile Menu ON */
  531.         .responsive-menu-wrap {
  532.                 display:block;
  533.         }
  534.         /* Main Menu and Header Menu OFF */
  535.         .mainmenu-navigation {
  536.                 display:none;
  537.         }
  538.         .header-menu-wrap,
  539.         .sticky-menu-activate {
  540.                 display:none;
  541.         }
  542.  
  543.         .container-boxed {
  544.         }
  545.        
  546.         /* Set Sidebar 100% */
  547.         .sidebar-wrap,
  548.         .sidebar-wrap-single {
  549.                 width:100%;
  550.                 margin-top:30px;
  551.                 padding-top:30px;
  552.         }
  553.         .sidebar-widget {
  554.             padding: 0 40px;
  555.         }
  556.  
  557.         /* Column based layouts to 100% */
  558.         .two-column {
  559.                 width:100%;
  560.         }
  561.  
  562.         .service-item {
  563.                 margin-bottom: 30px;
  564.         }
  565.  
  566.         /* All Collumns 100% */
  567.         .column1,
  568.         .column2,
  569.         .column3,
  570.         .column4,
  571.         .column5,
  572.         .column6,
  573.         .column32,
  574.         .column43,
  575.         .column52,
  576.         .column53,
  577.         .service-column-1 .service-item,
  578.         .service-column-2 .service-item,
  579.         .service-column-3 .service-item,
  580.         .service-column-4 .service-item,
  581.         .service-column-5 .service-item,
  582.         .service-column-6 .service-item
  583.         .service-item-space,
  584.         .pricing-table .column2,
  585.         .pricing-table .column3,
  586.         .pricing-table .column4,
  587.         .pricing-table .column5,
  588.         .pricing-table .column6,
  589.         #footer .footer-column {
  590.                 width:100%;
  591.         }
  592.         /* Portfolio blocks to 100% */
  593.         .gridblock-one .gridblock-element,
  594.         .gridblock-two .gridblock-element,
  595.         .gridblock-three .gridblock-element,
  596.         .gridblock-four .gridblock-element {
  597.                 width:100%;
  598.         }
  599.         /* Portfolio container to 100% */
  600.         #gridblock-container {
  601.                 width:100%;
  602.         }
  603.         /* Clients columns to 50% each - 2 columns */
  604.         .client-column-1 .client-item,
  605.         .client-column-2 .client-item,
  606.         .client-column-3 .client-item,
  607.         .client-column-4 .client-item,
  608.         .client-column-5 .client-item,
  609.         .client-column-6 .client-item,
  610.         .client-column-7 .client-item,
  611.         .client-column-8 .client-item,
  612.         .client-column-9 .client-item,
  613.         .client-column-10 .client-item {
  614.                 text-align: center;
  615.                 width:50%;
  616.                 margin-bottom: 40px;
  617.         }
  618.  
  619.         /* Testimonial block */
  620.         .testimonial-say {
  621.                 margin-bottom: 20px;
  622.         }
  623.  
  624.         /* Tabs */
  625.         .ui-tabs .ui-tabs-nav li {
  626.                 width:100% !important;
  627.         }
  628.  
  629.         /* Post header Navigation */
  630.         .portfolio-nav-wrap {
  631.                 margin-top:0;
  632.                 position: static;
  633.         }
  634.         .portfolio-nav {
  635.                 position: static;
  636.         }
  637.         .post-previous {
  638.                 float: left;
  639.         }
  640.  
  641.         /* Comments Adjust */
  642.         ol.commentlist li p {
  643.                 margin-left: 0;
  644.         }
  645.         ol.commentlist li {
  646.                 padding:20px;
  647.         }
  648.  
  649.         /* Comments Adjust */
  650.         .callout-text {
  651.                 float: none;
  652.                 margin-bottom: 20px;
  653.                 text-align: center;
  654.         }
  655.         .callout .callout-title {
  656.                 margin-bottom: 20px;
  657.         }
  658.         .callout-button {
  659.                 float:none;
  660.                 text-align: center;
  661.         }
  662.         .sidebar-widget #searchform input {
  663.                 margin-top:20px;
  664.                 width:76%;
  665.         }
  666.  
  667.         #footer .footer-column {
  668.                 margin-right:0;
  669.                 margin-left:0;
  670.                 margin-top:30px;
  671.         }
  672.  
  673.         #demopanel { display:none;}
  674.  
  675.         .menu-toggle-wrap {
  676.                 display:none;
  677.         }
  678.  
  679.         .slideshow_title, .static_slideshow_title {
  680.                 font-size: 32px;
  681.                 line-height: 30px;
  682.                 font-weight: 400;
  683.                 letter-spacing: -2px;
  684.         }
  685.  
  686.         .slideshow_content_wrap {
  687.                 padding:10px;
  688.         }
  689. .slideshow_caption, .static_slideshow_caption {
  690.         padding-bottom: 10px;
  691. }
  692. .slideshow_text_shift_up {
  693.         padding-bottom: 50px;
  694. }
  695.  
  696.         .slideshow_caption,.static_slideshow_caption {
  697.                 line-height: 14px;
  698.                 font-size: 12px;
  699.                 margin:0 20px;
  700.                 padding-top:5px;
  701.                 width: auto;
  702.         }
  703.         .sc_slideshowtitle {
  704.                 font-size:16px;
  705.                 line-height: 18px;
  706.         }
  707.         .super-navigation,
  708.         #controls-wrapper #controls {
  709.                 display:none;
  710.         }
  711.  
  712.         .postformat_contents {
  713.                 padding-left:0;
  714.                 padding-right: 0;
  715.         }
  716.  
  717.         .post-single-meta {
  718.                 float: none;
  719.         }
  720.  
  721.         .social-header-wrap ul li.contact-text {
  722.                 top:0;
  723.         }
  724.  
  725.         body,
  726.         h1,
  727.         h2,
  728.         h3,
  729.         h4,
  730.         h5,
  731.         h6,
  732.         .entry-content .entry-post-title h2 a,
  733.         .entry-title h1,
  734.         .entry-content p,
  735.         .work-description,
  736.         .postsummarywrap,
  737.         .sidebar h3,
  738.         .sidebar,
  739.         .sidebar a,
  740.         #copyright,
  741.         .gridblock-four h4 a,
  742.         .gridblock-three h4 a,
  743.         .gridblock-two h4 a,
  744.         .gridblock-one h4 a,
  745.         .gridblock-list h4 a,
  746.         #gridblock-filters li a,
  747.         h1.item-title,
  748.         h2.item-title,
  749.         h3.item-title,
  750.         h4.item-title,
  751.         h5.item-title,
  752.         h6.item-title,
  753.         .entry-content h1,
  754.         .entry-content h2,
  755.         .entry-content h3,
  756.         .entry-content h4,
  757.         .entry-content h5,
  758.         .entry-content h6,
  759.         .portfolio-share li.sharethis,
  760.         .mbutton span,
  761.         .mobile-menu-toggle,
  762.         .responsive-mobile-menu ul li a,
  763.         .responsive-mobile-menu ul.sub-menu li a,
  764.         .slideshow_title,
  765.         .slideshow_caption,
  766.         .sc_slideshowtitle,
  767.         .callout .callout-title,
  768.         .pagination,
  769.         .boxtitle-hover a,
  770.         .ui-tabs .ui-tabs-nav li a,
  771.         .ui-accordion-header.ui-state-default a,
  772.         .ajax-gridblock-data h2 a {
  773.         }
  774.         .sidebar,
  775.         .entry-content,
  776.         .postsummarywrap,
  777.         .mbutton span,
  778.         .gridblock-four .work-description,
  779.         .gridblock-three .work-description,
  780.         .gridblock-two .work-description,
  781.         .gridblock-one .work-description,
  782.         .gridblock-four h4 a,
  783.         .gridblock-three h4 a,
  784.         .gridblock-two h4 a,
  785.         .gridblock-one h4 a,
  786.         .gridblock-list h4 a {
  787.         }
  788.  
  789.         .header-widgets .wpml-lang-selector-wrap {
  790.                 margin:0 auto;
  791.                 text-align: center;
  792.                
  793.         }
  794.         .header-widgets #lang_sel {
  795.                 float:none;
  796.         }
  797.         .top-bar-wrap {
  798.                 height: auto;
  799.         }
  800.  
  801.         #demopanel {
  802.                 display:none !important;
  803.         }
  804.  
  805.         #gridblock-filter-select,
  806.         #gridblock-filters {
  807.                 width: 100%;
  808.         }
  809.  
  810. ul.gridblock-listbox .gridblock-image-link {
  811.         width:100%;
  812.         float: none;
  813. }
  814. ul.gridblock-listbox .work-details {
  815.         margin: 20px 0;
  816. }
  817.  
  818.         .ui-tabs-vertical .ui-tabs-panel,
  819.         .ui-tabs-vertical ul {
  820.                 width: 100%;
  821.         }
  822.  
  823. /*
  824. WooCommerce*/
  825.  
  826.         .woocommerce div.product div.summary,
  827.         .woocommerce #content div.product div.summary,
  828.         .woocommerce-page div.product div.summary,
  829.         .woocommerce-page #content div.product div.summary {
  830.                 width:100% !important;
  831.         }
  832.         .woo-single-flexslider {
  833.                 max-width: 100% !important;
  834.                 width: 100% !important;
  835.         }
  836.         .woocommerce ul.products li.product,
  837.         .woocommerce-page ul.products li.product {
  838.             width: 97% !important;
  839.         }
  840.  
  841. /*
  842.         Product Filters
  843. */
  844.         .woocommerce .woocommerce-result-count,
  845.         .woocommerce-page .woocommerce-result-count {
  846.             float: none !important;
  847.         }
  848.         .woocommerce .woocommerce-ordering,
  849.         .woocommerce-page .woocommerce-ordering {
  850.             float: none !important;
  851.             margin-top:30px !important;
  852.         }
  853.         .mtheme-woo-order-selected,
  854.         .mtheme-woo-order-list ul {
  855.                 width:97%;
  856.         }
  857.         .mtheme-woo-order-selected-wrap i {
  858.                 position: absolute;
  859.         }
  860.  
  861.         /*
  862.         Product Details*/
  863.  
  864.         .woocommerce div.product .woocommerce-tabs,
  865.         .woocommerce #content div.product .woocommerce-tabs,
  866.         .woocommerce-page div.product .woocommerce-tabs,
  867.         .woocommerce-page #content div.product .woocommerce-tabs {
  868.             width: 100%;
  869.         }
  870. /*
  871.         Cart*/
  872.  
  873.         .woocommerce table.cart img,
  874.         .woocommerce #content table.cart img,
  875.         .woocommerce-page table.cart img,
  876.         .woocommerce-page #content table.cart img,
  877.         .woocommerce table.cart .product-thumbnail,
  878.         .woocommerce #content table.cart .product-thumbnail,
  879.         .woocommerce-page table.cart .product-thumbnail,
  880.         .woocommerce-page #content table.cart .product-thumbnail {
  881.         width: 40px !important;
  882.         }
  883.         .woocommerce .shop_table.cart .product-quantity {
  884.                 display:none;
  885.         }
  886.         .woocommerce table.cart td.actions,
  887.         .woocommerce #content table.cart td.actions,
  888.         .woocommerce-page table.cart td.actions,
  889.         .woocommerce-page #content table.cart td.actions {
  890.             padding: 10px !important;
  891.         }
  892.         .woocommerce .cart .button,
  893.         .woocommerce .cart input.button,
  894.         .woocommerce-page .cart .button,
  895.         .woocommerce-page .cart input.button {
  896.             margin-top: 10px;
  897.         }
  898.  
  899.         .woocommerce .cart .button,
  900.         .woocommerce .cart input.button,
  901.         .woocommerce-page .cart .button,
  902.         .woocommerce-page .cart input.button {
  903.             float: none !important;
  904.             margin-bottom: 20px !important;
  905.         }
  906.  
  907.         .woocommerce .col2-set .col-1,
  908.         .woocommerce-page .col2-set .col-1,
  909.         .woocommerce .col2-set .col-2,
  910.         .woocommerce-page .col2-set .col-2  {
  911.             float: none !important;
  912.             width: auto !important;
  913.             margin-bottom: 40px;
  914.         }
  915.                
  916. }
  917.  
  918. /* #Mobile (Landscape)
  919. ================================================== */
  920.  
  921.     /* Note: Design for a width of 480px */
  922.  
  923. @media only screen and (min-width: 480px) and (max-width: 767px) {
  924.  
  925.         .container,
  926.         .container-boxed,
  927.         .title-container,
  928.         .fullpage-item,
  929.         .footer-container,
  930.         .top-bar-wrap-boxed {
  931.             width: 450px;
  932.         }
  933.         .container-boxed .container,
  934.         .container-boxed .fullpage-item,
  935.         .container-boxed .footer-container  {
  936.                 padding-left: 30px;
  937.                 padding-right: 30px;
  938.                 width: auto;
  939.         }
  940.         .page-template-template-fullpage-php .container-boxed .container {
  941.                 padding-left: 0;
  942.                 padding-right: 0;
  943.         }
  944.  
  945.         .sidebar-wrap,
  946.         .sidebar-wrap-single {
  947.                 position: static;
  948.         }
  949.         .sidebar,
  950.         .sidebar-wrap,
  951.         .sidebar-wrap-single {
  952.                 padding:0;
  953.         }
  954.  
  955.         .top-menu-wrap {
  956.                 width:100%;
  957.         }
  958.         .top-bar-wrap,
  959.         .header-elements-wrap,
  960.         .container,
  961.         .title-container,
  962.         .fullpage-item,
  963.         .slideshow_content_wrap{
  964.         }
  965.  
  966.         #flex-testimonails .flex-direction-nav {
  967.                 display:none;
  968.         }
  969.         /* Search Input */
  970.         #searchform input {
  971.             width: 198px;
  972.         }
  973.  
  974.         /* Audio Progress Bar */
  975.         div.jp-audio div.jp-type-single div.jp-progress {
  976.                 width:70%;
  977.         }
  978.  
  979.         /* Ajax Portfolio */
  980.         .ajax-gallery-navigation {
  981.                 float:none;
  982.         }
  983.         #ajax-gridblock-wrap .gridblock-contents-wrap {
  984.                 margin-top:0;
  985.         }
  986.  
  987.  
  988.         /* Main mneu and Logo */
  989.         .header-elements-wrap {
  990.                 padding: 20px 0;
  991.         }
  992.         .logo {
  993.                 float: none;
  994.         }
  995.  
  996.         /* Header search OFF */
  997.         .header-search-wrap {
  998.                 display:none;
  999.         }
  1000.  
  1001.         /* Mobile Menu ON */
  1002.         .responsive-menu-wrap {
  1003.                 display:block;
  1004.         }
  1005.         /* Main Menu and Header Menu OFF */
  1006.         .mainmenu-navigation {
  1007.                 display:none;
  1008.         }
  1009.         .header-menu-wrap,
  1010.         .sticky-menu-activate {
  1011.                 display:none;
  1012.         }
  1013.  
  1014.         .container-boxed {
  1015.         }
  1016.        
  1017.         /* Set Sidebar 100% */
  1018.         .sidebar-wrap,
  1019.         .sidebar-wrap-single {
  1020.                 width:100%;
  1021.                 margin-top:30px;
  1022.                 padding-top:30px;
  1023.         }
  1024.         .sidebar-widget {
  1025.             padding: 0 40px;
  1026.         }
  1027.  
  1028.         /* Column based layouts to 100% */
  1029.         .two-column {
  1030.                 width:100%;
  1031.         }
  1032.  
  1033.         .service-item {
  1034.                 margin-bottom: 30px;
  1035.         }
  1036.  
  1037.         /* All Collumns 100% */
  1038.         .column1,
  1039.         .column2,
  1040.         .column3,
  1041.         .column4,
  1042.         .column5,
  1043.         .column6,
  1044.         .column32,
  1045.         .column43,
  1046.         .column52,
  1047.         .column53,
  1048.         .service-column-1 .service-item,
  1049.         .service-column-2 .service-item,
  1050.         .service-column-3 .service-item,
  1051.         .service-column-4 .service-item,
  1052.         .service-column-5 .service-item,
  1053.         .service-column-6 .service-item
  1054.         .service-item-space,
  1055.         .pricing-table .column2,
  1056.         .pricing-table .column3,
  1057.         .pricing-table .column4,
  1058.         .pricing-table .column5,
  1059.         .pricing-table .column6,
  1060.         #footer .footer-column {
  1061.                 width:100%;
  1062.         }
  1063.         /* Portfolio blocks to 100% */
  1064.         .gridblock-one .gridblock-element,
  1065.         .gridblock-two .gridblock-element,
  1066.         .gridblock-three .gridblock-element,
  1067.         .gridblock-four .gridblock-element {
  1068.                 width:100%;
  1069.         }
  1070.         /* Portfolio container to 100% */
  1071.         #gridblock-container {
  1072.                 width:100%;
  1073.         }
  1074.         /* Clients columns to 50% each - 2 columns */
  1075.         .client-column-1 .client-item,
  1076.         .client-column-2 .client-item,
  1077.         .client-column-3 .client-item,
  1078.         .client-column-4 .client-item,
  1079.         .client-column-5 .client-item,
  1080.         .client-column-6 .client-item,
  1081.         .client-column-7 .client-item,
  1082.         .client-column-8 .client-item,
  1083.         .client-column-9 .client-item,
  1084.         .client-column-10 .client-item {
  1085.                 text-align: center;
  1086.                 width:50%;
  1087.                 margin-bottom: 40px;
  1088.         }
  1089.  
  1090.         /* Testimonial block */
  1091.         .testimonial-say {
  1092.                 margin-bottom: 20px;
  1093.         }
  1094.  
  1095.         /* Tabs */
  1096.         .ui-tabs .ui-tabs-nav li {
  1097.                 width:100% !important;
  1098.         }
  1099.  
  1100.         /* Post header Navigation */
  1101.         .portfolio-nav-wrap {
  1102.                 margin-top:0;
  1103.                 position: static;
  1104.         }
  1105.         .portfolio-nav {
  1106.                 position: static;
  1107.         }
  1108.         .post-previous {
  1109.                 float: left;
  1110.         }
  1111.  
  1112.         /* Comments Adjust */
  1113.         ol.commentlist li p {
  1114.                 margin-left: 0;
  1115.         }
  1116.         ol.commentlist li {
  1117.                 padding:20px;
  1118.         }
  1119.  
  1120.         /* Comments Adjust */
  1121.         .callout-text {
  1122.                 float: none;
  1123.                 margin-bottom: 20px;
  1124.                 text-align: center;
  1125.         }
  1126.         .callout .callout-title {
  1127.                 margin-bottom: 20px;
  1128.         }
  1129.         .callout-button {
  1130.                 float:none;
  1131.                 text-align: center;
  1132.         }
  1133.         .sidebar-widget #searchform input {
  1134.                 margin-top:20px;
  1135.                 width:76%;
  1136.         }
  1137.  
  1138.         #footer .footer-column {
  1139.                 margin-right:0;
  1140.                 margin-left:0;
  1141.                 margin-top:30px;
  1142.         }
  1143.  
  1144.         #demopanel { display:none;}
  1145.  
  1146.         .menu-toggle-wrap {
  1147.                 display:none;
  1148.         }
  1149.  
  1150.         .slideshow_title, .static_slideshow_title {
  1151.                 font-size: 44px;
  1152.                 line-height: 42px;
  1153.         }
  1154.  
  1155.         .slideshow_content_wrap {
  1156.                 padding:10px;
  1157.         }
  1158.         .slideshow_caption, .static_slideshow_caption {
  1159.                 padding-bottom: 0;
  1160.         }
  1161. .slideshow_text_shift_up {
  1162.         padding-bottom: 50px;
  1163. }
  1164.         .slideshow_caption,.static_slideshow_caption {
  1165.                 line-height: 14px;
  1166.                 font-size: 14px;
  1167.                 width: auto;
  1168.                 margin: 0 20px;
  1169.         }
  1170.         .sc_slideshowtitle {
  1171.                 font-size:16px;
  1172.                 line-height: 18px;
  1173.         }
  1174.  
  1175.         .postformat_contents {
  1176.                 padding-left:0;
  1177.                 padding-right: 0;
  1178.         }
  1179.  
  1180.         .post-single-meta {
  1181.                 float: none;
  1182.         }
  1183.  
  1184.         .social-header-wrap ul li.contact-text {
  1185.                 top:0;
  1186.         }
  1187.  
  1188.         body,
  1189.         h1,
  1190.         h2,
  1191.         h3,
  1192.         h4,
  1193.         h5,
  1194.         h6,
  1195.         .entry-content .entry-post-title h2 a,
  1196.         .entry-title h1,
  1197.         .entry-content p,
  1198.         .work-description,
  1199.         .postsummarywrap,
  1200.         .sidebar h3,
  1201.         .sidebar,
  1202.         .sidebar a,
  1203.         #copyright,
  1204.         .gridblock-four h4 a,
  1205.         .gridblock-three h4 a,
  1206.         .gridblock-two h4 a,
  1207.         .gridblock-one h4 a,
  1208.         .gridblock-list h4 a,
  1209.         #gridblock-filters li a,
  1210.         h1.item-title,
  1211.         h2.item-title,
  1212.         h3.item-title,
  1213.         h4.item-title,
  1214.         h5.item-title,
  1215.         h6.item-title,
  1216.         .entry-content h1,
  1217.         .entry-content h2,
  1218.         .entry-content h3,
  1219.         .entry-content h4,
  1220.         .entry-content h5,
  1221.         .entry-content h6,
  1222.         .portfolio-share li.sharethis,
  1223.         .mbutton span,
  1224.         .mobile-menu-toggle,
  1225.         .responsive-mobile-menu ul li a,
  1226.         .responsive-mobile-menu ul.sub-menu li a,
  1227.         .slideshow_title,
  1228.         .slideshow_caption,
  1229.         .sc_slideshowtitle,
  1230.         .callout .callout-title,
  1231.         .pagination,
  1232.         .boxtitle-hover a,
  1233.         .ui-tabs .ui-tabs-nav li a,
  1234.         .ui-accordion-header.ui-state-default a,
  1235.         .ajax-gridblock-data h2 a {
  1236.         }
  1237.         .sidebar,
  1238.         .entry-content,
  1239.         .postsummarywrap,
  1240.         .mbutton span,
  1241.         .gridblock-four .work-description,
  1242.         .gridblock-three .work-description,
  1243.         .gridblock-two .work-description,
  1244.         .gridblock-one .work-description,
  1245.         .gridblock-four h4 a,
  1246.         .gridblock-three h4 a,
  1247.         .gridblock-two h4 a,
  1248.         .gridblock-one h4 a,
  1249.         .gridblock-list h4 a {
  1250.         }
  1251.  
  1252.         .header-widgets .wpml-lang-selector-wrap {
  1253.                 margin:0 auto;
  1254.                 text-align: center;
  1255.                
  1256.         }
  1257.         .header-widgets #lang_sel {
  1258.                 float:none;
  1259.         }
  1260.         .top-bar-wrap {
  1261.                 height: auto;
  1262.         }
  1263.        
  1264.         #demopanel {
  1265.                 display:none !important;
  1266.         }
  1267.  
  1268.         #gridblock-filter-select,
  1269.         #gridblock-filters {
  1270.                 width: 100%;
  1271.         }
  1272.  
  1273. ul.gridblock-listbox .gridblock-image-link {
  1274.         width:100%;
  1275.         float: none;
  1276. }
  1277. ul.gridblock-listbox .work-details {
  1278.         margin: 20px 0;
  1279. }
  1280.  
  1281.         .ui-tabs-vertical .ui-tabs-panel,
  1282.         .ui-tabs-vertical ul {
  1283.                 width: 100%;
  1284.         }
  1285.  
  1286.  
  1287. /*
  1288. woocommerce*/
  1289.  
  1290.         .woocommerce div.product div.summary,
  1291.         .woocommerce #content div.product div.summary,
  1292.         .woocommerce-page div.product div.summary,
  1293.         .woocommerce-page #content div.product div.summary {
  1294.                 width:100% !important;
  1295.         }
  1296. /*
  1297.         Product Columns
  1298. */
  1299.         .woocommerce ul.products li.product,
  1300.         .woocommerce-page ul.products li.product {
  1301.             width: 47.5% !important;
  1302.         }
  1303.  
  1304.  
  1305. /*
  1306.         Product Filters
  1307. */
  1308.         .woocommerce .woocommerce-result-count,
  1309.         .woocommerce-page .woocommerce-result-count {
  1310.             float: none !important;
  1311.         }
  1312.         .woocommerce .woocommerce-ordering,
  1313.         .woocommerce-page .woocommerce-ordering {
  1314.             float: none !important;
  1315.             margin-top:30px !important;
  1316.         }
  1317.         .mtheme-woo-order-selected,
  1318.         .mtheme-woo-order-list ul {
  1319.                 width:97%;
  1320.         }
  1321.         .mtheme-woo-order-selected-wrap i {
  1322.                 position: absolute;
  1323.         }
  1324.         /*
  1325.         Product Details*/
  1326.  
  1327.         .woocommerce div.product .woocommerce-tabs,
  1328.         .woocommerce #content div.product .woocommerce-tabs,
  1329.         .woocommerce-page div.product .woocommerce-tabs,
  1330.         .woocommerce-page #content div.product .woocommerce-tabs {
  1331.             width: 100%;
  1332.         }
  1333. /*
  1334.         Cart*/
  1335.         .woocommerce table.cart img,
  1336.         .woocommerce #content table.cart img,
  1337.         .woocommerce-page table.cart img,
  1338.         .woocommerce-page #content table.cart img,
  1339.         .woocommerce table.cart .product-thumbnail,
  1340.         .woocommerce #content table.cart .product-thumbnail,
  1341.         .woocommerce-page table.cart .product-thumbnail,
  1342.         .woocommerce-page #content table.cart .product-thumbnail {
  1343.             width: 80px !important;
  1344.         }
  1345.         .woocommerce .shop_table.cart .product-quantity{
  1346.                 display:none;
  1347.         }
  1348.  
  1349.         .woocommerce table.cart td.actions .coupon,
  1350.         .woocommerce #content table.cart td.actions .coupon,
  1351.         .woocommerce-page table.cart td.actions .coupon,
  1352.         .woocommerce-page #content table.cart td.actions .coupon {
  1353.             float: none !important;
  1354.         }
  1355.         .woocommerce .cart .button,
  1356.         .woocommerce .cart input.button,
  1357.         .woocommerce-page .cart .button,
  1358.         .woocommerce-page .cart input.button {
  1359.             float: none !important;
  1360.             margin-bottom: 20px !important;
  1361.         }
  1362.  
  1363.         .woocommerce .col2-set .col-1,
  1364.         .woocommerce-page .col2-set .col-1,
  1365.         .woocommerce .col2-set .col-2,
  1366.         .woocommerce-page .col2-set .col-2  {
  1367.             float: none !important;
  1368.             width: auto !important;
  1369.             margin-bottom: 40px;
  1370.         }
  1371.        
  1372. }

Raw Paste


Login or Register to edit or fork this paste. It's free.