Skip to content
OverviewSolutions
20
Comments
25
Malesela Kgobe
@M-Kgobe

All comments

  • Malesela Kgobe•555
    @M-KgobePosted almost 3 years ago

    Hi Nice work on this one.

    I have a suggestion to reducing your JS lines of code. since your dropdown elements have similar classname, instead of getting your elements one by one, you could assign them to one variable by using querySelectorAll/getElementsByClassNames, therefore instead of having mutliple eventlistener, you could use a ForEach function to iterate through classes you click on.

    Marked as helpful
    0
  • Malesela Kgobe•555
    @M-KgobePosted about 3 years ago

    Hi Your website is not published properly, try moving the the html document to the root folder, and you might need to update your links thereafter.

    0
  • Malesela Kgobe•555
    @M-KgobePosted about 3 years ago

    Hi... nice work on this

    I suggest you increase your .app's height to a 100%, because now the background-image just looks a bit ugly.

    and you might also wanna adjust the .hills-img afterwards.

    Marked as helpful
    0
  • Malesela Kgobe•555
    @M-KgobePosted about 3 years ago

    Hi...

    In mobile(am currently on mobile) the card is not centered, it overflows out of the viewport. Perhaps changing the width: maybe to a % value will help a lot

    Marked as helpful
    0
  • Malesela Kgobe•555
    @M-KgobePosted about 3 years ago

    Hi Your solutions looks pretty good.

    Your github repo does not work, you might have posted an incorrect link or something. you also seem to have a lot of issues in your report, check it out.

    Marked as helpful
    0
  • Yeimy•365
    @Yeimy7Submitted about 3 years ago

    Hi, this is my solution, feedbacks are very welcome!!

    CSS Grid Layout

    1
    Malesela Kgobe•555
    @M-KgobePosted about 3 years ago

    My suggest are that:

    1. Try setting a min-height:100vh to your body element, and make all contet to fit without overflowing.
    2. I would also suggest using landmarks in your HTML document, check-out your report for more info.
    3. Increase the max-width of the @media to about 900px(personally this is usually my first media query then followed maybe by 600px then 400px/450px/475px), you have to use those devTools.
    4. Explore a bit of transitions.

    other than that, the layout seems pretty good. and the slider works fine

    Marked as helpful
    1
  • Gaurav Kumar•570
    @GauravkumarioSubmitted about 3 years ago

    Do check out my new newbie project and it's responsiveness if there is some bug please do mention in comment section. here I changed the color of text for my own choice so neglect that part thank you

    Single price grid component | HTML, CSS, Grid

    1
    Malesela Kgobe•555
    @M-KgobePosted about 3 years ago

    I suggest you increase the mobile @media to about 750px, your first div you could change it to main. And you might have forgotten to add a :hover state to your button. Your #parent should be centered, there is currently an overflow, so you must set up some width to your body & #parent

    Other than those I think you did a very good job

    0
  • Malesela Kgobe•555
    @M-KgobePosted about 3 years ago

    Your solution looks pretty good, other than the width of your main when it goes below 1080px, your main should fit the entire screen thus place a width:100%; in the @media screen and (max-width:1080px).

    ohh! and place the overflowX:hidden in the body, to remove the bottom(horizontal) scroll bar

    Marked as helpful
    2
  • Jhon Loyd Pastorin•135
    @jlpastoSubmitted about 3 years ago

    I wish to hear your feedback about my work. I am not really good in Javascript that is why I was unable to replicate the swipe features in Testimonials section. I appreciate anyone who could teach me or point me on the right tutorial link or snippets on how to achieve the "swipe feature" to horizontally scroll in every cards. Thank you so much.

    Mobile first site using BEM approach and SCSS

    2
    Malesela Kgobe•555
    @M-KgobePosted about 3 years ago

    try searching for something along the lines of "swiper js"/"slider js" on youtube, or even with pure CSS with "horizontal scroll", if you're not comfortable with JS yet

    Marked as helpful
    0
  • Bao Nguyen•100
    @quocbao19982009Submitted about 3 years ago

    I have some questions regarding the basics of CSS:

    1. I have <h1> and <p> inside a <div> with class name of "something". How do I access both of these elements at the same time in CSS? Usually is h1, p {...} but now how to do it with the class?
    2. In the footer (location Icon), I want to make the Icon to have a separate space but still next to the text. I try to use Flex but it stretches the Icon. How should I handler this problem?
    3. Is there any Conventions that I should use in my CSS and HTML that I should know for better coding? Thank you! And have a nice day!

    CSS, HTML

    1
    Malesela Kgobe•555
    @M-KgobePosted about 3 years ago

    If I understand you correctly 1 this is how they are

    <div class="something">
       <h1></h1>
       <p></p>
</div>

    to access them both at the same time you would just .something h1, .something p{...}

    2 I used a table element for that section if I remember correctly, cause I had the same issue and the table seemed to be the best solution for me. Before that I had an idea of using 2 divs's, one for icons and the other for locations, then flex them next to each other, and probably set a max-height.

    You shouldn't have two footer's in yoour HTML document, and the font awesome icon should be invoked in a <i></i> tag, not the <a> tag. you can place them in the middle of the anchor tag.

    ooh have a look at your report

    0
  • Malesela Kgobe•555
    @M-KgobePosted about 3 years ago

    Hi... There are couple of issues with the mobile responsiveness behavior.

    1. Your contents don't fit the screen, thus the overflow out of the maximum screen width causing users to have to scroll to the right. setting a width to your body will help here and your section's width:100% or any suitable % according to design.
    2. Your .navbar items still display in mobile view, without even pressing the hamburger, and also they display even after pressing the hamburger. ​
    3. The layout of the page does not change correctly, i.e. when you go to mobile view(thus at a certain max-width), the layout should change, while the layout is changing the hamburger should also be introduced, I suggest a mediaqueryof about 700px
    4. One other thing is to pay attention to fonts,colors,sizes, hover states.

    and your code formatting is difficult to read, for this I suggest you get some extension to help you format your code. Try placing your contents in landmark sections first, check out your report for more details.

    Marked as helpful
    0
  • Malesela Kgobe•555
    @M-KgobePosted about 3 years ago

    Hi...

    The background-image are not displaying, I used to encounter the same problem when I used a link as url("images/bg-stars.svg"), but then when I url("../images/bg-stars.svg") they seem to not give me a problem at all.

    great job on this.

    0