chitrag

no answers found in wp forum

I have been working on wordpress with a templates and I do not know much of coding. Just using drag and drop site builder. But theme has additional .css code option where I can add some short of code and fix it. But which command fix the issue not sure.

Why my megamenu covers full page area instead of only menu area? how to fix it? https://ibb.co/0Mf2Bbx

After adding input { width: 100%; } in additional .css area it worked fine. Thank you

When I insert quiz field in contact form, quiz field area goes out of size. How to fix it ? screenshot is attached

Here is the css file. /* Visit http://www.menucool.com/responsive-slider for instructions */ #ninja-slider { width:100%; background:#FFF; padding: 0!important; margin:0 auto; overflow:hidden; box-sizing:border-box; } #ninja-slider .slider-inner { /*max-width:720px;*/ margin:0 auto;/*center-aligned */ font-size:0px; position:relative; box-sizing:border-box; } #ninja-slider ul { position:relative; list-style:none; padding:0; box-sizing:border-box; background:black; } #ninja-slider li { width:100%; height:100%; top:0; left:0; position: absolute; font-size:12px; list-style:none; margin:0; padding:0; opacity:0; overflow:hidden; box-sizing:border-box; } #ninja-slider li.ns-show { opacity:1; } /* --------- slider image ------- */ #ninja-slider .ns-img { background-color:rgba(0,0,0,0.8); background-size:contain;/*Note: If transitionType is zoom, it will be overridden to cover.*/ /*box-shadow: 0 1px 5px rgba(0,0,0,.8),inset 0 0 2px rgba(255,255,255,.4);*/ border-radius:4px; cursor:default; display:block; position: absolute; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; } /*---------- Captions -------------------*/ #ninja-slider .caption { font-size:10em; font-family: 'Bree Serif', sans-serif; position:absolute; width:100%; text-align:center; color:rgba(255,255,255,0.8); bottom:20%; } #ninja-slider li.ns-show .caption { /* 5s = (delay + transitionSpeed) set in the ninja-slider.js */ -webkit-animation: titleAnimation 5s linear both; animation: titleAnimation 5s linear both; } #ninja-slider li.sl-0 .caption { /*delay caption animation for the initial slide*/ -webkit-animation: none; animation: none; display:none; } @keyframes titleAnimation { 0% { opacity:0; } 10% { opacity:0;transform: translateY(-20%);} 20% { opacity:1;transform: translateY(0%);} 70% {opacity:1;transform: translateY(0%);} 80% {opacity:0;transform: translateY(100%);} 100% {opacity:0;transform: translateY(100%);} } @-webkit-keyframes titleAnimation { 0% { opacity:0; } 10% { opacity:0; -webkit-transform:translateY(-20%);} 25% { opacity:1; -webkit-transform:translateY(0%);} 70% {opacity:1; -webkit-transform:translateY(0%);} 80% {opacity:0; -webkit-transform:translateY(100%);} 100% {opacity:0; -webkit-transform:translateY(100%);} } /* ---------Arrow buttons ------- */ /* The arrow button id should be: slider id + ("-prev", "-next", and "-pause-play") */ /* Usually the ninja-slider.js will create the arrow buttons and pager(nav dots) automatically, unless you have added their markup manually to the HTML as this demo did. This demo has put them inside a DIV.navWrapper. */ div.navsWrapper { position:absolute; width:100px; height:50px; right:90px; bottom:9%; z-index:10; } #ninja-slider-prev, #ninja-slider-next { position: absolute; display:inline-block; width:50px; height:50px; line-height:52px; margin:0; border:2px solid white; backface-visibility:hidden; color:white; overflow:hidden; -webkit-user-select: none; user-select:none; font-family:sans-serif; font-size:14px; transition:all 0.5s; cursor:pointer; } #ninja-slider-prev { left:auto; right:50%; margin-right:-2px; } #ninja-slider-next { left:50%; right:auto; } #ninja-slider-prev:hover, #ninja-slider-next:hover {width:80px;background-color:rgba(0,0,0,0.6);} /*pagination within the prev/next buttons*/ #ninja-slider-prev div, #ninja-slider-next div {white-space:nowrap;opacity:0;position:absolute;} #ninja-slider-prev div {left:6px;} #ninja-slider-next div {right:6px;} #ninja-slider-prev:hover div, #ninja-slider-next:hover div {opacity:1;} #ninja-slider-prev:hover.disabled, #ninja-slider-next:hover.disabled {opacity:0.1;cursor:default;} /* arrows */ #ninja-slider-prev::before, #ninja-slider-next::before { position: absolute; top: 17px; content: ""; display: inline-block; width: 13px; height: 13px; border-left: 4px solid white; border-top: 4px solid white; backface-visibility:hidden; } #ninja-slider-prev::before { -ms-transform:rotate(-45deg);/*IE 9*/ -webkit-transform:rotate(-45deg); transform: rotate(-45deg); right:15px; } #ninja-slider-next::before { -ms-transform:rotate(135deg);/*IE 9*/ -webkit-transform:rotate(135deg); transform: rotate(135deg); left:15px; } /*------ pager(nav bullets) ------*/ /* The pager id should be: slider id + "-pager" */ #ninja-slider-pager, #ninja-slider-pause-play { display:none;} /*Responsive settings*/ @media only screen and (max-width:500px){ #ninja-slider-prev, #ninja-slider-next, #ninja-slider-pager { display:none; } } @media only screen and (max-width:1100px){ #ninja-slider .caption { font-size:7em; } } @media only screen and (max-width:700px){ #ninja-slider .caption { font-size:3em; } }

