Product landing page project issues

Hey guys, i am done with my Product landing page but i have a little styling issues. i styled my Pricing with flexbox and i don’t want it resizing whenever the screen is resizing. see below my codepen link

Can you try posting a link to your codepen again? The link you posted opens a new pen.

see below

I’m curious, why wouldn’t you want it to resize? Otherwise, it wouldn’t be responsive.

it gets smaller when it gets to x screen size , just the pricing and that’s not what i want

i am trying to achieve exactly the above

Hi @Mbadady,

I tried to watch what is the issue. I think it is caused because you gave to your div a relative size:

.tenor, .bass, .valve{
  border: 1px solid black;
  width: 35%;
  text-align: center;
  padding: 2rem 0;
  line-height: 1.5rem;
  border-radius: 5px;
}

You can try to add a minimum width or use another unit for the width, such as fixed values, if really you don’t want the size be changed. Also, you used the flex-flow property with the value nowrap. You should see to use the wrap values. With the size you have right now for your div, you will normally have two div on one line and one just below.

LucLH, thank you. i used px and it worked as i wanted. Thank you for always coming through

You’re welcome @Mbadady, I gave you suggestions, and it is you who found how you will fix your issue so I am glad that you arrived your purposes. :slight_smile:

1 Like

Thank you. Feedback on my project will be most appreciated

Could you share the link again of your project? I have the feeling the first link you shared is not updated.

here you go

Thank you @Mbadady,

Let me share my advices (they are not the only vision or solution, it is just about my way to see and work):

  • Always read again your code, check every syntaxes etc. You can use the debug option offers by CodePen. You find it at the top of each code window in clicking the arrow then the option “Analyze HTML/CSS”. You can use the following website too: https://validator.w3.org/
  • Take care about the way you indent the code. I know it will work, but for debug purposes it is much more easier for you or even those who would work with you on a project. If you are not sure about how to do, you can find how to do online with videos or articles.
  • div are really useful, and we are often tempted to use them soon as we need a block or anything. But it is not good practice to abuse their usage. It is better to see if a tag would be more meaningful than a div. Example in your code (I put comments inside directly):
<div>
  <!-- You are using the nav tag, do you really need a div before? (You don't have to answer, it is just a question that you can ask yourself 😉 ) -->
  <nav id="nav-bar">
    <ul>
      <li><a class="nav-link"href="#Features">Features</a></li>
      <li><a class="nav-link"href="#How_It_Works">How It Works</a></li>
      <li><a class="nav-link"href="#Pricing"></a>Pricing</a></li>
    </ul>
  </nav>
</div>
  • If you want to push further your page quality, for accessibility, you can interest yous about the ARIA roles. It is something I learned really recently (deeper than I knew), and it is a topic not enough covered in HTML, I find. It may look scary but you already do it a in your code, but you can do it more. This is more about optimization, but if you want to discover something, you can try to interest yourself at this topic (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role. I give a short example:
<!DOCTYPE htnl>
<html>
  <head>
  </head>
  <body>
    <header></header>
    <main>
      <section></section>
      <div role="complementary"></div>
    </main>
    <footer></footer>
  </body>
<html>
<!-- As you can see, there are already things you know -->
  • When you work on the CSS, try to have all your rules for one element together, I don’t know to say, you know from top to bottom, like this when you search why something is not working you are more sure to not miss the issue and update the code for no result.

I know you are at the beginning, it is just some advices/optimizations, and they are not to say that your page is bad. It is good for a start and you can be proud of yourself for what you did. Congrats @Mbadady !

1 Like

Hello LucLH. Thank you very much for the advise. This is very much appreciated

These corrections are note and will be worked on. For the second bullet point, i had the code correctly indented on VScode but it was scattered in Codepen, never bothered to do it correctly.

i am getting addicted to using Div which i need to reduce.

Finally, your last bullet point is very important. i even find it difficult locating some of the elements styles :roll_eyes:. This will be adjusted accordingly

1 Like

Hey LucLH, i’ve looked at the ARIA role and it’s not making sense yet

is there a way to break it down further?

You’re really welcome @Mbadady :wink:

Ok ok, the most important is that you know it, but don’t hesitate to indent it well, make clear, especially if you plan to do a portfolio and wish to show some projects.

Haha it is completely understandable, they are really useful and they are quick solutions sometimes. I was abusing them too, maybe even still today, just I don’t admit it…

Yes, and it was hard a little bit for me to find all the properties you used and understand your approach for one part for example. You know just when you to work on the nav for example, start your code in CSS and just when you want to add something later come back that part, put it below what you defined already and you have something organized.

ARIA roles just say to a part what is his role. You have tags who already have the role such as the header, the footer the main etc, and you don’t need to indicate anything for them (except some cases). But for example the div, they don’t have a particular usage, you use them usually because no other tags fit the block you want to create. Then you should add the role property.

It is not a mistake to not do it, but accessibility, for people using screen reader for example, it is something useful. It’s more for accessibility, and then yes SEO.

I am also learning it recently because I discovered this through a project I did. But globally they are just precision for the content. Maybe this link can help more: Aria Roles

You can check the part about landmarks, you will directly get it I think.

hey LucLH

thank you for your help.

i have one more thing please. i have issues making my page responsive. At some widths my page responsiveness is perfect then, a bit lesser or more it is a bit scattered. How do i make all the widths perfect.

Any help will be appreciated. i have struggled with this since i started building my portfolio page, thought i could figure it out on my own with Devtools but i am not able to

Hi @Mbadady,

Could you share the updated link of your project to see what is happening?