Home Forums Porto Template Gallery Full width question

This topic contains 1 reply, has 2 voices, and was last updated by  Support2 1 week ago. This post has been viewed 49 times

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10022367

    Jorge Costa
    Participant

    Is it possible to change the number of pictures displayed in one row?
    At the moment there are 5. I needed 4, need to change the resolution from 1000×1000 to something more wide?

    <ul class="image-gallery sort-destination full-width">
    				
    					<li class="isotope-item">
    						<div class="image-gallery-item">
    							<a href="portfolio-single-small-slider.html">
    								<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
    									<span class="thumb-info-wrapper">
    										<img src="img/projects/project.jpg" class="img-responsive" alt="">
    										<span class="thumb-info-title">
    											<span class="thumb-info-inner">Project Title</span>
    											<span class="thumb-info-type">Project Type</span>
    										</span>
    										<span class="thumb-info-action">
    											<span class="thumb-info-action-icon"><i class="fa fa-link"></i></span>
    										</span>
    									</span>
    								</span>
    							</a>
    						</div>
    					</li>
    				
    					<li class="isotope-item">
    						<div class="image-gallery-item">
    							<a href="portfolio-single-small-slider.html">
    								<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
    									<span class="thumb-info-wrapper">
    										<img src="img/projects/project-2.jpg" class="img-responsive" alt="">
    										<span class="thumb-info-title">
    											<span class="thumb-info-inner">Project Title</span>
    											<span class="thumb-info-type">Project Type</span>
    										</span>
    										<span class="thumb-info-action">
    											<span class="thumb-info-action-icon"><i class="fa fa-link"></i></span>
    										</span>
    									</span>
    								</span>
    							</a>
    						</div>
    					</li>
    				
    					<li class="isotope-item">
    						<div class="image-gallery-item">
    							<a href="portfolio-single-small-slider.html">
    								<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
    									<span class="thumb-info-wrapper">
    										<img src="img/projects/project-4.jpg" class="img-responsive" alt="">
    										<span class="thumb-info-title">
    											<span class="thumb-info-inner">Project Title</span>
    											<span class="thumb-info-type">Project Type</span>
    										</span>
    										<span class="thumb-info-action">
    											<span class="thumb-info-action-icon"><i class="fa fa-link"></i></span>
    										</span>
    									</span>
    								</span>
    							</a>
    						</div>
    					</li>
    				
    					<li class="isotope-item">
    						<div class="image-gallery-item">
    							<a href="portfolio-single-small-slider.html">
    								<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
    									<span class="thumb-info-wrapper">
    										<img src="img/projects/project-5.jpg" class="img-responsive" alt="">
    										<span class="thumb-info-title">
    											<span class="thumb-info-inner">Project Title</span>
    											<span class="thumb-info-type">Project Type</span>
    										</span>
    										<span class="thumb-info-action">
    											<span class="thumb-info-action-icon"><i class="fa fa-link"></i></span>
    										</span>
    									</span>
    								</span>
    							</a>
    						</div>
    					</li>
    					
    					<li class="isotope-item">
    						<div class="image-gallery-item">
    							<a href="portfolio-single-small-slider.html">
    								<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
    									<span class="thumb-info-wrapper">
    										<img src="img/projects/project-5.jpg" class="img-responsive" alt="">
    										<span class="thumb-info-title">
    											<span class="thumb-info-inner">Project Title</span>
    											<span class="thumb-info-type">Project Type</span>
    										</span>
    										<span class="thumb-info-action">
    											<span class="thumb-info-action-icon"><i class="fa fa-link"></i></span>
    										</span>
    									</span>
    								</span>
    							</a>
    						</div>
    					</li>
    				
    			</ul>

    #10022375

    Support2
    Keymaster

    Hello Jorge,

    Just add this code in (css/custom.css):

    .sort-destination.full-width .isotope-item {
        width: 25%;
    }

    Is not needed to change the size of images.

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

    Kind Regards,

    Rodrigo.


Viewing 2 posts - 1 through 2 (of 2 total)