Thanks Well, now my issue is resize of caption font. I reduced the font size 10em to 1em in css but no effect

<img class="ns-img" src="wp-content/uploads/2017/01/P3230023.jpg"> it works changing code as above

How to do that ?

It does not make difference after inserting &nbsp;

Hi, I am trying to insert this code in my wordpress page. <!--start--> <div id="ninja-slider"> <div class="slider-inner"> <ul> <li> <a class="ns-img" href="wp-content/uploads/2017/01/DSC0102-1.jpg"></a> <div class="caption"></div> </li> <li> <a class="ns-img" href="wp-content/uploads/2017/01/DSC0159.jpg"></a> <div class="caption"></div> </li> <li> <a class="ns-img" href="wp-content/uploads/2017/01/DSC_0097.jpg"></a> <div class="caption"></div> </li> <li> <a class="ns-img" href="wp-content/uploads/2017/01/DSCN0078-e1500520449485.jpg"></a> <div class="caption"></div> </li> <li> <a class="ns-img" href="wp-content/uploads/2017/01/P3200025.jpg"></a> <div class="caption"></div> </li> <li> <a class="ns-img" href="wp-content/uploads/2017/01/P3230075.jpg"></a> <div class="caption"></div> </li> <li> <a class="ns-img" href="wp-content/uploads/2017/01/P3230023.jpg"></a> <div class="caption"></div> </li> </ul> <div class="navsWrapper"> <div id="ninja-slider-prev"></div> <div id="ninja-slider-next"></div> </div> </div> </div> <!--end--> After inserting this code in to text area and click on visual it displays as follows <!--start--> <code> </code> <div id="ninja-slider"> <div class="slider-inner"> <ul> <li> <div class="caption"></div></li> <li> <div class="caption"></div></li> <li> <div class="caption"></div></li> <li> <div class="caption"></div></li> <li> <div class="caption"></div></li> <li> <div class="caption"></div></li> <li> <div class="caption"></div></li> </ul> <div class="navsWrapper"> <div id="ninja-slider-prev"></div> <div id="ninja-slider-next"></div> </div> </div> </div> <!--end--> Why this happening what's wrong with html code. I could not figure out ?

Hi I have been using a tool to create responsive tab with wordpress theme but suddenly it is not working with desktop and large screen how to fix it ? Example

