The div is leaving the responsive bootstrap gallery

I'm experiencing an issue with my gallery overflowing the parent div and not staying sorted in all screen sizes. Here's a screenshot along with a snippet of the code:

https://i.sstatic.net/mKRtZ.jpg

 <div id="gallery" class="container-fluid">
 <h1><kbd>Gallery</kbd></h1>
 <div class="container">   
<ul> 
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"> <img class="lazy" data-original="images/galerija/1.png" width="150" height="150"> </li>
   (...)
</ul>
  </div>
  </div>

My goal is to properly sort the images within the div like a grid, and then use jQuery to extend the div on smaller screens.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

#gallery {padding-top:50px;color: #000000; background-color: #DCDCDC; border: 1px solid;} 
ul {padding:0;list-style: none;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div id="gallery" class="container-fluid">
 <h1><kbd>Gallery</kbd></h1>
 <div class="container">   
<ul class="text-center"> 
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/1.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/2.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/3.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/4.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/5.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/6.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/7.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/8.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/9.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/10.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/11.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/12.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/13.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/14.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/15.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/16.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/17.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/18.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/19.png" width="150" height="150"> </li>
   <li class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> <img class="lazy" data-original="images/galerija/20.png" width="150" height="150"> </li>
</ul>
  </div>
  </div><br>

View this code snippet in full page mode.

Answer №2

It's difficult to determine without CSS, but it appears that the elements are being floated. If this is the case, you may be encountering a clearfix problem where the containing div does not properly adjust to accommodate the floated items.

Reference:

Answer №3

To achieve a similar effect using CSS, consider using the clearfix technique. This will allow you to float elements as needed and then rearrange them with JavaScript afterwards. Another option is to use inline-block display, eliminating the need for floats altogether.

Check out this example on jsFiddle

ul::after {
    content: '';
    clear: both;
    display: table;
}

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

Having trouble with the Twitter share count URL - seeking out other options

Previously, I utilized the following Javascript function to retrieve the Twitter share count for a URL. Unfortunately, Twitter has discontinued providing the share count. Is there a more effective alternative available? // Twitter Shares Count $.getJSON ...

javascriptjquerytwitter

Having trouble getting the CSS Hover state to function properly?

I am currently working with a code snippet that looks like this: <div style="position: absolute; margin-left: -22px; margin-top: -22px; left: 502px; top: 379px; z-index: 380; display: block;" class="maptimize_marker_0 f st">1<span class="pinlabel ...

htmlcss

Deactivate input fields when the checkbox is selected

In my ticket purchase form, you are required to fill in all personal information. However, there is an option to purchase an empty ticket without any name on it. This can be done by simply checking a checkbox, which will then disable all input fields. ...

javascriptjqueryhtmlformscheckbox

Having trouble with Nodemon not automatically refreshing the browser in a React-Express-Node application?

I recently set up nodemon locally in my workspace to automatically restart after making changes, but I noticed that it doesn't refresh the browser page. I have to manually refresh it every time. My workspace includes Express, Node, React, and Webpack ...

javascriptreactjswebpacknodemon

Issues with 'floating' unordered lists

.menu li { float: left; color: #fff; font-weight: bold; } .menu li a { display: block; height: 20px; min-width: 110px; text-decoration: none; border-radius: 3px; padding: 4px; padding-left: 6px; padding-right: 6p ...

css

How to use jQuery to target the element with the highest z-index

On my webpage, there are several elements with the class name aaw, each with a different zIndex value. I am now looking to specifically target the element with the highest zIndex among those that have the class aaw. ...

jquery

Enhance the appearance of Ionic popups

Can someone help me with resizing a pop up? I've been struggling to get it right. This is the popup template in question: <ion-view> <ion-content scroll="false" class=""> test </ion-content> < ...

javascriptangularjsionic-frameworkpopup

Ways to conceal scrollbar when it is not in use

Typically, the scrollbar is visible only when scrolling through a page and then disappears immediately after. I attempted to modify the default scrollbar properties using basic CSS. While this made the scrollbar always visible, adding "overflow-y: auto" d ...

htmlcssbootstrap-4

What is the best way to position buttons on the same line, with one on the left and

How can I adjust the layout of my previous and next buttons so they appear on the same line? Currently, my buttons are displayed like this: https://i.sstatic.net/6zQxs.png <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3 ...

htmlbootstrap-5

Issue: $injector:unpr Unrecognized Provider DataServiceProvider (a provider that has not been defined before)

Encountering this issue: Error: [$injector:unpr] http://errors.angularjs.org/1.5.6/$injector/unpr?p0=DataServiceProvider%20%3C-%20DataService%20%3C-%20SignupController Suspecting that the problem lies in the fact that DataService cannot be found due to ...

javascriptangularjsangularjs-injector

What is the best way to eliminate particular elements from a nested JSON payload in JavaScript?

I am in need of creating a function that can scan through a nested JSON structure to locate specific elements and delete all occurrences of those elements, even if they are within an array. Consider this JSON example: { "userId": "John991", "grou ...

javascriptarraysjson

I am unable to utilize folder paths in CSS within my React application

Having trouble setting a background image in CSS within my React app. When styling and setting the image from a React component, it works just fine. Can anyone provide assistance? This code snippet will work: const style={ width:'300px', ...

cssreactjsbackground-imagecss-loader

What are the steps to create a table using divs and CSS?

Can someone guide me on how to create a table using divs, CSS, and proper XHTML formatting? <table width="100%" border="1"> <tr> <td style="width: 130px">1</td> <td align="center">2</t ...

htmlcsshtml-table

Ways to enhance $.post() capabilities by incorporating additional features from $.ajax()

Can I customize the options and properties of jQuery's $.post() function? Sometimes I find myself needing to include additional properties in $.post(), such as async, beforeSend, contentType, context, crossDomain, error, global, headers, ifModified, ...

jqueryajaxhttp-postextend

Your web app manifest should include a dictionary for the Serviceworker

After setting up payment integration with razorpay, I encountered a console error stating that the serviceworker must be a dictionary when clicking the button. ...

javascriptfirebasevue.jsrazorpay

Error: Failed to cast value "{ email: 'example@email.com' }" to ObjectId (type Object) for the "_id" path in the "User" model

How can I use the Mongoose ID to fetch data and send it to the client's browser? My Mongoose Database Data: {"_id":{"$oid":"6404fc0b9e6a0640b0deb716"},"username":"dddd","email":"[email&# ...

javascriptnode.jsreactjsexpressmongoose

Type inference in Typescript is especially powerful when used in conjunction with decorators

I am curious as to why the compiler in Typescript cannot infer the new type of a class when decorators or annotations are used. Interestingly, if I use the traditional ES5 method (manually calling the decorator), it works without any issues. Here is an ex ...

javascriptooptypescriptdecorator

The challenge of website sizing issues with window scaling and the overlooked initial-scale value in HTML

After encountering sizing issues on Windows 10 due to default scaling set at 125%, I attempted to replicate the issue by adjusting the Scale on Ubuntu. My attempt to fix the size by modifying the initial-scale value did not yield any results: document.que ...

htmlreactjsmaterial-uiresizeresponsive

Adjust the spacing between the title and other elements in an R Shiny application

How do I modify the font and size of a title, as well as add some spacing between the title and other elements? navbar <- navbarPage( Title = "Intervals", tabPanel("Data Import", sidebarLayout(sidebarPanel(fi ...

cssrshiny

Problem with Ionic App crashing

Currently, I am developing an Ionic app that relies on local storage for offline data storage. The app consists of approximately 30 different templates and can accommodate any number of users. Local storage is primarily used to store three key pieces of i ...

javascriptiosangularjsionic-framework