I recently created a portfolio that showcases my work through a grid of images. My intention was for each image to link to another page providing more details about the project when clicked.
However, I am encountering an issue where the anchor tags are not functioning as links and cannot be clicked.
.work {
width: 100%;
margin-top: 50px; }
To see the problem in action, you can view this JS Fiddle - http://jsfiddle.net/tomwalshx/3msa75a6/
The issue is arising from the images being floated inside the links, causing the links to have a size of 0x0. The solution is to float the links themselves (and include display: block;): http://jsfiddle.net/3msa75a6/1/ (I also added overflow: hidden; to .work for "clearfix" + removed media queries which can be re-added if necessary)
.work a {
display: block;
float: left;
max-width: 25%;
}
.work img {
display: block;
max-width: 100%;
}
Note: By using display: block; on the images, it ignores properties like line-height, preventing unwanted spacing (you'll notice the difference when tried without).
Your main issue lies in using non-existent HTML elements, such as
<div class="container">
<img src="http://walshx.com/portfolio/img/logo.png" id="logo">
</container>
Instead of </container>, you should use </div>. The same mistake occurred with footer.
Once I fixed the HTML code, there was no need to make any changes to the CSS for it to function correctly as intended: http://jsfiddle.net/3msa75a6/7/
My website, using bootstrap, has a unique layout consisting of two columns side by side on desktop. In each column, the content is statically stacked with div elements of varying heights: A | B A | D C | D E | F E Currently, I have set up this layout by ...
[ {"id":1,"label":"Node 2"}, {"id":2,"label":"Node 3"}, {"id":3,"label":"Node 4"}, {"id":4,"label":"Node 5"} ] Hello there! The function getArray() in the code snippet above is returning the specified string ↑. I need help connecting this data w ...
The image above the footer is not displaying properly. Screenshot: Image appears below the footer https://i.stack.imgur.com/RvSqI.png Source Code .footer-area { background-position: center; position: relative; z-index: 5; } .footer-area::before { ...
As a current bootcamp student, I have a question about passing the index of a for loop to another function. Specifically, I am trying to fetch data from an API (which provides me with a random cryptocurrency from an array) 4 times and then pass that data ...
How can I modify the menu bar to include a log out button on the right side? Here is the current code: <main> <AppBar> <Toolbar> <Typography style={{ marginRight: 16 }} variant="h6" className=" ...
I am looking to create a functionality where a div rotates when the mouse enters it and returns to its original position when the mouse leaves. Everything works fine when interacting with one div, but as soon as I try hovering over other divs, it starts gl ...
While working on a friend's website, I came across an advertisement that covers the entire background of the site. The current background image is set using CSS: body { background-attachment:scroll; background-color:#000000; background-image:url("htt ...
I'm attempting to add a number from an input field to the URL in a link. Currently, my code is replacing the entire URL instead of simply adding to the end of it: <input id='customquantity' type='number'></input> < ...
I have been developing a React website with the following file structure: public: index.html second.html src: index.js second.js table.js forms.js The main page (index.js) contains both a form and a table. One of the columns in the table has a link t ...
I want to streamline my CSS file by setting up generic variables that can be used throughout to ensure consistency and organization. For example: @shadow: 6px 6px 10px rgba(0,0,0,0.2); .shadow { box-shadow: @shadow inset; } However, when I try to a ...
I have collected responses from a survey I created and now I want to showcase the results. The responses are rated on a scale from 1 to 5, and I would like to display them similar to the screenshot. Each number should be presented within a square, with ...
I'm currently attempting to vertical align/center some images within a div, but it's not coming out perfectly. The images seem to be slightly too low to be considered vertically centered. What could be causing this issue? .Container { wid ...
Is it possible to pass the declaration of one mixin or style to another mixin as an input parameter? Consider the following example involving animation keyframes. This is how keyframes are typically defined in pure CSS: @-moz-keyframes some-name { fr ...
Attempting to create a responsive page with two distinct sections at this example link including: Map View Table View Both of these views (table and map divs) need to be responsive without a hard-coded height, so the size of the map div adjusts automatic ...
I attempted to create divs in which hovering over one side would cause the opposite text to disappear. The functionality works flawlessly when hovering over the left text, as the right text disappears as intended. However, it is not working in the reverse ...
I am attempting to create a multi-select feature with only one horizontal scroll bar using bootstrap. However, I do not want each option to have its own horizontal scrollbar. When I choose the longest option (123456789012345678901234567890), only part of ...
I am currently working on a website that includes an embedded Vimeo video. The majority of our target audience uses IE8 or older, and interestingly enough, most of them have their browsers zoomed to 125% view. Unfortunately, while everything else on the si ...
Currently, I'm in the midst of a project that involves extracting an HTML list from JSON data using JavaScript. The list is being displayed on the logged-in user's profile, showcasing job listings from the JSON data. While I've successfully ...
In my PHP code, I am utilizing file handling to write and then read a PDF file. However, after successfully creating the PDF file, I encounter an issue where I am unable to open it. When attempting to open the file, Adobe Reader displays an error message s ...
I am currently working on a website that I want to ensure is mobile-friendly. When testing it on my phone and in Chrome's device mode, I noticed that the majority of the text on the screen was displayed at an easily readable size without needing to zo ...