Hi, After applying Foundation 5 to make responsive menu in my site. Background color changed to white and page should look like this screenshot but it looks different. Here is my css code @charset "utf-8"; body { margin: 0px; padding: 0px; background:url(images/bg.png); } .container { width:890px; margin:auto; } .logo { padding:50px 0px; font:bold 14px/50px Arial, Helvetica, sans-serif; color:#fff; display: inline; } .logo a:link, .logo a:visited, .logo a:active, .logo a:hover { font:bold 34px/50px Arial, Helvetica, sans-serif; color:#858585; letter-spacing:-3.5px; text-decoration:none; padding-right:20px; } .navigation ul { padding:0px; margin:0px; list-style:none; background:#060606; height:45px; } .navigation li { padding:0px; margin:0px; list-style:none; float:left; } .navigation li a { padding:10px 25px; background:#060606; display:block; font:18px Arial, Helvetica, sans-serif; color:#858585; text-decoration:none; } .navigation li a:hover { color:#fff; background:#000; } .headerimage { border-bottom:solid 3px #060606; padding-bottom:4px; } .left-panel { width:100%; float:left; position: relative; } .right-panel { width:235px; float:right; position: relative padding-left:45px; } .left-panel h2 { font:bold 34px/50px Arial, Helvetica, sans-serif; color:#858585; background:#060606; letter-spacing:-3.5px; padding:10px; margin:0px; display:inline; } .left-panel p, .sohotext, .article_table { font:13px/17.5px Arial, Helvetica, sans-serif; color:#858585; } .main-container { padding-top:40px; } .clear { clear:both; } .right-panel { font:14px Arial, Helvetica, sans-serif; color:#c7d8ef; } .right-panel ul { padding:0px; margin:0px; list-style:none; } .right-panel li { background:#060606; color:#c7d8ef; padding:10px; font:23px Arial, Helvetica, sans-serif; margin-bottom:4px; } .footer { padding-top:30px; } .footer p { font:18px Arial, Helvetica, sans-serif; color:#3b3b3b; background:#060606; display:inline; padding:10px; } a:link {color: #1A5194; text-decoration: underline;} a:visited {color: #1A5194; text-decoration: underline;} a:active {color: #1A5194; text-decoration: underline;} a:hover {color: #A5C6E6; text-decoration: none;} .boxReadMore1 a:link {color: #1A5194; text-decoration: underline;} .boxReadMore1 a:visited {color: #1A5194; text-decoration: underline;} .boxReadMore1 a:active {color: #A5C6E6; text-decoration: underline;} .boxReadMore1 a:hover {color: #A5C6E6; text-decoration: none !important;} .navigation ul li{ position:relative; } .navigation ul ul{ text-align:left; margin:0px; padding:0px; border:0px; list-style:none; background:transparent; } .navigation ul ul li { padding:0px; margin:0px; } .navigation li ul, .navigation li a ul{ visibility:hidden; position:absolute; top:30px; left:0px; z-index:1000; margin:0px; padding:0px; } .navigation li ul a{ display:block; color:#fff; padding:10px; margin:0px; height:auto; border:none; line-height:10px; width:150px; background:#000; } .navigation li:hover ul, #top-menu li a:hover ul{ display:block; visibility:visible; } .navigation li li a:hover{ display:block; color:#fff; padding:10px; margin:0px; height:auto; border:none; line-height:10px; width:150px; color:#3d3c63; background:#fff; } div.entry, .entry p { color:#E2E2E2!important; } #content-parent { color:#C0C0C0; } .FormLt1 { font-family : Arial; font-size : 8pt; cursor: hand; color: #ffffff; } Here is my site after Foundation 5 Application http://www.kalseeecolodge.com

Hello, I am trying to use a widget with the following code but it does not work fully in my site. I could not figure out what is wrong. I followed all the steps but not worked. <div class="mozio-widget" data-ref="mozio" data-theme="default" data-redirect="www.mozio.com"> <div class="mozio-widget-loading"> <img src="//widget.mozio.com/images/ajax.gif" class="mozio-ajax"> <p class="mozio-loading">Loading...</p> <a href="https://www.mozio.com" target="_blank"> <img src="//widget.mozio.com/images/logo.png" alt=""> </a> </div> </div> <script src="//widget.mozio.com/v1.2.0/mozio-widget.js" async></script> Example as in my site; http://www.egtours.com/Airport_Transfers.php

When I change these value as suggested in above custom.css all the contents goes below side menu. Need additional code ? if so example