SHARE
TWEET

Vidresponsive

a guest Nov 14th, 2019 120 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @media screen and (max-width: 1919px) {
  2.     h1 {font-size: 90px; line-height: 90px;}
  3.     /*.featured-carousel ul.featured li article div h1 {font-size: 140px; line-height: 90px;}*/
  4.     .featured-product ul li:last-child h3 {font-size: 82px; line-height: 82px;}
  5.     h6 {font-size: 20px!important;}
  6.     .signup ul li article h2 {font-size: 56px;}
  7.     .maincontent .pagewrapper2 .blog .blurb h2 {font-size: 72px; line-height: 72px;}
  8.  
  9. }
  10. @media screen and (max-width: 1599px) and (min-width: 1280px) {
  11.     h1 {font-size: 64px; line-height: 64px;}
  12.     .featured-carousel ul.featured li article div h1 {font-size: 84px; line-height: 64px; margin-bottom: 60px;}
  13.     h6 {font-size: 20px!important;}
  14.     .featured-product ul li:last-child h3 {font-size: 56px; line-height: 56px;}
  15.     .product-categories ul li {width: 32%;}
  16.     .signup ul li article h2 {font-size: 48px;}
  17.     .signup ul li:last-child {width: 300px;}
  18. }
  19. @media screen and (max-width: 1279px) and (min-width: 1024px) {
  20.     .pagewrapper2 {max-width: 95%;}
  21.     h1 {font-size: 56px; line-height: 56px;}
  22.     .featured-carousel ul.featured li article div h1 {font-size: 68px; line-height: 56px; margin-bottom: 60px; margin-top: 60px;}
  23.     h6 {font-size: 18px!important;}
  24.     h6 a{padding: 20px 40px!important;}
  25.     .featured-product ul li:last-child h3 {font-size: 56px; line-height: 56px;}
  26.     .featured-product ul li:first-child {width: 50%;}  
  27.     .featured-product ul li:last-child {width: 50%; padding: 50px;}
  28.     .product-categories ul {height: 400px;}
  29.     .product-categories ul li {width: 32%; height: 400px}
  30.     .product-categories ul li aside h3 {font-size: 48px; line-height: 58px;}
  31.     .slick-prev, .slick-next {width: 25px!important; height: 48px!important; background-size: contain!important}
  32.     .signup ul li article h2 {font-size: 48px;}
  33.     .maincontent .pagewrapper2 .blog .featured-post ul li:last-child h3 {font-size: 48px; line-height: 54px;}
  34.     .maincontent .pagewrapper2 .blog .blog-list li .blogdetails h3 {font-size: 40px; line-height: 46px; }
  35.     .maincontent .pagewrapper2 .blog .blog-list li .thumbnail {height: 300px}
  36.     .maincontent .pagewrapper2 .blog .blurb h2 {font-size: 64px; line-height: 64px;}
  37.     .maincontent .main-article .pagewrapper3 .blog-content {padding-right: 400px}
  38.     .maincontent .main-article .pagewrapper3 .featured-products {width: 350px;}
  39.     .maincontent .main-article .pagewrapper3 .featured-products .featured li article {height: 350px;}
  40.     .login {padding: 100px 0 80px;}
  41.   header nav.main { max-width: 865px; }
  42.   header nav.main ul li a { padding: 0 15px; }
  43. }  
  44.  
  45. @media screen and (max-width: 1023px)  {
  46.     .toggle-menu {display: block;}
  47.     header .cart {display: block;}
  48.     .fixed aside.logo {background-position: center;}
  49.     .fixed i {color:#9ecfca; }
  50.     header aside.logo, header:hover aside.logo {width: 100%; background-position: center;}
  51.     .pagewrapper2 {max-width: 95%;}
  52.     nav.main {display: none;}
  53.     h1 {font-size: 48px; line-height: 48px;}
  54.     .featured-carousel ul.featured li article div h1 {font-size: 48px; line-height: 56px; margin-bottom: 50px;}
  55.     h6 {font-size: 18px!important;}
  56.     h6 a{padding: 15px 30px!important;}
  57.     .featured-product {margin-top: 0;}
  58.     .featured-product ul li:first-child {width: 100%;}  
  59.     .featured-product ul li:last-child {width: 100%; padding: 50px; align-content: flex-start!important;}
  60.     .featured-product ul li:last-child h3 {font-size: 42px; line-height: 42px;}
  61.     .slick-prev, .slick-next {width: 25px!important; height: 48px!important; background-size: contain!important}
  62.     .slick-dots li button {width: 10px!important; height: 10px!important}
  63.     .coverimg, .featured-product ul li:first-child img {object-fit: initial!important; height: auto!important;}
  64.     .product-categories ul {height: auto;}
  65.     .product-categories ul li {width: 100%; height: 350px; margin-bottom: 50px;}
  66.     .product-categories ul li:last-child {margin-bottom: 0;}
  67.     button.mobnav {display: block;}
  68.     .signup ul li article h2 {font-size: 40px;}
  69.     footer ul.footer-links li {width: 25%;}
  70.     footer ul.footer-links li:last-child {width: 45%; margin-left: 5%;}
  71.     .slick-prev {left: 20px!important}
  72.     .slick-next {right: 20px!important}
  73.     .pagewrapper3 {max-width: 85%;}
  74.     .maincontent .pagewrapper2 .blog .featured-post ul li {width: 100%;}
  75.     .maincontent .pagewrapper2 .blog .featured-post ul li img {object-fit: initial; height: auto;}
  76.     .maincontent .pagewrapper2 .blog .featured-post ul li:last-child h3 {font-size: 48px; line-height: 54px;}
  77.     .maincontent .pagewrapper2 .blog .featured-post ul li:last-child h6 {margin-bottom: 15px;}
  78.     .maincontent .pagewrapper2 .blog .blog-list li .blogdetails h3 {font-size: 40px; line-height: 46px; }
  79.     .maincontent .pagewrapper2 .blog .blog-list li .thumbnail {height: 300px}
  80.     .maincontent .pagewrapper2 .blog .blurb h2 {font-size: 64px; line-height: 64px;}
  81.     .maincontent .main-article .pagewrapper3 .blog-content {padding-right: 350px}
  82.     .maincontent .main-article .pagewrapper3 .featured-products {width: 300px;}
  83.     .maincontent .main-article .pagewrapper3 .featured-products .featured li article {height: 300px;}
  84.     .blogheader {height: 600px!important;}
  85.     .login {padding: 100px 0 80px;}
  86.  
  87.     .prod-inner .hldr .mid-part .item-hldr h4.mobile {display: block; font: 40px/48px 'futurastdmedium', Arial, sans-serif; width: 100%; margin-bottom: 20px; float: left; text-align: center; text-transform: uppercase;}
  88.     .prod-inner .hldr .mid-part .item-hldr.drink h4.mobile {color:#00bc70 }
  89.     .prod-inner .hldr .mid-part .item-hldr.dine h4.mobile {color: #921f4e; }
  90.     .prod-inner .hldr .mid-part .item-hldr.decorate h4.mobile {color: #0d1d41; }
  91.  
  92.     .prod-inner .hldr .mid-part .item-hldr article h4 {display: none;}
  93.  
  94. }
  95.  
  96. @media screen and (max-width: 799px) {
  97.     .featured-carousel {height: 600px;}
  98.     .featured-carousel ul.featured, .featured-carousel ul.featured li{ height: 600px!important;}
  99.     .featured-carousel ul.featured li img {width: 100%!important; height: 100%!important; object-fit: cover!important;}
  100.     .product-categories {padding-bottom: 30px; padding-top: 30px;t}
  101.     .product-categories ul {justify-content: center;}
  102.     .product-categories ul li {height: 345px; width: 100%; margin-bottom: 30px;}
  103.     .product-categories ul li aside h3 {font-size: 48px; line-height: 48px;}
  104.     .product-categories ul li:last-child {margin-bottom: 0;}
  105.     .signup .pagewrapper {max-width: 75%;}
  106.    
  107.     .signup ul li article h2 {font-size: 40px; line-height: 48px;}
  108.     footer ul.footer-links li {width: 50%;}
  109.     footer ul.footer-links li:last-child {width: 100%; margin-left: 0; margin-top: 30px;}
  110.     .mobilecart ul.cartlist li {width: 100%;}
  111.     .pagewrapper3 {max-width: 75%;}
  112.     .maincontent .pagewrapper3 article, .maincontent .pagewrapper3 aside {width: 100%;}
  113.     .maincontent .pagewrapper3 article {margin-bottom: 30px;}
  114.     .maincontent {padding: 30px 0;}
  115.     .maincontent .pagewrapper3 article p {font-size: 14px; line-height: 20px; margin-bottom: 20px;}
  116.     .maincontent .pagewrapper3 .contact ul.contact-form li {width: 100%}
  117.     .maincontent .pagewrapper3 .contact ul.contact-form li input[type="submit"] {font-size: 18px; height: 60px; width: 140px}
  118.     .maincontent .pagewrapper3 .contact ul.contact-form li input[type="text"], .maincontent .pagewrapper3 .contact ul.contact-form li input[type="email"], .maincontent .pagewrapper3 .contact ul.contact-form li textarea {font-size: 16px; }
  119.     .maincontent .pagewrapper2 .blog .blog-list li {width: 100%}
  120.     .maincontent .pagewrapper2 .blog .blurb h2 {font-size: 56px; line-height: 56px; margin-bottom: 30px;}
  121.     .maincontent .main-article .pagewrapper3 .blog-content {padding-right: 0}
  122.     .maincontent .main-article .pagewrapper3 .featured-products {width: 100%; max-width: 480px; position: relative; float: none; margin:  0 auto}
  123.     .maincontent .main-article .pagewrapper3 .featured-products .featured li article {height: auto; margin-bottom: 0}
  124.     .maincontent .main-article .pagewrapper3 .featured-products .featured li article img {height: auto; object-fit: initial!important;}
  125.     .maincontent .pagewrapper2 .blog .recommend {font-size: 36px; line-height: 42px; margin: 30px 0;}
  126.     .login-container {max-width: 65%!important;}
  127. }
  128. @media screen and (max-width: 560px) {
  129.     .login {height: 414px; position: relative;}
  130.     .login-container {padding: 0; max-width: 100%!important;}
  131.     .login-container .vidro-login {margin-bottom: 0!important}
  132.     .prod-inner .hldr .mid-part .item-hldr h4.mobile {display: block; font: 40px/48px 'futurastdmedium', Arial, sans-serif; width: 100%; float: left; text-align: center; text-transform: uppercase;}
  133. }
  134.  
  135. @media screen and (max-width: 480px) {
  136.     .signup ul li:last-child {width: 100%;}
  137.     .signup ul li article h2 {font-size: 36px; line-height: 42px;}
  138.     .product-categories ul li {max-width: 345px;}
  139.     p {font-size: 14px;}
  140.     footer ul.footer-links li h5, footer ul.footer-links li p, footer ul.footer-links li span  {font-size: 12px;}
  141.     footer ul.footer-links li span {width: 100%; float: left; margin-top: 20px;}
  142.     footer ul.footer-links li:nth-child(2) {order: 3; margin-top: -110px}
  143.     footer ul.footer-links li:nth-child(3) {order: 2; width: 50%; margin-top: 0;}
  144.     footer ul.footer-end li {font-size: 12px; width: 100%;}
  145.     footer ul.footer-end li:nth-child(2) {order: 4; text-align: left; justify-content: flex-start;}
  146.     footer ul.footer-end li:nth-child(3) {order: 2; justify-content: flex-start;}
  147.     footer ul.footer-end li:last-child {order: 3; justify-content: flex-start; margin: 5px 0 30px;}
  148.     .featured-carousel ul.featured li article {padding: 0 30px;}
  149.     h6 {font-size: 16px!important;}
  150.     h6 a{padding: 10px 20px!important;}
  151.     .featured-carousel ul.featured li article div h1 {font-size: 40px; line-height: 48px; margin-bottom: 25px;}
  152.     .maincontent {padding: 50px 0;}
  153.     .maincontent .pagewrapper3 article p {font-size: 14px;}
  154.     .shop-cta {height: 180px; background-size: auto 100% ;}
  155.     .maincontent .pagewrapper2 .blog .blog-list li .blogdetails h3 {font-size: 36px; line-height: 42px;}
  156.     .maincontent .pagewrapper2 .blog .featured-post ul li:last-child {padding: 30px;}
  157.     .maincontent .pagewrapper2 .blog .featured-post ul li:last-child h3 {font-size: 36px; line-height: 42px;}
  158.     .maincontent .pagewrapper2 .blog .featured-post ul li:last-child p; .maincontent .pagewrapper2 .blog .featured-post ul li:last-child h5, .maincontent .pagewrapper2 .blog .blog-list li .blogdetails p, .maincontent .pagewrapper2 .blog .blog-list li .blogdetails h5 {font-size: 14px;}
  159.     .maincontent .pagewrapper2 .blog .pagination {width: 100%; font-size: 14px;}
  160.     .maincontent .pagewrapper2 .blog .blog-list li .thumbnail {height: 180px; margin-bottom: 25px;}
  161.     .maincontent .pagewrapper2 .blog .blog-list li {margin-bottom: 25px;}
  162.     .maincontent .pagewrapper2 .blog .blurb h2 {font-size: 48px; line-height: 48px; margin-bottom: 20px}
  163.     .login-container .vidro-login {padding: 55px 60px;}
  164.     .login-container .vidro-login img {width: 180px; height: auto; margin-bottom: 35px;}
  165.     .slick-prev, .slick-next {width: 20px!important; height: 50px!important; background-size: contain!important}
  166.     .you-like .mlist {margin-top: 10px;}
  167.      .you-like .mlist > li aside img, .you-like .mlist > li aside img:first-of-type {height: 250px!important;}
  168. }
  169. @media screen and (max-width: 413px) {
  170.     .mobilecart ul.cartlist li article div.details ul.qty-price {justify-content: flex-start!important; align-content: flex-start!important;}
  171.     .mobilecart ul.cartlist li article div.details ul.qty-price li:last-child, .mobilecart ul.cartlist li article div.details ul.qty-price li:first-child {width: 100%; justify-content: flex-start!important; align-content: flex-start!important;}
  172.     .mobilecart ul.cartlist li article div.details ul.qty-price li:last-child {margin-top: 15px!important}
  173. }
  174.  
  175. @media screen and (max-width: 375px) {
  176.     footer ul.footer-links {margin-top: 50px;}
  177.     footer ul.footer-links li, footer ul.footer-links li:nth-child(2),  footer ul.footer-links li:nth-child(3), footer ul.footer-links li:last-child {width: 100%!important;}
  178.     footer ul.footer-links li:nth-child(2) {order: 2; margin-top: 30px;}
  179.     footer ul.footer-links li:nth-child(3) {order: 3; margin-top: 30px}
  180.     footer ul.footer-links li:last-child {order: 4;}
  181.     footer ul.footer-end li:first-child {order: 1}
  182.     footer ul.footer-end li:nth-child(3) {order: 2}
  183.     footer ul.footer-end li:last-child {order: 3}
  184.     footer ul.footer-end li:nth-child(2) {order: 4; margin-bottom: 40px;}
  185. }
  186.  
  187.  
  188. /*Peter*/
  189.  
  190. @media only screen and (max-width: 1400px){
  191.     .main-product .hldr .top h3 { font-size: 90px;}
  192.     .prod-inner .hldr .mid-part .item-hldr article h4 { font-size: 40px; letter-spacing: 5px; margin-bottom: 40px;}
  193.     .you-like h3 { font-size: 40px;}
  194.     .prod-inner .hldr .mid-part .item-hldr article { padding-left: 50px;}
  195. }
  196.  
  197. @media only screen and (max-width: 1279px){
  198.     .pagewrapper { max-width: 95%;}
  199.     .main-product .hldr .top h3 { font-size: 70px;}
  200.     .main-product .hldr .prod ul > li { width: 48%; }
  201.     .prod-inner .hldr .mid-part .item-hldr > aside { max-width: 400px;}
  202.     .prod-inner .hldr .mid-part .item-hldr article { max-width: calc(100% - 400px); }
  203.     .prod-inner .hldr .mid-part { padding: 50px 0px 0px;}
  204.     .you-like .mlist > li { width: 31%; }
  205.  
  206.  
  207. }
  208.  
  209. @media only screen and (max-width: 1023px){
  210.     .main-product .hldr .top h3 { font-size: 60px;}
  211.     .main-product .hldr .top p { font-size: 20px; }
  212.     .main-product .hldr .filter-area .main-list > li { width: 48%;}
  213.     .main-product .hldr .filter-area .reset { top: 50%; transform: translate(0, -50%);}
  214.     .main-product .hldr .mid .main-list .filter { max-width: 200px;}
  215.     .main-product .hldr .mid .main-list > li:nth-of-type(2) { max-width: 200px; top: -380px}
  216.     .main-product .hldr .prod ul > li aside img { height: 440px; }
  217.     .prod-inner .bread-crumbs li { display: none;}
  218.     .prod-inner .bread-crumbs li:last-child { display: block; padding-left: 20px; }
  219.     .prod-inner .hldr .top .bread-crumbs { justify-content: flex-start;}
  220.     .prod-inner .hldr .top .bread-crumbs > li:last-child::after { display: block; background: url(../images/bread-blue2.png); background-position: left center; right: auto; left: 0; }
  221.     .prod-inner .hldr .top .pagewrapper { padding: 0px 20px; max-width: 100%; }
  222.     .prod-inner .hldr .top .addcart {right: 20px;}
  223.     .prod-inner .hldr .top + aside { display: none; }
  224.     .prod-inner .hldr .mid-part .item-hldr article { max-width: 100%; padding-left: 0px; margin-top: 50px; }
  225.     .prod-inner .hldr .mid-part .item-hldr article h4 { text-align: center; }
  226.     .prod-inner .hldr .mid-part .item-hldr .slider-single .test { height: 600px; }
  227.     .prod-inner .hldr .mid-part .item-hldr > aside { max-width: 100%; }
  228.     .prod-inner .hldr .mid-part .item-hldr > aside .slider-single .item aside { height: 600px; margin: 0 auto;}
  229.     .prod-inner .hldr .mid-part .item-hldr .slider-nav .test { width: 85%; margin: 0 auto; }
  230.     .prod-inner .hldr .mid-part .item-hldr article ul.main-list { max-width: 65%; margin: 0 auto; }
  231.     .prod-inner .hldr .mid-part .item-hldr .addcart { text-align: center;}
  232.     .you-like {padding: 50px 0px; }
  233.    
  234. }
  235.  
  236.  
  237. @media only screen and (max-width: 999px){
  238.     .mbile-label { display: block; }
  239.     .cart section .hldr ul li .item article { width: calc(100% - 360px);}
  240.     .cart section .hldr ul li .item aside img { object-fit: cover;}
  241.     .cart section .hldr ul li .item aside { width: 180px; }
  242.     .cart section .hldr ul li .item .quan { width: 180px; display: block; text-align: center; padding-top: 15px; border-right: 0px;}
  243.     .cart section .hldr .cart-head { display: none;}
  244.     .cart section .hldr ul li .item { justify-content: flex-end;}
  245.     .cart section .hldr ul li .item .mbile-label { margin-bottom: 5px;}
  246.     .cart section .hldr ul li .item .total { border: 1px solid #d5d5d5; width: 180px; padding: 15px 20px; border-right: 0px; border-bottom: 0px;}
  247.     .cart section .hldr ul li .item .total h5 { width: 100%; text-align: center;}
  248.     .cart section .hldr > ul li { border: 1px solid #d5d5d5; margin-bottom: 30px;}
  249.     .cart section .hldr .btm-totals ul { max-width: 100%;}
  250.     .cart section .hldr .btm-totals ul li:first-child .tparent > div.hlf2 { width: 180px; }
  251.     .cart section .hldr .btm-totals ul li:first-child .tparent > div.hlf1 { width: calc(100% - 180px); }
  252.     .cart section .hldr ul li .item article h4 { font-size: 25px; line-height: 35px;}
  253.     .cart section .hldr h3 { font-size: 40px; line-height: 50px;}
  254. }
  255.  
  256.  
  257. @media only screen and (max-width: 800px){
  258.     .prod-inner .hldr .mid-part .item-hldr > aside .slider-single .item aside { height: 450px; }
  259.     .prod-inner .hldr .mid-part .item-hldr article ul.main-list > li { width: 100%}
  260.     .prod-inner .hldr .mid-part .item-hldr article ul.main-list > li:nth-child(odd) { padding-right: 0px;}
  261.     .prod-inner .hldr .mid-part .item-hldr article ul.main-list > li:nth-child(even) { padding-left: 0px;}
  262.     .prod-inner .hldr .mid-part .item-hldr article ul.main-list > li:last-child { width: 100%; }
  263.     .you-like .mlist > li { width: 48%; }
  264.     .prod-inner .hldr .mid-part {padding: 50px 15px 0px;}
  265.     .you-like { padding: 50px 15px; }
  266.     .you-like .mlist > li:last-child { margin-bottom: 0px;}
  267. }
  268.  
  269.  
  270.  
  271. @media only screen and (max-width: 600px){
  272.     .main-product .hldr .mid .main-list > li:nth-of-type(2) { display: none;}
  273.     .main-product { padding: 100px 0px 90px}
  274.     .bread-crumbs {justify-content: center;}
  275.     .main-product .hldr .mid .main-list > li { width: 100%;}
  276.     .main-product .hldr .mid { margin-top: 30px;}
  277.     .main-product .hldr .top p { font-size: 18px;}
  278.     .main-product .hldr .top h3 { font-size: 50px;}
  279.     .main-product .hldr .filter-area .main-list, .main-product .hldr .filter-area .reset { display: none; }
  280.     .bread-crumbs > li a { font-size: 14px;}
  281.     .main-product .hldr .prod ul > li { width: 100%; margin-bottom: 30px; }
  282.     .main-product .hldr .prod ul > li aside img { height: 350px;}
  283.     .main-product .hldr .filter-area { padding-right: 0px; margin-top: 40px; margin-bottom: 50px; }
  284.     .main-product .hldr .filter-area .filt-se { display: block; }
  285.     .prod-inner .hldr .mid-part .item-hldr article h4, .you-like h3 { font-size: 35px;}
  286.     .prod-inner .hldr .mid-part .item-hldr article ul.main-list { max-width: 100%;}
  287.     .prod-inner .hldr .mid-part .item-hldr article ul.main-list > li .icon-gallery li { width: 24%;}
  288.     .you-like .mlist > li { width: 100%; }
  289.     .you-like .mlist > li aside img:first-of-type { height: 370px; }
  290.     .addcart a { font-size: 12px;}
  291.  
  292.     .cart section .hldr ul li .item aside, .cart section .hldr ul li .item article, .cart section .hldr ul li .item .quan, .cart section .hldr ul li .item .total { width: 100%;}
  293.     .cart section .hldr ul li .item article { border-bottom: 1px solid #d5d5d5; padding-bottom: 15px;}
  294.     .cart section .hldr ul li .item .quan { padding-bottom: 15px;}
  295.     .cart section .hldr ul li .item .quan .icn-hldr { margin: 0 auto; }
  296.     .cart section .hldr ul li .item article h4, .cart section .hldr ul li .item article .remove, .cart section .hldr ul li .item article p { text-align: center; }
  297.     .cart section .hldr .btm-totals ul li:first-child .tparent > div.hlf1, .cart section .hldr .btm-totals ul li:first-child .tparent > div.hlf2 { width: 100%; padding: 0px 0px;}
  298.     .cart section .hldr .btm-totals ul li .tparent > div h5 { text-align: center;}
  299.     .cart section .hldr .btm-totals ul li p { padding: 0px; text-align: center;}
  300.     .cart section .hldr .btm-totals ul li .tparent > div.hlf1, .cart section .hldr .btm-totals ul li .btns-parent > div:nth-of-type(2) { padding: 0px 0px;}
  301.     .cart section .hldr .btm-totals ul li .btns-parent > div { width: 100%; margin-bottom: 15px;}
  302.     .cart section .hldr .btm-totals ul li .btns-parent > div:last-of-type { margin-bottom: 0px;}
  303.     .cart section .hldr ul li .item .total { padding: 10px 15px;}
  304.  
  305.     .prod-inner .hldr .mid-part .item-hldr h4.mobile {font-size: 35px; line-height: 41px;}
  306.  
  307. }
  308.  
  309. /*END OF PETER*/
RAW Paste Data
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!
 
Top