Home Forums Porto Template rtl problems

  • This topic has 2 replies, 2 voices, and was last updated 5 months ago by  Support2. This post has been viewed 220 times
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10030248
    hjmelda
    Participant

    i faced rtl problem with item process-image process-image-on-middle, js not working and clouds with arrows not working.
    you can find it in: https://preview.oklerthemes.com/porto/7.5.0/feature-layout-rtl.html

    (it named: strategy planing our work)
    also there are a problem when scrolling up an down the navbar shifted to the right


    #10030249
    hjmelda
    Participant

    error2
    error1


    #10030252
    Support2
    Keymaster

    Hello, thanks for your purchase.

    1) Regarding the first issue with “home-concept”: Make sure you are copying the “home-concept” HTML code from the “feature-layout-rtl.html” page, since some spacement classes change between LTR and RTL layouts. This is the correct code for RTL:

    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
    	<div class="home-concept mt-5">
    		<div class="container">
    
    			<div class="row text-center">
    				<span class="sun"></span>
    				<span class="cloud"></span>
    				<div class="col-lg-2 mr-lg-auto">
    					<div class="process-image">
    						<img src="img/home/home-concept-item-1.png" alt="" />
    						<strong>Strategy</strong>
    					</div>
    				</div>
    				<div class="col-lg-2">
    					<div class="process-image process-image-on-middle">
    						<img src="img/home/home-concept-item-2.png" alt="" />
    						<strong>Planning</strong>
    					</div>
    				</div>
    				<div class="col-lg-2">
    					<div class="process-image">
    						<img src="img/home/home-concept-item-3.png" alt="" />
    						<strong>Build</strong>
    					</div>
    				</div>
    				<div class="col-lg-4 mr-lg-auto">
    					<div class="project-image">
    						<div id="fcSlideshow" class="fc-slideshow">
    							<ul class="fc-slides">
    								<li><a href="portfolio-single-wide-slider.html"><img src="img/projects/project-home-1.jpg" alt="" /></a></li>
    								<li><a href="portfolio-single-wide-slider.html"><img src="img/projects/project-home-2.jpg" alt="" /></a></li>
    								<li><a href="portfolio-single-wide-slider.html"><img src="img/projects/project-home-3.jpg" alt="" /></a></li>
    							</ul>
    						</div>
    						<strong class="our-work">Our Work</strong>
    					</div>
    				</div>
    			</div>
    
    		</div>
    	</div>
    </div>

    * The change is on the margin classes like: mr-lg-auto

    Regarding the accordion: Sorry for this issue on the RTL layout. To fix just add this code in (css/custom.css):

    .custom-accordion-style-1.accordion .card-header a .custom-accordion-plus {
        right: auto;
        left: 15px;
    }
    
    .custom-accordion-style-1 .card .card-title > a.accordion-toggle:before {
        left: auto;
        right: 0;
    }

    2) Regarding the left white bar when scroll, we did some tests and this seems to occurs only when the browser has zoom. If you mantain the zoom of browser in 100% this don’t occurs. Anyway you can fix that with this simple code in (css/custom.css):

    @media(min-width: 992px) {
    	html:not(.sticky-header-active) body {
    	    overflow-x: hidden;
    	}
    }

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    • This reply was modified 5 months ago by  Support2.
Viewing 3 posts - 1 through 3 (of 3 total)