Troubleshooting alignment problems with a responsive gallery (Bootstrap-gallery & justifyGallery)

Looking to showcase a gallery of images using jquery-justifyGallery and bootstrap-gallery. Want to display 4 images in a row, but running into issues when trying to display 5 images where the last image in the row ends up with a larger width. Bootstrap has 12 columns in each row - any suggestions on how to address this problem?

HTML

<div class="container">
    <h3 class="gallery-title">The Rainbow Run - 07 Dec 2014</h3>
    <div class="gallery row">
        <a href="{{ asset('img/gallery/rainbow_run/1.jpg') }}" class="col-md-3">
            <img src="{{ asset('img/gallery/rainbow_run/1.jpg') }">
        </a>
        <a href="{{ asset('img/gallery/rainbow_run/2.jpg') }}" class="col-md-3">
            <img src="{{ asset('img/gallery/rainbow_run/2.jpg') }">
        </a>
        <a href="{{ asset('img/gallery/rainbow_run/3.jpg') }}" class="col-md-3">
            <img src="{{ asset('img/gallery/rainbow_run/3.jpg') }">
        </a>
        <a href="{{ asset('img/gallery/rainbow_run/4.jpg') }}" class="col-md-3">
            <img src="{{ asset('img/gallery/rainbow_run/4.jpg') }">
        </a>
        <a href="{{ asset('img/gallery/rainbow_run/5.jpg') }}" class="col-md-3">
            <img src="{{ asset('img/gallery/rainbow_run/5.jpg') }">
        </a>
    </div>
</div>

JS

$('.gallery').bootstrapGallery({});
$('.gallery').justifyGallery({
    'maxRowHeight': '400px',
    'spacing': 10,
    'resizeCSS': {
        'min-width' : 0,
        'width': '300px',
        'max-width' : '300px'
    }
});

Answer №1

Take a look at this demonstration

CSS:

@media(min-width:768px){
  div.col-sm-7.seven-three{width:60%!important;}
  div.col-sm-5.five-two{width:40%!important;}
}

HTML:

<div class="col-sm-12">
  <div class="row">
    <div class="col-sm-7 seven-three">
      <div class="row">
        <div class="col-sm-4" style="background-color:#000;">Column 1</div>
        <div class="col-sm-4" style="background-color:#333;">Column 2</div>
        <div class="col-sm-4" style="background-color:#444;">Column 3</div>
      </div>
    </div>
    <div class="col-sm-5 five-two">
      <div class="row">
        <div class="col-sm-6" style="background-color:#555;">Column 4</div>
        <div class="col-sm-6" style="background-color:#666;">Column 5</div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/3xuybnje/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding a prefix to all specified routes in Express.js

Imagine having an Express app defined in a file called server.js as follows: const app = express(); app.use('/foo', foo); app.use('/bar', bar); module.exports = app; You then import this Express app into another file named index.js: ...

Steps to show a Google Maps marker with the help of ajax

I'm trying to show a "marker" on the map using ajax, but I haven't been able to find a solution despite searching various sources online. ================= Here's the code I currently have: var map; function initialize(){ var center = ...

Sturdy and adaptable in a container designed with a responsive width

