Gallery tiled with images enclosed in <a> tags

I've been experimenting with pure CSS (Bootstrap 4) to create a tiled gallery layout. To achieve this, I've been utilizing the flexbox capabilities provided by Bootstrap through classes like d-flex and flex-wrap.

While everything seems to be working smoothly when using only <img> tags, I encountered an issue when trying to enclose the images within an <a> tag in order to link them to a lightbox - it seems to disrupt the gallery's display.

To better illustrate the problem, here's a snippet of my code: https://codepen.io/cray_code/pen/RMrbzK

I have attempted applying similar CSS styles as used for the img tags, but unfortunately, it hasn't resolved the issue.

As an additional inquiry, I'm wondering if there is a way to enforce a two-column layout for the gallery. The final image appears almost square, yet displays as a widescreen rectangle.

twitter-bootstrapcssflexboxbootstrap-4

Answer №1

If you want to achieve your goal, consider transforming the <a> tag into a flex item and flex container simultaneously. Try incorporating this CSS style:

.img-gallery a {
    flex-grow: 1;
    display:flex;
}

Check out the latest version on CodePen

Answer №2

Ensure the links also have the display:flex property:

Visit example.com

.link-list a {font-size: 16px; color: #333;}

.link-list > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

Issues with CSS3 Animation failing to trigger upon hovering over links

Background: Looking to design a visually appealing hover effect for links in the future Current Demo Link: You can view the demo here specifically on Firefox Browser. body { color:#ffffff; font-family:"Helvetica"; font-size:12pt; backgr ...

htmlcsscss-animations

Displaying negative values highlighted in red on Datatables platform

After successfully integrating the datatables on my VF page, I now have one final requirement: to display any negative values in red and bold within numerical columns. In my Salesforce implementation, I am using <apex:datatable> for my table. Each nu ...

jqueryhtmlcsssalesforcedatatables

The initial Bootstrap row stands out among the rest

Having an issue with my Bootstrap 4 page layout, as shown in the screenshot below. The first row appears compressed while the subsequent rows adjust properly for mobile view. I've tried different solutions but can't seem to fix it. Any suggestion ...

twitter-bootstrapmobiletwitter-bootstrap-4

Adjusting div height as you scroll down the page

Hello, I am new to CSS and I have encountered an issue with setting the height of a div element to 100%. When the list on my page exceeds the size of the page, the div is no longer visible when scrolling. Do you have any ideas on how to fix this? Here is t ...

cssasp.net-mvc

remove a section from the main body

body { display: flex; justify-content: center; align-items: center; background: #0e1538; } <canvas id="spaceholder" width="804" height="604"></canvas> </div> <div class="MenüCenter"> <canvas id="canvas" width="800" ...

javascripthtmlcss

Tips for resolving the issue with "Text Animation"

Could someone please help with fixing this CSS animation? I want to align the text animation to the paragraph properly. I'm not confident if I am approaching this in the correct way, so if there is a simpler solution out there, I would appreciate lea ...

htmlcsstextcss-animations

Fixed positioning upon scrolling begins prior to reaching the uppermost point (top div)

Currently, I have implemented a feature where #filter (the white select list in my sidebar) becomes fixed when it reaches the top of the page and stays there while scrolling until it reaches the footer and is released. However, I encountered an issue wit ...

javascriptcsspositionfixed

What is the best way to customize the endIcon of a styled-component button?

Presented here is a neatly styled button I've created import styled from 'styled-components'; import Button from '@material-ui/core/Button'; import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; const MyB ...

cssreactjsmaterial-uistyled-components

How to Exclude ress.css in Vuetify.js

How can I prevent ress.css from conflicting with Bootstrap and my custom styles in Vuetify? I attempted to remove it from the Vuetify directory within node_modules, but that did not resolve the issue. ...

javascriptcsslaravelnpmvuetify.js

Resolved issue with fixed div flickering upon clicking link on Phonegap platform, leveraging Bootstrap

Upon attempting to click a link positioned at the bottom of the screen within a colored div using position:fixed;, I notice that the page momentarily flashes white before displaying the "new" page. Removing the fixed positioning allows the new page to load ...

htmlcsstwitter-bootstrapcordova

Troubleshooting jQuery masonry problem related to initial display and height settings

Within a div, there is a masonry container with the inline style property display:none. With several divs on the page, clicking their respective buttons during load causes them to switch like a slideshow. This disrupts masonry's ability to calculate t ...

javascriptcssheightjquery-masonry

Implement a maximum height restriction on the children of the Select component in Material-UI

Currently, I am working with the Material-UI react library to create Dropdown menus by utilizing components like <FormControl>, <Select>, and <MenuItem>. The options array for these dropdown menus is quite extensive, and I am looking to s ...

cssreactjsmaterial-ui

Navigating through Expression Engine and utilizing conditional statements

Would greatly appreciate some assistance with this issue. I am working on an Expression Engine website and encountering difficulties with simple conditionals for navigation active states. Despite having a color state designated within the styles, there s ...

cssnavigationexpressionengineconditional-statements

What is the best way to position three SVG files in the center of a webpage?

I want to combine three separate SVG files to create one single graphic. The first SVG file is a red triangle, the second is a blue circle inside the triangle, and the third is a purple rectangle beneath the triangle with a little space in between. My obje ...

htmlcss

Tips for effectively utilizing the display:none property to conceal elements and permanently eliminate them from the DOM

While working on my website, I utilized CSS media queries to hide certain elements by using display: none. Even though this effectively hides the element from view, it still lingers in the DOM. Is there a way to completely eliminate the element from the ...

javascriptjquerycss

sequentially animating elements using animate css in a choreographed manner

I have created a unique jsfiddle with 20 boxes that I am trying to animate using the Animate.css plugin. The plugin can be found at daneden.me/animate. My goal is to animate each box one after the other in a sequential manner, but I seem to be having trou ...

javascriptjquerycsscss-transitions

Are there any real-world examples you can share of utilizing CSS 3D Transforms?

Can you provide any instances of CSS 3D Transforms being utilized in real-world projects besides and ? ...

csscss-transforms

Is it feasible to display a message for a certain duration without using the alert() function upon clicking a button?

I'm working on a NEXT.JS project and I need to display a <p> element under my button for a specific duration before it disappears. I don't want to use the alert() function. Any suggestions on how to achieve this? ...

javascripthtmlcss

How to create a stylish border line to separate rows using CSS

Having some trouble with HTML code... <table class="table table-condensed order-statistics"> <tr class="order-statistics-row"> <div class="row"> <div class="col-lg-4"> Order ID: </div> <div ...

htmlcss

A guide to implementing hover and mouse click effects on ImageList using Material UI version 5.11.11

I have successfully created a list of images using MaterialUI, but now I would like to enhance the user experience by adding a mouse hover effect to highlight the image under the cursor. Below is the code snippet for my image list. How can I accomplish t ...

cssreactjsmaterial-uihover