The height of the links is too tall for the grid layout

Question

The height of the links is too tall for the grid layout

I'm currently working on incorporating an RSS feed into a grid layout within a div, but unfortunately, they don't seem to be aligning perfectly.

Check out my Website

Here is the CSS code I am using:

#rss-5 ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
grid-gap: 10px 10px;
border-left: 1px solid rgba(255,255,255,.2);
}

#rss-5 ul li {
padding: 0;
border-bottom: none;
}

#rss-5 ul li a.rsswidget {
display:inline-block;
width:90%;
height:90%;
color: #454545;
transition: 0.5s;
padding: 5% 5% 5% 5%;
border-radius: 4px;
border: 3px solid #4ED4B5;
font-family: 'Josefin sans';
font-size: 18px;
}

Thank you in advance for any assistance you can provide!

html css grid

Answer 1

Answer №1

If my interpretation is correct, you are looking to have the black box displayed over the image? To achieve this effect, you must assign a position of absolute to the wrap element, which essentially instructs it to ignore the other elements on the page and not be influenced by them. Additionally, you should apply a position of relative to its parent element, in this case the slides, to establish that the absolutely positioned element is only related to its parent.

.slides{
    position: relative;
}
.caption-wrap {
    position: absolute;
}

Here is a screenshot for reference

Answer 2

If my interpretation is correct, you are looking to have the black box displayed over the image? To achieve this effect, you must assign a position of absolute to the wrap element, which essentially instructs it to ignore the other elements on the page and not be influenced by them. Additionally, you should apply a position of relative to its parent element, in this case the slides, to establish that the absolutely positioned element is only related to its parent.

.slides{
    position: relative;
}
.caption-wrap {
    position: absolute;
}

Here is a screenshot for reference

The height of the links is too tall for the grid layout

Answer №1

Similar questions

The implementation of display flex is causing issues with the material-ui grid layout

Module specifiers that are considered relative must always commence with either "./", "../", or just "/"

Using a responsive menu (mmenu) can lead to an increase in Cumulative Layout

I am having trouble locating the body tag on the website omegle.com when using the JavaScript console

What would be the best way to display a label once the zoom level exceeds a certain threshold in Leaflet?

It's perfectly fine to use CSS href online, but when attempting to download the CSS file and use it locally, it doesn't seem to

Can you guide me on implementing an onclick event using HTML, CSS, and JavaScript?

What is the best way to eliminate the focus border using a vendor prefix?

View the selected radio buttons and checkboxes next to each other in real-time before finalizing and submitting

Testing a feature in Angular that modifies a variable

Fetching Information From Database Using PHP

Update the image within the svg tag

What could be the reason for Firefox cutting off circular PNG images at the bottom?

Can AJAX be used when submitting an HTML form with a select input field?

Tips for changing the CSS properties of input elements in iView

Tips for extracting both the div and entire inner content using JavaScript

What method does Apple use to apply overflow:hidden to elements within position:fixed?

The script is malfunctioning on Google Chrome

JS Emphasis on Scrolling Div

I created a website on a Windows operating system, but when I opened it on Linux, it was completely distorted. What