Currently, I am developing a responsive app and I am facing the challenge of making some parts of the search bar responsive while keeping others fixed in width (like the search icon). I attempted to achieve this using the following code: .wrapper{ ...

"An error occurred: Uncaught SyntaxError - The import statement can only be used within a module. Including a TypeScript file into a

I need to integrate an Angular 10 TypeScript service into a jQuery file, but I am facing an issue. When I try to import the TypeScript service file into my jQuery file, I encounter the following error: Uncaught SyntaxError: Cannot use import statement outs ...

ui-router: Issue with ui-sref causing font color to remain unchanged

I've been trying to customize the font color of a navigation link using ui-router's ui-sref functionality, but I'm facing an issue. While I can change the background color by adding it to the .active class in my CSS, the font color remains u ...

Make sure to use the jQuery load function to specifically target and retrieve

Hello, I'm new to working with jQuery and I have a question about adding a vertical scrollbar to a jQuery modal window. Specifically, I want the scrollbar to appear when there is a large amount of text within the modal window. Can you guide me on wher ...

What is the best way to showcase data in a table using React Js?

I'm working on a project in React Js where I need to display data fetched from an API in a table. The challenge is that the data is received as an object and I'm struggling to map through it efficiently. Currently, I have hardcoded some sample da ...

Ways to refresh the DOM while making an asynchronous request

Consider the following async function: async function predict_from_model() { $("#loading").html("first update") const model = await tf.loadModel('model.json'); $("#loading").html("second update") //delayed for (var i = 0; i < 100; i++ ...

What is the importance of using mb_convert_encoding in order to display the characters correctly?

My website and MySQL database are both set to use UTF-8 encoding. An issue I am encountering is that when retrieving text from the MySQL database to display on the website, I need to utilize the PHP function mb_convert_encoding(@db_field,'utf-8' ...

Navigating from a Card to a new View in Angular

I am currently developing a project using Angular (latest version). Within my application, I have the functionality to dynamically generate bootstrap cards from an Order Array and display them in my "Order-Item-Component through its respective template. ...

Why are the indicators and controls for Twitter-Bootstrap 5 carousel not functioning properly?

Currently, I am working on developing an ecommerce website using the Django framework. However, I am facing challenges with making my bootstrap carousel function properly. When trying to interact with the indicators and controls, nothing happens as expect ...

Why does the browser indicate that a GET request has been sent but the promise does not return anything?

Having trouble with a puzzling issue and unable to find any solutions online. I am attempting to make a basic HTTP get request to receive a JSON object from an API I created (using express+CORS). I have experimented with both Axios and VueResource, yet en ...

Struggling to extract text from within a <p> tag on an Ionic 1 app page on iOS

After developing an ionic-1 application for iOS and Android devices, I encountered an issue with displaying mobile numbers in one of the views. The numbers are contained within <p> tags. While users can click and hold on a number to copy it on Andr ...

The user_login view in the account views did not provide an HttpResponse object, but instead returned None

Error: Unable to register or log in - account.views not returning HTTP response # accounts/views.py from django.shortcuts import render, redirect from django.contrib.auth import login, authenticate, logout from account.forms import RegistrationForm, Use ...

When the anchor tag is clicked, I'm displaying the DIV for Customer Testimonials, however, the expansion of its height is not

One way to display customer testimonials is by using flexslider to create a horizontal scroll. The testimonials are hidden and only shown when the "view all testimonials" link is clicked, which can be seen in this JSFiddle example: Working : Demo JQuery ...

Utilize HTML/CSS for text that changes automatically

Is it possible to dynamically change text using HTML and CSS based on the page being viewed? For example, when on the home page, the text would automatically display "Home Page" without needing manual changes on each page. I want this process to be seamles ...

Top method for verifying email existence in ASP.NET database

In our current asp.net web application, we are facing some challenges with using the update panel on the user registration page to check for existing users. These issues include: 1- The update panel tends to slow down the process. 2- The focus is lost wh ...

I am facing an issue with the Ionic Framework where the Javascript function for JWPlayer only works after the page is reloaded. Can anyone help

I'm currently troubleshooting the use of JWPlayer for streaming videos in an Ionic app. However, I've encountered a problem. The player only seems to load when I refresh the page, rather than when I navigate through the list of videos. Here is ...

Click on the button to be directed to a different page using React

<div class="clickable-icon"> <button component={Link} to={"/create"}> <EditIcon></EditIcon> </button> </div> I have written this code snippet to turn an icon into a clickable button that directs ...

Integrating HTML into a C# Windows form application

Just diving into the world of online shopping and came across an e-commerce cart that I'd like to integrate into my own website. The platform provided me with a HTML code snippet for embedding, which is great. However, I'm wondering if it's ...