Troublesome display problem with photo gallery

I have encountered an issue with the image gallery in my HTML file. The images are displaying nicely, but on the second row, three of the images are slipping down. Here is a screenshot for reference:

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

I attempted to address this problem using a flexbox layout, but I'm struggling to grasp how to effectively implement it. Just to clarify, the website will not be published as I do not have permission to use the images. This exercise is purely for educational purposes.

Here is the relevant code snippet:

section p {
    margin-left: 5%;
}

section p iframe {
    float: left;
    margin-right: 2%;
}
…


<section>
…
…
</section>

htmlcssflexbox

Answer №1

The issue arises from inconsistent height within your responsive boxes when floated, to address this problem, utilize the pseudo-class :nth-of-type for clearing floats after every sixth element.

.responsive:nth-of-type(6n+1) {
    clear: both;
}

For example:

section p {
    margin-left: 5%;
}

section p iframe {
    float: left;
    margin-right: 2%;
}

div.gallery {
    border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

.responsive {
    box-sizing: border-box;
    padding: 1em;
    float: left;
    width: 15%;
}

.responsive:nth-of-type(6n+1) {
    clear: both;
}
<section>
       
       <p><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/f2aSCvUhUBc" frameborder="0" allowfullscreen></iframe>The Witcher 3 is one of the most impressive role-playing games of the 21st century and rightly so<br>has been awarded over 800 awards.<br>The game revolves around the Witcher Geralt, who is tasked with saving the world from the white frost,<br>or rather his ward Ciri (Cirilla), a child of elder blood and daughter of the Emperor of Nilfgaard. Only elder blood can stop the frost.<br>But this game is much more than just a storyline:<br;The game thrives on a dynamic world that constantly changes based on the decisions Geralt makes throughout the game.<br;There are a total of 36 different endings and NPCs bring as much life to the game as the music, sounds, landscape, and the so-called 40-second rule.<br;This rule states that something exciting must happen in the game every 40 seconds,<br;to captivate the player. Whether it's a monster, a herd of deer running by, or a wandering bandit.<br;Everything in the game is context-sensitive and has consequences, everything is meticulously thought out and somehow connected.<br;This masterpiece offers much more than many first-person shooters and the like.</p>
       
       
       <br style="clear:both;" />
       
       
    <div class="responsive">
      <div class="gallery">
        <a target="_blank" href="resources/img/witcher3_en_wallpaper_hearts_of_stone_olgierd_1920x1200_1446735934.png">
          <img src="https://dummyimage.com/600x500/000/fff" alt="Trolltunga Norway" width="600" height="500">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>


    <div class="responsive">
      <div class="gallery">
        <a target="_blank" href="resources/img/B1VXMu9UhiS.png">
          <img src="https://dummyimage.com/600x500/000/fff" alt="Trolltunga Norway" width="600" height="500">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank" href="resources/img/Tw3_Blood_and_Wine_cover_art.jpg">
          <img src="https://dummyimage.com/600x500/000/fff" alt="Trolltunga Norway" width="600" height="500">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>

    <!-- Additional responsive gallery items go here -->
    
</section>

Answer №2

When utilizing floating elements, it is crucial to ensure that all elements have the same height. Otherwise, they may begin behaving unpredictably.

Consider assigning a specific height to the elements and observe if the issue resolves.

Answer №3

Update your adaptive class to the following: 

.adaptive {
    margin: 1em;
    width: 20%;
    display: block;
    vertical-align: bottom;
}

Answer №4

Adding onto the previous point about the working fiddle and potential issue with undefined height, it's important to note that if you're utilizing flexbox, you should include the property flex-wrap:wrap. For a more thorough understanding of flexbox, check out this comprehensive guide: flexbox guide

If you find that the fixed height isn't functioning as expected, take a closer look at that specific area (by right-clicking and selecting "inspect element") to identify any elements blocking other images in the section. Utilizing the browser console can be incredibly helpful for frontend debugging.

Answer №5

Here is a solution that worked for me:

<div class="rowrow"><div class="item">
                                    <article>
                                        <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div>
                                        <div class="boxContent team-box-border">
                                            <h3>Amrish Patel</h3>
                                            <p>CEO and Managing Director</p>
                                          <p>CEO and Managing Director</p>
                                        </div>

                                    </article>
                                </div><div class="item">
                                    <article>
                                        <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div>
                                        <div class="boxContent team-box-border">
                                            <h3>Amit Goyal</h3>
                                            <p>Chief Technical Officer</p>
                                        </div>

                                    </article>
                                </div><div class="item">
                                    <article>
                                        <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div>
                                        <div class="boxContent team-box-border">
                                            <h3>Dimple Goyal</h3>
                                            <p>Software Engineer</p>
                                        </div>

                                    </article>
                                </div><div class="item">
                                    <article>
                                        <div><img src="i{{ 'itemimg.jpg' | asset_url }}"></div>
                                        <div class="boxContent team-box-border">
                                            <h3>Nisarg Patel</h3>
                                            <p>Full Stack Developer</p>
                                        </div>

                                    </article>
                                </div><div class="item">
                                    <article>
                                        <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div>
                                        <div class="boxContent team-box-border">
                                            <h3>Nikita Sarang</h3>
                                            <p>Software Engineer</p>
                                        </div>

                                    </article>
                                </div><div class="item">
                                    <article>
                                        <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div>
                                        <div class="boxContent team-box-border">
                                            <h3>Reshma Bhagwani</h3>
                                            <p>Software Engineer</p>
                                        </div>

                                    </article>
                                </div><div class="item">
                                    <article>
                                        <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div>
                                        <div class="boxContent team-box-border">
                                            <h3>Dhruvi Kothari</h3>
                                            <p>Software Engineer</p>
                                        </div>

                                    </article>
                                </div><div class="item">
                                    <article>
                                        <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div>
                                        <div class="boxContent team-box-border">
                                            <h3>Darshit Patel</h3>
                                            <p>Front-end Developer</p>
                                        </div>

                                    </article>
                                </div><div class="item">
                                    <article>
                                        <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div>
                                        <div class="boxContent team-box-border">
                                            <h3>Ghanshyam Prajapati</h3>
                                            <p>Front-end Developer</p>
                                        </div>

                                    </article>
                                </div><div class="item">
                                    <article>
                                        <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div>
                                        <div class="boxContent team-box-border">
                                            <h3>Ravi Pitroda</h3>
                                            <p>Software Engineer</p>
                                        </div>

                                    </article>
                                </div><div class="item">
                                    <article>
                                        <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div>
                                        <div class="boxContent team-box-border">
                                            <h3>Radhesh Vayeda</h3>
                                            <p>Full Stack Developer</p>
                                        </div>

                                    </article>
                                </div>


                            </div>

Add the following CSS:

.item {
    display:inline-block;
    width: 33.33%;
    text-align: center;
}

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

Angular: "btn" class vanishes when the button is toggled

I am facing an issue with the button's class change functionality. I am using the [ngClass] directive to switch between Bootstrap classes for the button style. However, when I click the button, the "btn" class seems to disappear from the code. Instead ...

cssangulartypescript

Storing Images in MySQL Database with JavaScript and Node.js: A Step-by-Step Guide

I am using Javascript to capture an image and store it in a MySQL Database. Below is the code I have written for this: <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device- ...

javascripthtmlmysqlnode.js

How can I implement a jQuery slide down effect for a specific individual instance?

Whenever I click on the "Share your thoughts" button, the comments block slides down for every section instead of just the particular section I clicked on. Is there a way to make it so that only a single block slides down when the button is clicked, regard ...

javascriptjqueryhtmlcss

Creating an interactive time selection tool with two dropdown lists that are dependent on each other using HTML and JavaScript

Hi everyone, I am new to JavaScript. I am currently working on creating two dropdown lists, one for 'Start Time' and another for 'End Time'. These dropdown lists will display hours in a 24-hour format with intervals of 30 minutes. In t ...

javascriptphphtmlajax

a pathway leading to the user's profile

I have successfully implemented a code that displays a list of people who are at level 8, which can be seen below https://i.sstatic.net/bJ9VX.png Now, I want to make it so that when a user clicks on the username of the individuals listed, they will be re ...

phphtml

The hyperlinks lead to pages that are not related to the topic at

My goal was to make links interactive using JQUERY when they are clicked. After some research, I discovered a code snippet on stackoverflow that seemed to work well. However, when I clicked on the links, they would become bold or active as intended, but t ...

jquerycsshyperlink

Make the text stand out by highlighting it within a div using a striking blue

Currently, I am working with Angular2 and have incorporated a div element to display multiple lines of text. Positioned below the text is a button that, when clicked, should select the entirety of the text within the div (similar to selecting text manually ...

htmlcssangulartypescriptangular2-template

What are the steps to incorporate fading effects into a jQuery popup box?

Currently, I have implemented a jQuery function to display a popup box using .show() and hide it using .hide(). Is there a way to incorporate charming animations such as fading into the popup box? // display pop up $('.mypopup').show(); // con ...

jqueryhtmlcss

Struggling to follow the placement of elements within the treeview component

I have successfully implemented a method to track the positions of Div elements on my webpage. However, I am facing an issue with keeping track of the position of a div within a modal popup extender that contains a TreeView. The position is always reset to ...

c#asp.nethtmlajaxmodalpopupextender

Fluid Grid design showcasing a gap on the right side

After working on the Skeleton Framework and making adjustments to the grid design, I am facing a small gap issue on the right side. Despite things slowly falling into place, this minor gap is causing confusion. Please refer to the image below for clarifica ...

javascripthtmlcssframeworksresponsive

I am looking to apply the Normal texture to the Fbx model, but I am encountering issues with the normal not functioning

This is an example. I am in need of a model with both a color map and a normal map. Just like the one seen in Microsoft 3D Viewer. https://i.sstatic.net/DU2vo.png Furthermore, I already have a model with a normal map. My approach involves using the re ...

htmlthree.jstexturesnormalsfbx

Display a message on the webpage itself, not in a pop-up, when the value exceeds 1 using JavaScript

I need help with a condition involving a variable called "truecount." If this value is less than one, I would like to display an error message on the screen instead of an alert popup. Could someone assist me with this? I am new to this and don't have ...

javascripthtml

Personalized pop-up experience with AngularJS

I am currently working on creating a filter in AngularJS without relying on jQuery. To achieve this, I am using a custom directive to generate a popup that includes a checkbox. However, I have encountered a couple of issues. 1. I have created two popups u ...

javascripthtmlcssangularjs

Creating a competition schedule - pieces don't quite mesh

Having trouble getting my tournament bracket visuals to come together smoothly! Here is the CSS code I have: #tournament-holder{ width:708px; padding:20px 0 20px 15px; float:left; } .vertical-holder{ width:100px; padding-right:15px; float:left; } .horizo ...

phphtmlcss

Begin counting when a particular div element is visible on the screen

I have a plugins.init.js file that contains a try-catch block which runs on page load. I am looking for a way to execute this code only once when the div with the class counter-value comes into view. Is there a method to achieve this? try { const count ...

javascripthtmlscrollscrollview

Angular implementation of a filter dropdown with subcategories

One of the challenges I am facing involves two dropdowns that need to be populated with data retrieved from the server. The first dropdown displays a list of categories, while the second one shows all the corresponding subcategories. Here is an example of ...

htmldrop-down-menuangularjs

Issues arise with the functionalities of FireFox related to transformations and transitions

I've been working on my CSS and here is what I have: img.buttonImg { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: ...

cssfirefox

Adding and removing dynamic fields with Bootstrap functionality

Recently, I've been trying to develop a feature where users can add and remove fields by clicking on a button. However, I've encountered a roadblock in my progress. If you take a look at this CodePen link, you'll see what I have so far. My a ...

javascripthtmltwitter-bootstrap

The column is not properly aligned

I am facing a challenge in aligning 3 elements using bootstrap while working with Angular 8. To include only the necessary CSS from Bootstrap (such as col-md and col classes), I have added the following to my styles array: "styles": [ "src/ ...

cssangularsassbootstrap-4

SOLVED: How to utilize CSS to confine scrollbars within nested div elements

As a novice in web programming, I am currently working on a userscript to add hotkeys to a website. I am using Firefox on Linux for this project, focusing solely on desktop functionality. Right now, my main focus is on enhancing the pop-up help view, which ...

htmlcssscrollbar