API tools faq
paste
Advertisement
Guest User

Vidresponsive

a guest
Nov 14th, 2019
202
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 19.89 KB | None | 0 0
raw download clone embed print report
  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;}
  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*/
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!