Hi all, I feel like I’m at a dead end and completely frustrated. I feel like I’m over looking something really simple, but I can’t put my finger on it. I have hit all the marks on the Tribute page assignment, but trying to add some “flair”.
Basically I want a second image on the page with a list to the left. I can’t seem to figure it out. The solutions I’ve tried entail making a container but the image won’t resize, so it’s huge. Here’s a link to my codepen. What is wrong here?
First time posting to the forum. Wasn’t sure where else to go.
Are you pasting SCSS but using CSS interpreter? The ampersand thing won’t work. (maybe just codepen does not switch automatically, i’m not sure)
And, is that only your second image you want to fix?
(i guess it is, and I guess you’ll fix the scss and then, check out object-fit property, it might help you out)
Did you analyze the html? That might help too.
In case I’m not missing something (could very well be), there are unclosed groups (use the ‘Analyze css’ tool)
First things first: It pass the test.
A couple of things you maybe should pay some attention to:
It is only the top image that is responsive, the second image and the heading is not. For the <h1> element you could consider using a scale that is dynamic somehow and make sure it does not overlap the top image.
Make the second image responsive.
Both images is very dominant, maybe scale them down a bit so the text get a little more room.
In my opinion it is good practice to not use px as scale for fonts or basically anything else but this can start a discussion so lets get the helmets on now
/Jakob
Thanks for the response! I wanted the first image a bit dominant, with the text overlaid. However, I would like it to scale with the image, as you mentioned.
For now my biggest concern is the second image. Agreed it is super dominant. I want it to be less than 50% and responsive, but I must be missing something, b/c I can’t get css to resize it. I am also trying to get it to be aligned to the right with the text to the left.
Thanks for the response. I hate to say it, but not sure what you mean by the first question. I came across a possible solution on a Medium post about nearly exactly what I was hoping to do, with image and text side by side, and tried to apply it to mine using some of their codepen. I don’t know why it won’t work. Basically I’m posting a small portion of this guy’s css into mine and making adjustments, but not sure what’s wrong.
Yes, I’m trying to make the second image responsive and keep text along side it. I wanted them to maybe be in their own columns, but at this point, I don’t think I’d mind the text wrapping around it.
Analyzed both HTML and CSS and just noticed the unclosed block in CSS, so thanks for that. Didn’t seem to do anything, though.
I’ll keep plugging away, but wasn’t sure where else to turn. I appreciate the help. Was hoping to do all this on my own and just figure it out, but clearly I’m still starting out and I remember people suggesting to reach out for help if need be, so here I am. It just feels like I have to be missing something very obvious here and don’t know what it is.
What you are copying there isn’t CSS, it’s a slightly different language called SCSS or SASS, so your code is not fully understood by codepen in the actual set up.
Particularly, the ampersand & has no meaning at all in CSS, so the code is being skipped.
I will just translate your code to CSS and pass the codepen over here. Gime me a couple of minutes.
You are using SCSS but you didn’t set up the pen to use SCSS. Click the cogwheel on the top left of the CSS code box and from the CSS Preprocessor dropdown menu select SCSS.
If you do not know SCSS and the BEM naming convention I’d suggest not using the CSS, as you will not understand what it is doing, and copy-pasting code you do not understand is not ever a good idea. Either learn SCSS/BEM or find some other CSS code to help you get what you want.
One option you also have is after having set the Preprocessor, click the down arrow on the CSS code box and select “View Compiled CSS”. That will show you the plain CSS, you can copy it and use that instead.
On the top image, you have just set the max-width on the image to 100% and the image is 1799x1200 so it will be very big. You can set the max-width to a fixed max pixel value and set the width to 100%. You also need to use an auto margin to center it.
Hope it is. Feel free to ask anything else. And although I don’t think copying and pasting is a bad idea, I’d suggest you to play a bit with the code, and see what happpens when you make changes, trying to understand them.
You can go back to the curriculum, or ask here the same than now. That’s perfectly fine.
Cool. Thanks for the breakdown of SCSS. I didn’t realize that was what it was written in. I will do some more digging in that. Trying not to divert too much from the lessons up to this point, but was trying to find a relevant solution.
Thanks again. I think we’re making progress. Really trying to not get in the habit of copying and pasting. The idea was to do so, but then play around to get the result I was looking for.
As of now, the image is still very large and i’m trying to get the image and text to swap sides. I’ll go back a few lessons to recap. Just struggling with why I can’t seem to be able to resize the second image, the one in the container. I thought setting the max-width to 50% would do the trick, but no. Even the width:300; doesn’t seem to do anything.
I thought align-self: flex-end; as opposed to flex-start might solve the image to the right vs left issue, but nope.
In the html create a div, with an image and a paragraph tag as children.
Give the div a class of flexcontainer, and the children flexchildren.
Use the flexcontainer class to display:flex, and flex-direction should be set to row.
Give the image a percentage with, for example width: 50%.
To help you start, I provide a boilerplate:
<div class='add the class here'>
<img class='add children class' src='add the source' alt='a description here' />
<p class='add same class than image'>And a desription here</p>
</div>
So you have to complete that markup and create the css.
The final result I’d like to see, is an image with text on the side, both of them inside a flexcontainer, with a dotted border.
Off topic: Are you a photographer? Your pictures look amazing. Or are you taking them from somebody else?
You did it. The crazy sob did it. So, aside from missing a closing block in my css (on top of using scss), I didn’t realize that the order of the html for the second image and the corresponding text mattered all that much. I had my image first and the ul second in html, and that was throwing off my result. I figured it was something I could adjust in css, and while that may be the case (or not), it’s nice to confirm that the actual order of the html, at least in a container, matters.
Still have some tweaking to do on this page, but you have helped me out considerably. It may seem insignificant, and I know this is serious noob territory, but I’m grateful.
I will get cracking on that new pen tonight. Can I ask why that specific exercise ?
Off topic: Yes, I am. I appreciate that. Those aren’t the greatest shots of him, but just wanted to get some stuff on the site to to use for this project. I am a freelancer, and been wanting to mess with some code for my own site, but with all the lockdowns and budgeting issues photo shoots have been delayed for a while. Trying to keep busy and learn some new skills. Maybe something I can do from home, y’know?
After knocking out some other work, I was finally able to get back to this project. Didn’t take very long, which I’ll take as a good sign. Messed around with the formatting a little. Going to keep practicing. This may be a dumb question, but you think flexbox and grids are worth knowing well and using frequently? Flexbox codepen
I believe if you take pictures, you will use both very frequently. Usually, an array of pictures is a grid, and each element in a grid could be an image with a description, which might (or not) be a flexible box.
Nowadays people are still learning thousands of frameworks, and please, I’m not authority (not even a developer) but I believe it’s way better to learn the fundamentals. Grids and flexbox are the best tools right now and replace most frameworks.
Cool. I do have one other question. I commented it out in my pen. Basically trying to see what the best way to align the text would be, in your estimation. Wondering if I should style each part in the P, or make each part it’s own P, or something else. Maybe make a grid? Anyway, if you could take a look at that, that’d be awesome. Thanks
