My Responsive Website Project - The Tea Cozy Website

Web Development Full-Stack
1

Hey Folks,

This is my first and undoubtably not my last call for help.

I’m working on the responsive website project and I’ve got proper turned around when trying to get the text to go across the top of image. Have you guys got any suggestions to point me in the right direction?

Trying to build this site has got me questioning wether I’ve actually absorbed all that I’ve learned over the last 4 weeks.

Thank you

Adam

2

Hi there!

Typically, a block element (like div) will stretch horizontally across the width of its parent container. However, when an element is absolutely positioned, its width is set to hug its content. So, now, you need to readjust the width of mission-text so that it stretches across the entirety of its parent.

Catch my drift? :wink:

2 Likes
3

I also train in creating websites in HTML and often use artificial intelligence to create websites (there are special programs)! But here you really need to think about width of its parent container!

1 Like
4

Hi Adam,

@kirativewd is right. In addition to that, always carefully used the positional css properties on elements.
Except you have a very convincing reason to style parent-child elements in a special way.

I will spoon-feed you. Change the position property value in your .mission-text class reference from absolute to relative and you are good to go.

.mission-text{
margin: auto;
text-align: center;
background-color: black;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

1 Like
5

Hi there

I am also going to reach out for some help on this project. It seems no matter what I try I cant get the underlined navigation on the top right hand side of the page to go into the parent container. I feel a little stupid because I have got this far but I am not winning. This project is taking quite a while for me, but I really want to get it right and figure out what I am missing. I have eventually resorted to a

element, but I was probably supposed to stick to the list element

  • , this is my html code

    Mission

    Featured Tea

    Locations

    and this is my css

    .childtwo {
    display: flex;
    justify-content: flex-end;
    flex: 1 1 100px;
    align-content: center;
    align-items: center;
    }

    tell me where am I having a blonde moment, clearly I cant see it. I know there are many different ways, but please just give me some guidance on where I am going wrong.

    Thanks in advance

    Sam

    • 6

    Thank you, that sorted it right out. :pray:

    7

    Thank you, that’s sorted it out.

    8

    Hey, How are you getting on with the project?

    Did you use the tag for the underlined navigation? The text was underlined and I just had to change the colour from the blue it came as.

    Hope that helps?

    Adam