Euonmymus - practise - justify-content not working

I am practising the css3 that i know and apply it in practise underneath the large them i am trying to flex the items which works however justify-content fails to be applied, doe someone understand what is happening? here is the link:

Do you have a link to the code?

We also need to know exactly where you are trying to do this.

Remember that justify-content is applied to the major axis and align-items does the other. By default these are horizontal and vertical respectively. If you’ve set it to flex-direction column, they will be reversed.

this is the link

I have added a link to the github repository and inserted 2 issues requesting help, here is the link

i had a look at flexbox on css-tricks justify-content is a parent property so im failing to comprehend why it is not working.

The other issue i have is the lorem ipsum box nested inside the large image overlaps the right arrow when you shrink the browser, its not scaleable.

I thin this could be reason my justify-content was not working, the entire width has been allocated to the box.

I still don’t see a link to your code. We can’t really help you if we can’t see what you’ve done. The “github” link just links to this thread.

ok lets try again:)


http://salvatoresaia.com/euonymus/

the challenge i am now faced with is located just after the small images 48x by 48x , what i am struggling is the border bottom just underneath the 2 subheadings, i can’t figure out how to inserted a gap in between.

Sorry, I only see a readme file in that repo. We can’t help you if we can’t see your code.

Hi Kevin,

This is probable because in GitHub you are on the master branch, if you switch to either development or euonymus-test you should see the code.

On the actual webhost if you perform an inspect element you should be able to see the code.

Best Regards

Savatore

Yes, I know how to inspect and element, but when you’re asking people for help, it’s polite to make it as easy as possible for them. Please tell me which branch you are working off of and I’ll see if I can give it a look when I get home.

@kevinSmith

You asked me for the link to the code, if you asked me to share the code i would have happily done so, but i will bear this in mind in future. You can select either the development or euonymus-test branch they both mirror the same code. I also raised an issue on GitHub

<span class=“message-first”> Welcome Message Here </span>

<span class=“message-2nd message–center”> Latest Project Work </span>

.message–center{
margin-left: 27em;
}

.message-2nd {
margin-left: 0;
}

.message-first,
.message-2nd {
font-size: 1.3em;
font-weight: 100;
display: inline-block;
border-bottom: 2px solid #e6e6e6;
padding-bottom: 1.2em;
width: 47.5%;
}

You just need to make it as easy as possible for the people to help you. A link to a git hub repo is OK, but you have to let people know what branch. I’m not sure why anyone would want two identical branches, but OK. A link to your code and a description of where the problem is is often sufficient.

If I understand you, you want to control the space between the words “Welcome Message Here” and the line below it? That is controlled in your message.css:

.message-first,
.message-2nd {
    font-size: 1.3em;
    font-weight: 100;
    display: inline-block;
    border-bottom: 2px solid #e6e6e6;
    padding-bottom: 1.2em;
    width: 47.5%;
}

The line:

    padding-bottom: 1.2em;

You are using the border for the line (in the line above) and here you are setting the padding. The padding is the space outside the content, but inside the border. (And the margin is outside the border.) 1.2em is the distance of 1.2 widths of the letter “m” in whatever font/size you are using. There are other units, but this works. If you want the padding between the subheadings and the line to increase, increase that number.

I would also suggest wrapping those subheadings and the two arrows in their own div. This creates some nice possibilities for organization, but also then you can apply the border to the div and have a continuous line. It’s up to you.

Hi Kevin,

Thank you for your reply, the reason why i have 2 branches and speaking to a previous developer the way they work is they have a developer branch which is treated as the master and child branches hanging off the development one. When their developers was woking on their part they would push their code to their independent branches, once the senior developer was happy they would all deploy onto development. Once the Project leader or requestor would be satisfied it would be deployed onto the master.

Going back to the original situation, the goal is to have a gap in the line between welcome message here and latest project work. The small blue arrows have been placed in a div, for the 2 subheadings as they would be inline i thought it would be more appropriate for them to be placed in a span. Although maybe semantically this is incorrect and maybe they both should be h3’s and style them as inline block. How would you handle this? I have attached a screenshot of the result of the border-bottom.

the reason why i have 2 branches and speaking to a previous developer…

I see three branches, but OK. Yes, I understand that workflow, it’s just that traditionally you would be doing this work on one branch. But OK.

Going back to the original situation, the goal is to have a gap in the line between welcome message here and latest project work.

I’m confused because you do have a gap.

Are you saying you want the gap to match what they have at the site? Is this a clone project?

Assuming that is the case…

