CSS help with card alignment

Learning Challenge - HTML / CSS Assessment

Question - Most of my code is working however I need some help styling the card portion. 1. The desert photo is wider than the profile part. 2. The card is not lining up with the form, the alignment seems to be in the center instead of left. 3. I cannot get the Title text to appear inline with the Avatar photo

What I’ve tried - I have played around with the values, the padding, alignment, however something seems to be over riding the settings I change. I am super new to HTML, just learning the syntax & methods. Some more information about box sizing or suggestions on how to line up the card with the form would be appreciated

Screenshots

1 Like

I’m having the same issue!

1 Like

Update I’ve cleaned up the code a bit and have made some progress. Still not getting the desert image to exactly fit, and the Card alignment is different than the forms. How do i get the card to align better with the form? And is there something im not linking properly from my HTML code to control the desert image’s size?

thank you

Hi Ayla, and welcome to the community!

It looks like you are super close to figuring out that card styling. Really nice job so far!

As I look at your code, I notice a few things related to the desert image. I notice you have nested <div> elements around your image (<div class="card"> and within it, <div class="card">).

When we’re trying to line things up, it’s really important to think about our elements in terms of parent containers and child elements. In this case, you would have the div.card (a parent), div.desert (a child of card, and parent of the image), and the image itself (a direct child of div.desert).

So, to troubleshoot the type of issue that you’re running into, trying to get the image to fill the width of the parent container, you need to analyze this nesting of divs and make sure you are applying css to the right selectors. I see some css code for the image, and for .card, but I don’t see any css code for .desert.

So, if I had your files to play around in, I would try the following:

  • Try removing the <div class="desert"> element from the HTML file, OR try applying css code directly to .desert. That way you would be dealing with a direct parent-child relationship.
  • Try out some of the other values for setting max-width. For example, if you try “inherit”, it will inherit the max-width you set for its parent element.

For aligning the form and the card together, you can think about a similar parent-child concept. If you create a <div> that surrounds the form and card, you can style that to set the same alignment values to both children.

Let me know if any of these ideas help.
Jesse

Thank you for the help! Passed my assessment :slight_smile:

1 Like