JezK
Edit File: responsive.css
/*---------------------------------------------------------*\ WIZATA RESPONSIVE STYLE Oketheme.com \*---------------------------------------------------------*/ @media screen and (max-width: 1120px) { :root { --maxwidth: 740px; } .gridpad { grid-template-columns: repeat(2, 1fr); gap: 20px; } .testi,#testislider { width:100%; } .testi { text-align:center; border-bottom:1px solid #F9F9F9; margin-bottom:30px; } .tourbox { padding-top: 0; } .boxview,.boxdetail { width:100%; float:none; } .boxview { max-width: 600px; margin: 0 auto 30px; } .boxdetail { border-top: 5px solid rgba(0, 0, 0, 0.1); padding-top: 20px; } .scontain,.sidecontain { width:100%; padding:0; } .sidecontain { margin-top: 20px; } #randomside { max-width : 360px; margin:0 auto; } .banxs { grid-template-columns: repeat(2, 1fr); margin-top: 20px; } } @media screen and (max-width: 768px) { :root { --maxwidth: 600px; } .naviku { background : #222; position: absolute; z-index: 99; left: 0; right: 0; } .naviku > li { float: none; text-align:left; } .naviku ul { display: block; width: 100%; } .naviku li li .parent { background-image: url(img/downArrow.png); background-repeat: no-repeat; } .naviku li li.hover ul, .naviku>li.hover>ul { position: static } .naviku li ul { padding:0; background : #444; } .toggleMenu { display: block } .whypad { grid-template-columns: repeat(1, 1fr); } .why { text-align: left; } .why img { float: left; max-width: 100px; margin: 0 10px 5px 0; } .why:hover img { padding: 5px; } .why h2 { margin-top: 5px; } .tourcs { display: none; } .tourt { display: block; text-align: center; margin: 0; } .tourc select,.tourc button { width:100%; margin-right:0; } .tabdetail { margin-top: 0; padding-top: 10px; } .ui-tabs .ui-tabs-nav { font-size: 90%; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, .ui-widget-content .ui-state-active a { background : var(--colorborder); } .listblog img { max-width: 200px; } #footerwrap { grid-template-columns: repeat(1, 1fr); } .copyright { grid-column: 1 / 1; } .jumbo { font-size : 200%; } h1,.headline,.testi h2,.intro h2 { font-size : 170%; } h2,.big { font-size : 150%; } h3 { font-size : 130%; } h4,.listblog h2 { font-size : 110%; } h5 { font-size : 100%; } #tourgoal { width:100%; border:none; padding:0; } #tourgoal2 { width:100%; margin-top:20px; } .rentdetail img { float: none; width: 100%; margin: 0 auto; } } @media screen and (max-width: 640px) { :root { --autopad: 15px; } } @media screen and (max-width: 500px) { #headerwrap { grid-template-columns: repeat(1, 1fr); } #headerwrap > div { text-align: center; } .gridpad { gap: 10px; } #tourreview { width:100%; padding: 0; float:none; } #tourreview img { float: left; margin: 0 10px 10px 0; max-width: 200px; } #tourform { width: 100%; margin-top: 20px; } .jumdiv,#datetour { width:100%; margin-bottom:0; } .harpil { font-size:95%; } .tomb { width:100%; margin:15px 0 10px; } .toursent { padding: 10px; } .blogsearch, .invsearch { grid-template-columns: repeat(1, 1fr); } } @media screen and (max-width: 420px) { .gridpad { grid-template-columns: repeat(1, 1fr); padding: 10px 15px; gap: 15px; } .listblog img { max-width: 100px; padding: 5px; margin: 5px 10px 2px 0; } .pilhar { display:none; } .newsticker:after,.newsticker:before { display: none } #tourgoal img, #tourreview img { float: none; margin: 0; max-width: 100%; display: block; margin-bottom: 10px; } .element1,.element2,.element3,#captcha_code,#captchaimg { width:100%; float : none; } }