The problem I see is that you are “connecting” the lines to the text above. But actually they are related to what’s below. Notice that the line starts and stops exactly at the edge of the images. And also (different from your code) the image fill the entire width of that column - notice its relationship to the text.

So, I imagine two outer columns. These outer columns could also contain the “Welcome…” and “Latest”. Then you have you can have a line going the full width of the column, and have a horizontal padding of 0 and a margin to create the separation. Then within each of those outer columns you would have two inner columns, with the no margin on the outer edge and the pic taking the full width of that inner column.

Alternatively, you could have 4 columns and use padding and margin - between 1 and 2 and between 3 and 4 there would padding but no margin. And then between 2 and 3 it would be the opposite. This would get the desired effect on the lines.

The small blue arrows have been placed in a div, for the 2 subheadings as they would be inline i thought it would be more appropriate for them to be placed in a span.

Sure. span is fine. Forgive me, I mostly work in React Native now so it’s easy to forget all these HTML elements. I’d also like to see more semantic HTML like section, 'header, article, etc. You have some up above but this is clearly a case for a section` wrapper here.

Although maybe semantically this is incorrect and maybe they both should be h3’s and style them as inline block.

Sure, to me the most important question is What is it? There should be an informational hierarchy. Your h1 should be the title, h2 for major section headers, h3 for sub sections, etc. The web search engines look for these things to judge what’s in your page. If you need to change some CSS things like display or font-size or color or whatever - that’s cool. As long as there is a structural hierarchy and hopefully a visual hierarchy.

Hi Kevin,

I probably had an issue in identifying the boxes for the welcome and latest sections, they should have maybe been treated as 2 separate boxes.

The goal is to as best as possible mirror whats in the mockup, i made another attempt to review the semantics, i have modified the code and re-assessed the css i have an issue with the 2nd block to sit parallel with the 1st both blocks have a wrapper set to 50% i attempted to reduce to 45% this did not seem to do the trick, below is an update to the HTML & CSS

HTML

            <div class="welcome-message">
                <section class="welcome-message__container">
                  <h3 class="welcome-message__heading">Welcome Message Here</h3>
                <div class="welcome-message__wrapper">
                  <article class="welcome-message__article">
                      <figure> 
                          <img src="https://via.placeholder.com/225x125" alt="image medium size"/>
                      </figure>
                    <h4 class="welcome-message__subheading"> What We Do </h4>
                    <p class="welcome-message__paragraph"> Vestassapede et donec ut est liberos sus et eget sed eget. Quis queta habitur augue magnisl mag.</p>
                    <a class="welcome-message__link" href="#"> Read More <span> &raquo;</span> </a>
                  </article>
                  <article class="welcome-message__article">
                    <figure> 
                        <img src="https://via.placeholder.com/225x125" alt="image medium size"/>
                    </figure>
                    <h4 class="welcome-message__subheading"> What We Do </h4>
                    <p class="welcome-message__paragraph"> Vestassapede et donec ut est liberos sus et eget sed eget. Quis queta habitur augue magnisl mag.</p>
                    <a class="welcome-message__link" href="#"> Read More <span> &raquo;</span> </a>
                    </article>
                    <article class="welcome-message__article">
                            <h3 class="welcome-message__headingteam"> MEET OUR TEAM</h3>
                        </article>
                        <article class="welcome-message__article">
                            <figure>
                                <img src="https://via.placeholder.com/225x125" alt="image medium size"/>
                            </figure>
                                <h3 class="welcome-message__subheading"> PERSONS NAME </h3>
                                <h4 class="welcome-message__jobtitle"> Managing Director.</h4>
                                <p class="welcome-message__paragraph"> Vestassapede et donec ut est liberos sus et eget sed eget. Quis queta habitur augue magnisl mag.</p>
                                <a class="welcome-message__link" href="#"> View Full Profile <span> &raquo;</span> </a>
                            </article>
                        </div>      
                </section>
            </div> 

            <div class="latest">
                    <section class="latest-container">
                      <h3 class="latest__heading"> Latest Project Work </h3>
                    <div class="latest__wrapper">
                      <article class="latest__article">
                          <figure> 
                              <img src="https://via.placeholder.com/225x125" alt="image medium size"/>
                          </figure>
                        <h4 class="latest__subheading__blue"> Indonctetus facilis</h4>
                        <p class="latest__paragraph"> Vestassapede et donec ut est liberos sus et eget sed eget. Quis queta habitur augue magnisl mag.</p>
                        <a class="latest__link" href="#"> Read More <span> &raquo;</span> </a>
                      </article>
                      <article class="latest__article">
                        <figure> 
                            <img src="https://via.placeholder.com/225x125" alt="image medium size"/>
                        </figure>
                        <h4 class="latest__subheading__blue"> Indonctetus facilis </h4>
                        <p class="latest__paragraph"> Vestassapede et donec ut est liberos sus et eget sed eget. Quis queta habitur augue magnisl mag.</p>
                        <a class="latest__link" href="#"> Read More <span> &raquo;</span> </a>
                        </article>
                        <article class="latest__article">
                            <figure>
                                <img src="https://via.placeholder.com/225x125" alt="image medium size"/>
                            </figure>
                             <h3 class="latest__heading__person"> PERSONS NAME </h3>
                            <h4 class="latest-heading__jobtitle"> Managing Director.</h4>
                            <p class="latest__paragraph"> Vestassapede et donec ut est liberos sus et eget sed eget. Quis queta habitur augue magnisl mag.</p>
                            <a class="latest__link" href="#"> View Full Profile <span> &raquo;</span> </a>
                        </article>
                        <article class="latest__article">
                            <figure>
                                <img src="https://via.placeholder.com/225x125" alt="image medium size"/>
                            </figure>
                            <h3 class="latest__heading__person"> PERSONS NAME </h3>
                            <h4 class="latest-heading__jobtitle"> Managing Director.</h4>
                            <p class="latest__paragraph"> Vestassapede et donec ut est liberos sus et eget sed eget. Quis queta habitur augue magnisl mag.</p>
                            <a class="latest__link" href="#"> View Full Profile <span> &raquo;</span> </a>
                        </article>
                    </div>
                    </section>
            </div> 

