Issue with displaying image titles in a responsive image gallery created with HTML and CSS

I am in the process of developing a static website from scratch, coding the HTML and CSS components myself. My goal is to create a responsive "image gallery" that adjusts the width of the images based on the user's screen size. To achieve this, I followed a tutorial provided at CSS Image Gallery - responsive.

However, while customizing it to suit my preferences, I encountered an issue that I couldn't resolve with my current level of HTML/CSS skills (which are still fairly basic as I'm relatively new to this field). The problem arises when I have multiple images of the same size in the gallery, but the captions for these images vary in length. This inconsistency negatively impacts the layout of the text following the gallery. Despite attempting solutions found in various tutorials, none of them have proven effective so far.

Can any of you provide an easy solution to this problem? If yes, kindly explain the adjustments made, as I aim to gain a deeper understanding of the functioning of my website (this is why I refrained from using static site generators).

Note: I have created three types of galleries; one each for two, three, and four images. This explains the use of classes such as ".responsivethree".

https://i.sstatic.net/dF6Ed.png

<!DOCTYPE html>
<html lang="en-NL">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
...

htmlcssresponsive-designresponsive-images

Answer №1

By applying the float:left property to the responsivethree class, you have successfully aligned the images to the left. However, without resetting the left justification feature afterward, you may encounter issues with text scrolling. To rectify this problem, utilize the clear:both command to reset the float:left property.

<!DOCTYPE html>
<html lang="en-NL">
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
  <style type="text/css">
    body {
    font-family: helvetica;
    padding: 20px;
    font-size:11pt; }

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

Incorporate a 'Select All' functionality into ion-select by adding a dedicated button

Looking for a way to set custom buttons on ion-select through interfaceOptions in ionic 4? HTML <ion-item> <ion-label>Lines</ion-label> <ion-select multiple="true" [(ngModel)]="SelectedLines" [interfaceOptions]="customAlertOption ...

htmltypescriptionic-frameworkionic4

HTML - Ways to showcase multiple forms on a single row?

I have three forms in my Flask application that I want to display in a single line rather than one after the other. Is there a way to achieve this without using CSS? Here is the HTML snippet: <form action="/pull_entity_by_manufacturer" metho ...

htmlcss

Effortless navigation through the document in both directions with seamless scrolling

To achieve a specific scrolling behavior on my webpage, I implemented the following function. Here is the code snippet: $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $("html, body").animate({scrollTop: 700}, 500); re ...

javascriptjqueryhtmlcss

When printing a table in HTML/CSS, only the header will appear on the empty page

I'm struggling to figure out why there are two pages, one blank and one with just the table header in this document. The content looks fine otherwise, but I can't seem to remove these extra pages. Here is the full HTML code: <!DOCTYPE html& ...

htmlcssprinting

Issues with connecting local CSS and JS files to HTML pages

I am facing an issue with my base HTML file that I want all other pages to inherit certain characteristics from. The problem arises when I try to link an external CSS file like bootstrap.css from within my project directory. I have the file stored in the s ...

javascripthtmlcsshyperlinktornado

Toggle the visibility of elements (such as a form) with a click of a link - Utilize ajax to

I'm attempting to use jQuery to toggle the visibility of a form. This functionality is triggered by clicking on a specific link... The goal is to hide all links with data-action="edit" and only display the form that follows the clicked link, as there ...

javascriptjqueryhtmlcss

Spartacus 3.3 - Unleashing the Full Potential of the Default Sparta Storefront Theme

Looking for advice on how to customize the default Spartacus Storefront theme (Sparta) by only overriding specific CSS vars. Any suggestions? I tried following the instructions provided at: https://github.com/SAP/spartacus/blob/develop/projects/storefront ...

cssspartacus-storefront

The Bootstrap navbar does not collapse as expected

Upon opening my HTML file, I am unable to locate the collapse button on the navbar. The collapsible button seems to be missing. Here is a snippet of my HTML code: <!DOCTYPE html> <html> <head> <title>BoostUp - Boost your ...

htmljquerycsstwitter-bootstrapbootstrap-4

What is the best way to keep a div element fixed at the top of a webpage?

I am facing an issue with a div that contains three SVG files layered on top of each other and meant to be centered on the page. Ideally, when the user scrolls down, I want these SVG files to stick to the top and remain there. In my CSS attempts, I have u ...

htmlcss

What is the reason behind not being able to utilize addEventListener on a variable that has been selected through DOM's getElementsByClassName method?

btn = document.getElementsByClassName('btn'); value = document.getElementById('value'); let counter = 0; btn[2].addEventListener('click', function() { if (btn[2].classList.contains('decrease')) counter -= 1; if ...

javascripthtmlcssarraysdom

An unconventional way to display an image using the :before pseudo-element and a data attribute in CSS

My goal is to use the :before pseudo-element to set an image background, as I plan to overlay content on top of it. In the past, I have dynamically set a data attribute with :before for other purposes. Question: Is there a way to change the number using ...

javascriptjquerycss

The functionality for tabbed content seems to be malfunctioning on Chrome and Firefox, however it works perfectly

In my index.js file, I have various functions set up like so: // a and b is placed at index.jsp $("#a").click(function (){ //this works on index.jsp and display.jsp(where the servlets forwards it). $("#b").load('servletA.html?action=dis ...

javascriptjqueryhtmljsp

Use the nobr HTML tag on Django form fields

I have been customizing Django form fields using this helpful guide. Here is the form structure: class contact(forms.Form): first_name = forms.CharField() middle_name = forms.CharField() last_name = forms.CharField() This is how the template ...

htmlcssdjangodjango-templates

When the document is shifted by an angular function call, the mouseup event fails to trigger

My problem involves an angular function that alters the ng-if state to display the sidebar when the image is clicked. However, upon calling the function and shifting the entire webpage, the mouseup event for the image no longer triggers when I release th ...

javascripthtmlangularjs

Issues with the presentation of HTML DIV elements

I am puzzled by a situation where my HTML layout to present financial data does not seem to update properly in certain browsers. Despite using jQuery and inspecting it with Firebug, the visual display of the parent divs remains unaltered. This issue become ...

jqueryhtmlcss

Is there a way to stylize the initial words of a brief text block by blending small caps with italics, all while avoiding the use of a span tag?

I have a series of images with numbered captions like "Fig. 1", "Fig. 2", "Fig. 3", followed by a brief description on the same line. Is there a way to programmatically style these strings (the “Fig. #” only) using CSS or Javascript to make them italic ...

javascripthtmlcss

My attempts at locating child elements using XPATH have been unsuccessful in finding an exact match

I have a specific requirement to input a string into the webdriver and then compare it with the label of a radio button. <input type="radio" onclick="Element.show('indicator_radio_term_190');render_selected_term('190','1', ...

htmlseleniumxpathautomation

Sharing a div or text upon checking a box

I am new to JavaScript and I'm searching for an article or method to achieve the following task, whether it's through a form or just JS (without using PHP). I have a set of checkboxes labeled as box 1 - 4. When any one of them is checked, I want ...

javascriptjqueryhtmlforms

How can you ensure that an element returns to its original position after being animated in jQuery?

I want to add some animations to my website using jQuery, but I lack the skills to create them from scratch. I have managed to copy some code snippets, but I am facing an issue with one of my animations. When I click a button, the block animates, but I wan ...

javascriptjqueryhtmlcssanimation

Adjust the width of a div element to a specific size, center the div horizontally, and justify

My issue may be small, but I am struggling to find a solution. I have a content header that is 864px wide with a background image repeated vertically and a footer image. I now have a <div> positioned over the background image and I want it to be 855p ...

htmlcss