Home Forums Porto Template rtl problems

This topic contains 2 replies, has 2 voices, and was last updated by  Support2 2 months, 1 week ago. This post has been viewed 153 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 2 months, 1 week ago by  Support2.
Viewing 3 posts - 1 through 3 (of 3 total)