CSS

.welcome-message {
width: 50%;
}

.welcome-message__heading {
font-size: 1.3em;
font-weight: 100;
border-bottom: 2px solid #e6e6e6;
padding-bottom: 1.2em;
width: 100%;
}

.welcome-message__wrapper {
display: flex;
flex-wrap: wrap;
}

.welcome-message__article {
outline: 1px dotted red;
flex-basis: 50%;
}

.welcome-message__headingteam {
font-size: 3em;
font-weight: 100;
}

.welcome-message__article {
flex-basis: 50%;
}

.welcome-message__subheading {
font-size: 1.3em;
font-weight: 100;
color: #333;
}

.welcome-message__jobtitle {
font-size: 0.9em;
color: #979797;
}

.welcome-message__paragraph {
font-size: 1.08em;
line-height: 1.2em;
color: #666;
}

.welcome-message__link {
color: #2aa2d4;
text-decoration: none;
}

.latest {
width: 50%;
}

.latest__heading {
font-size: 1.3em;
font-weight: 100;
border-bottom: 2px solid #e6e6e6;
padding-bottom: 1.2em;
width: 100%;
}

.latest__wrapper {
display: flex;
flex-wrap: wrap;
}

.latest__article {
outline: 1px dotted red;
flex-basis: 50%;
}

.latest-message__heading {
font-size: 1.3em;
font-weight: 100;
border-bottom: 2px solid #e6e6e6;
padding-bottom: 1.2em;
width: 100%;
}

.latest-heading__jobtitle {
font-size: 0.9em;
color: #979797;
}

.latest__heading__person {
font-size: 1.3em;
font-weight: 100;
color: #333;
}

.latest__subheading__blue {
font-size: 1.3em;
font-weight: 100;
color: #2aa2d4;
}

.latest__paragraph {
font-size: 1.08em;
line-height: 1.2em;
color: #666;
}

.latest__link {
color: #2aa2d4;
text-decoration: none;
}

I think you’re trying to do too much, too fast. When you’re building a boat, you lay the keel first. You save painting the cupboards for the end.

I like to work on the basic structure first. Here is a pen showing how I would lay out the basic structure of that section. There are many ways to do it, but this is the one that comes to mind.

Hi Kevin,

Wow, thank you for that, you make it look so easy, i have been battling for 2 days trying to figure this out :grinning:

Now the other dilema i have, is making the content flexible the top half of the website seems to fully flexible however on the portion welcome and latest its flexible up to a certain viewport size then it breaks, currently i possess little knowledge/experience on layouts so im now looking for resources online to view/read so i can see if i can apply. Will probably need further assitance from you as i am ensure i will encounter further difficulties and late nights :grin:

Yes, that behaves very oddly as the screen size narrows. Maybe it means that they aren’t thinking of those as two separate columns. Actually if you use Chrome devtools you can confirm this.

I would recommend the FCC section on CSS (as well as all the others).