Hi there, trying to complete the personal portfolio project using HTML and CSS only.
I have added href codepen links to my thumbnails but cant seem to get them to work when I change the width or height using CSS. Or even change the margin /padding.
Any ideas on how this can be achieved?
Also, how can I ensure the links are only clickable within the image?
I have also tried to remove the images and keep the links separately but they don’t seem to work if the images are moved to the right hand side of the page and the text links are at the bottom.
You have a position of fixed on your navbar which makes it … well fixed to that position no matter how much you change the screen size.
There is a better way to lay out elements if they are in one dimension. You can use flexbox for that. Here’s an article if you want to learn how it works.
can you be specific about what you mean by this, images are appreciated.
I also noticed that you had the navbar way down in your code inside the main tag and you were using fixed positioning to get it to the top. The main tag is a special element which is used by screen readers to help the disabled find out the dominant content of a webpage which is why it should not contain any unnecessary information such as nav links or sidebars.
You should not have the navbar way down in your code either because screen readers read out the html and then figure out the content. With the way you’re doing this, they will not be able to use the navbar until or unless they have skimmed over half of the webpage.
Hi @staranbeer thanks for replying. So I had to use position: fixed in order to keep the navbar at the top of the viewport and pass the test for the project, rather than CSS flexbox.
I took onboard your feedback in regards to the main tags. Thanks!
I am actually referring to my thumbnails underneath the title on the page. If you take a look in full screen mode, when i click the two images on the right hand of the screen, they do not lead to the codepen links I have attached to them and I cant seem to get them to work.
In terms of making links clickable within the image, I meant, can you change where on the image the link can be accessed and clicked by the user? By making sure its not possible to click slightly out of the border of the image to access the link.
You can use flexbox in conjunction with position: fixed. Most of the elements in CSS have a inner display type and outer display type. The inner display type dictates how the content inside it is going to style and outer display of an element dictates how that element interacts with its surrounding elements.
By setting a container to display: flex, you set it’s inner display type to flexbox which in turn makes its children into flex items and you can style them using properties such as justify-conent and align-items . However the outer display type is still box which is why it takes the width of the whole container.
So basically position: fixed will target the element itself and the flex will target its children which is what you want to style.
This is not what i meant when i said keep only the important parts in the main tag. You should definitely have all the sections except the footer, header, navbars and sidebars inside the main tag.
Flexbox is a way to layout elements inside of a container. so when you say
.project-tile{
display: flex;
}
it is turning each and every project tile into a flexbox container and chaning its children’s position and setting their width to whole contianer which is why you’re facing this problem.
Remove the display: flex from each project tile instead use it on the container which in this case is .projects i think.
@staranbeer Hi, I have adjusted the main tags, hope they are okay now. I used align-items but as you can see the thumbnails are still not clickable, even though I used flexbox this time. What else can I do ?
They aren’t clickable because your navbar lies above them, you’ve given it a height of 100vh. If you give your nav a border, you can see exactly which project tiles it’s covering.
