Problem With Product Landing Page Code

This is the demo project given for Build a Product Landing Page Project; https://codepen.io/freeCodeCamp/full/RKRbwL

The problem is that if you copy all the respective code (HTML, CSS, JavaScript ) and create a new CodePen Pen with it (I created one: https://codepen.io/ayaan_irshad/pen/arbdrd?editors=1100 ). That code does not reproduce the same page, CSS is not implemented on many elements.
What is the reason for this behavior?

I try to look at the code for Demo Projects for insights into how HTML has been structured and CSS is implemented.

.logo  {
 width: 60vw;
 
 @media (max-width: 650px) {
   margin-top: 15px;
   width: 100%;
   position: relative;
 }
 
 img {
   width: 50%;
   height: 0%;
   max-width: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   margin-left: 200px;
   @media (max-width: 650px) {
     margin: 0 auto;
   }
 }
}

In the above code on my Pen, img styling is ignored completely when I tried to implement that on my Project.

The img in my CodePen gets highlighted in pink whereas the img in the given Product Landing Page project is highlighted in yellow.

I think that you need to link Bootstrap in the CSS. CLick on the CSS system wheel and add https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css to “add another source”
And I believe that what is used is SCSS and not CSS: from 93 to 120, you can see that the nodes are all nested . Look at the img you are trying to change, it is inside the logo bracket.

To be honest, I have absolutely no clue on how to change this on codepen, is there anybody who can help with this?

1 Like

In your codepen, click the gear icon above the CSS box to open Pen Settings.

If the CSS tab is not highlighted click on it, then in the CSS Preprocessor area, select SCSS.

It appears the example’s javascript is run through the Babel Preprocessor, so you’ll have to do the same for your .JS - select the Javascript tab, then choose Babel in the Javscript Preprocessor dropdown

2 Likes