Why is my final image in the CSS Grid still showing up bigger than the rest?

I am currently facing a CSS Grid issue in my portfolio project. Whenever I switch to grid layout during a media query @700px, the last image in my .featured section appears larger compared to the others.

This problem arose when I decided to change the layout of my .featured section from flex to grid format. It's hindering the overall look and feel of my portfolio.

If anyone can provide insight into what might be causing this anomaly, I would greatly appreciate it. I've been stuck trying to troubleshoot this on my own with no luck so far. Thank you!

For reference, here is the link and code to my page: https://codepen.io/elcapitan23/pen/wxpmYP

You can also view a screenshot of the issue here: Portfolio

htmlcsscss-grid

Answer №1

The CSS rule .featured-item is causing issues due to the last-child style.

 .featured-item:last-child {
   margin-right: 4px;
 }

To fix this problem, you can either remove the .featured-item class or override the last div's style.

Check out the code on CodePen

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

Closing the menu on image click in Ionic 2

If you're using Ionic 2, you have the ability to include the menuClose directive on a button to automatically close the side menu when the button is clicked. However, what if you want to close the menu when an image is clicked instead of a button ...

javascripthtmlionic2

Creating Diverse Pages with Unique Variables on Identical Layouts in Jekyll

I am currently using Jekyll to create static HTML pages, but I want to have the ability to generate similar layouts with different variables. Let me provide a simple example to illustrate my point: _config.yml title: Foo and Bar Generated index.html &l ...

htmljekyll

Tips on displaying dynamic content on a single page with AngularJS 1.6

Just getting started with Angular and looking for a way to display dynamic content from a JSON file using AngularJS 1.6? Here's an example to help you out. News.json { "Articles": [ { "Title": "News 1", ...

javascripthtmlangularjsjson

Using jQuery to toggle visibility on click within WordPress

Looking for a way to make three buttons change color on hover and display different content when clicked? You're not alone! Despite searching through tutorials and forums, the solution remains elusive. The buttons are structured like this: <div i ...

javascriptjquerycsshtmlwordpress

Utilizing the Masonry jQuery plugin for optimizing empty spaces

Recently, I came across the Masonry plugin and I'm considering using it in a project. One question that intrigues me is whether there is a way to detect empty spaces that occasionally show up in the layout when divs are positioned. Being able to ident ...

javascriptjqueryhtmlcssjquery-masonry

Tips for Bridging the Space in a Horizontal Bootstrap Card

I'm in the process of designing a website that features a horizontal bootstrap card. I'm trying to figure out how to make the image on the left side of the card fill the full height of that section. Here's the code I'm working with: & ...

htmlcssbootstrap-4

Stop rows from causing the table to stretch in width

We have a unique table structure where the first row contains two cells and the second row contains only one cell. The width of each cell is determined by its content. Our goal is to prevent the cell in the second row from expanding the overall table widt ...

htmlcsshtml-tablewidthcell

Issue with integrating Bootstrap 4 toolkit within Angular ngFor causing unexpected behavior

I have encountered a peculiar problem with the bootstrap toolkit while using it inside ngFor. When I hover, there is a delay in displaying the toolkit title and the CSS does not seem to be applied correctly. This issue is illustrated in the screenshot prov ...

cssangularbootstrap-4angular5

Encountering a problem creating a hover overlay effect on a transparent PNG image within a parent div that has a background color

I'm struggling with creating an overlay hover effect on an image that has transparency. The issue I'm facing is that the black background of the parent div element is filling in the transparent parts of the PNG image, making it look like those ar ...

htmlcsspngoverlaytransparency

Is there a way to insert a dot after every two digits in a text field using Javascript upon keypress?

When inputting a 4-digit number (e.g. 1234) in my text field with value format 00.00, I want it to automatically adjust to the 12.34 format. How can I achieve this behavior using JavaScript on keyup event? ...

javascriptjqueryhtmlcss

Automatic Addition of Row Numbers Enabled

I'm currently exploring coding and experimenting with creating a scorekeeper for family games. I've managed to add rows dynamically and automatically sum up the entered information in the "total" row at the bottom. However, I'm facing an iss ...

javascriptjqueryhtmlcss

Issues with jQuery slider's fadeIn and fadeOut functionalities are causing unexpected behavior

A question surfaced when implementing a jQuery slider with the help of another user on this website. The issue arose when transitioning the code from the working fiddle to my computer, resulting in a problem that needs addressing. Here is the original fidd ...

jqueryhtmlcsstransitionsmoothing

Effortless navigation with smooth scrolling on anchor links in react/next.js

Can smooth scrolling be achieved using only CSS when clicking on an anchor link within a react component? ... render( <a href="#smooth-link">Link To There</a> .... <div id="smooth-link"> .... ...

javascriptcssreactjsnext.js

Change the color of the text to be the opposite of the background

I'm facing a challenge while creating a website for my friend. The background of the site is a moving image, and I want the font color of the main title to be the opposite of it on each frame. While I know this may require CSS, I am unsure of how to ...

htmlcss

Every DIV is filled with HTML and CSS

My navigation bar currently has icons placed at the center of a DIV, but I would like to fill up the entire DIV without any spaces left on the sides. The HTML code for the DIV containing the icons is as follows: <nav class="navbar navbar-expand navbar ...

htmlcssreactjsbootstrap-4react-bootstrap

Designing a dropdown menu with sub-menus that appear when hovered over

In my quest to design CSS that will dynamically display links in left-to-right divs, I am seeking a way for sub-menus to appear below the menu being rolled over. The challenge lies in the fact that these menus will be loaded from a WordPress database, mean ...

htmlcsswordpressdrop-down-menunavigation

Is there a way to show the "@" symbol in the browser's address bar instead of it being encoded as "%40" through url

I recently encountered an issue while working on a Python3 (Flask) project with UTF-8 encoding. I tried using this line of code: @app.route('/@<username>', methods=['GET', 'POST']) However, whenever I enter the URL in ...

pythonhtmlurlflask

Applying custom CSS designs to images using Thymeleaf

Currently working on a web application using Spring MVC and Thymeleaf for templating. I'm struggling to figure out how to apply rules to an image, especially when using an external CSS file. I have tested code that works: page.html <a class="nav ...

htmlcsstwitter-bootstrapspring-mvcthymeleaf

What is the best way to position a <label> to the left of an <input> field?

Examining the HTML and CSS code below: * { box-sizing: border-box; } .field { overflow: auto; } .field label { float: left; width: 80px; } .field input { display: block; width: 100%; } <div class="field"> <label>Test< ...

cssformscss-float

Troubleshooting the onExited callback issue with Popover component in Material UI

<Popover key={element.name} classes={{ paper: classes.paper }} open={open} anchorEl={this.myRef.current} anchorOrigin={{ vertical: ' ...

javascripthtmlcssreactjsmaterial-ui