This is the link to the portfolio: " https://codepen.io/ssoliman/pen/qwOLPR?editors=1100"
I need help in three parts:
1- I can’t make the background image in different device sizes to remain as it is and scale to become smaller but with keeping all its features , not cropping parts of it … How can I do that , please.
2- And in the bottom nav bar , I can’t put the freecode camp image beside the linkedin one , in the bar
3- In the projects part: I can’t remove that when I hover over the caption it turns blue and underlined, when i use (text-decoration :none) nothing happens.
Appreciate your help.
- If you don’t want an image to get cropped you can use
background-size: contain, but I don’t think that’s the look you’re after. If you want the image to always cover the full width of your welcome section you either have to let it get cropped (as with background-size: cover) or you have to stretch it.
Edit: alternatively, I suppose you could ensure the aspect ratio of your welcome section is the same as your background image.
Thanks for your reply, I am already using “cover” but when I resize it is doesn’t work,
Do you know ; if I added media rule for each size, will that keep the image as it is?
Cover will crop the image where it’s larger than container. How about this? Is this the look you’re going for?
background-size: 100% 100%;
I didn’t calculate what #welcome-section height and width should be to match your picture’s aspect ratio, but I kinda eyeballed it.
PS: removing height: 10% from .fixed-bottom rules seems to resolve issue #2.
Thank you very very much. They have both worked.
I made the height: 70vh, to make the grass part in pic appear. And if I want to decrease the height of the .fixed-bottom, what should I do.
Thanks again for your help
No problem. By removing the height from .fixed-bottom we essentially set it to auto, meaning its height is dictated by its children (linkedin & fcc icon, etc). If you want you could put it back in there and set it to whatever, like 10vh or 50px for example. Thing is, your icons won’t resize with it because their height and width is specified in pixels rather than relative units. Same goes for their margin. There are ways you could fix this, though. The quickest, without redoing a lot of your code, might be to just give your .fixed-bottom and all its children relative units for their heights and/or width. Maybe give .fixed-bottom height of 10vh, but your icons a height of 8vh (for example).
Hey there! For your 3rd issue you have a couple of options to change it. You’re first one is creating a class for your link. Here is what I did and tested on your page.
<a class="project-link" href="https://codepen.io/ssoliman/full/oVKvxz" target="blank">
<h4> Survey Form <br> <span class="h4-span">(freecodecamp)</span></h4></a>
I also moved the link to be nesting only the h4 element instead of the whole div. If that was how you wanted it then it should work either way by adding a class.
You’re second option is to nest the image in the link so when you click on the image it takes you to the project which should have no affect on the text.
<a class="project-link" href="https://codepen.io/ssoliman/full/oVKvxz" target="blank"><img src="https://i.postimg.cc/FKBJfGpD/survey-project.jpg" alt="Project 3" class="portrait" id="survey-pic"></a>
Hope this helps!
I tried to change the heights but can’t change the padding-bottom so I removed it…
But ,there is another problem, the background image is now correct but now I can’t pass the test of the viewport height.
Sorry for bothering you Artem. Really sorry
Than you very much
Thanks a lot, the 2nd option worked. It is un-clickable but it looks better than before. Thank you very much for your help.
No problem. I just looked at the challenge requirements and see that they want #welcome-section to be the height of the viewport, ergo it must have a height of 100vh… So our old solution won’t cut it, because viewport heights vary from device to device (and window to window). You must either allow your image to be cropped when viewed in smaller viewports, allow it to not cover the entire welcome-section, or stretch/squish it.
There is a way you can have some control over how the image gets cropped, using HTML’s picture element. Basically it allows you to link multiple versions of an image with different aspect ratios, and use media queries inside of there to conditionally load one or the other. So you could load a wide version for wider screens, a medium-width version, and a narrow version for mobile, for example.
You mean that I upload different sizes for the picture, for example 1650*1400 for wide then another one for ipad size then another for mobile size and add them in html part. And will I change anything from the CSS in that case?
Yes, you’ll have to change stuff for sure. For one thing, your image will now be in a newly added html element - the picture element, and not simply set as a background-image for welcome-section. You’d also probably want to give your h1 element position: absolute so it can go on top of the picture element.
Hi Artem, I changed the image, there is no problem with the width now (it doesn’t crop), but the height now is the problem.
I will make the picture tag that you said but when I tried to make it, I don’t know what is the width and height for the pic that I should use for each size. for example if the minimum width of the device is 600px, what should be the width and height of image, can you tell me where I can learn more about that because I am confused somehow. Thanks a lot for your help
<meta name="viewport"content=“width=device-width, initial-scale=1.0”>
Add this meta tag inside head tags. Also choose different font . Your content is hard to read.
Thanks Kunal for your help. I have put it but apparently there is something wrong somewhere but thanks a lot.