Skip to content
OverviewSolutions
10
Comments
11
Rohail Taha
@rohailtaha

All comments

  • Rohail Taha•355
    @rohailtahaPosted about 3 years ago

    I think you want smooth transition upon clicking the left right buttons?

    0
  • Jevgenij•110
    @TScorpzSubmitted about 3 years ago

    Works good on chrome, but couldn't get text field outline to work on Firefox. Any tips and suggestions are welcome.

    Tip Calculator

    1
    Rohail Taha•355
    @rohailtahaPosted about 3 years ago

    Maybe you can use something like input:focus { outline: 2px solid hsl(183, 100%, 15%); } to work on firefox. the pseudo element may be just ":focus" or ":focus-visible";

    0
  • Mohammed Rayan sailani•230
    @rayansailaniSubmitted about 3 years ago

    I would like to implement this by reducing the amount of CSS I've written, any recomendations ??

    html css

    3
    Rohail Taha•355
    @rohailtahaPosted about 3 years ago

    Awesome work. I looked at the code. In your media query you used min-width:350px, I think you actually wanted max-width here because you would want body font size to be smaller(12px) in smaller screen sizes? If you use min-width in media query, then the styles applied will be for screen sizes greater than or equal to 350px. But I think you wanted those styles to be applied for screen sizes less than or equal to 350px? Am I wrong?

    Marked as helpful
    1
  • Alessandro•215
    @alessandro-giuzioSubmitted about 3 years ago

    #WORK IN PROGRESS

    Hello there, i need help please! I am blocked with the 1440px screen size resolution!

    Cheers

    Social proof section solution

    1
    Rohail Taha•355
    @rohailtahaPosted about 3 years ago

    Hello, you have added min-width: 100vh to your "body". Remove it to prevent the horizontal scroll. You would always want to avoid using min-widths as they make responsive designs difficult.

    Marked as helpful
    0
  • Rohail Taha•355
    @rohailtahaPosted about 3 years ago

    Try this: background-image: url(../images/bg-header-mobile.png); Probably you would have to go one directory back using "../" as images folder is in the previous directory compared to "style.css" file.

    Marked as helpful
    0
  • Rohail Taha•355
    @rohailtahaPosted over 3 years ago

    Great Effort! I would like to give some suggestions:

    1. You could increase the contrast of the paragraph texts as it is low. I know the style guide had this gray color but it has low contrast and you would always want to avoid that.
    2. You can add a max-width property to paragraph-texts or their parent container so each line of paragraph does not become too long. It is UI design good pratice to keep the text lines short as they are easier to read.
    3. There is a lot of padding in container1 and the content squeezes in too much when large screen size is reached. You can completely avoid padding and use max-width and margin:0 auto(to center) and achieve the same effect.

    I hope this is helpful. Keep up the good work.

    Marked as helpful
    0
  • Rohail Taha•355
    @rohailtahaPosted over 3 years ago

    The solution is great. Since you asked for suggestions and they are always good for beginners, so I'll give some:

    1. Try avoiding the 'height' property and use 'min-height' instead as it makes responsive designs easier.
    2. If you don't know, try learning about 'rem' and 'em' units and use them for font-sizes, margins and paddings.
    3. Try giving more specific and easy to remember class names. Instead of .inputdiv1, .inputdiv2, you can think of class names that are more relatable like input_bill, input_persons.
    4. Instead of one long function try to divide it into smaller functions that do one particular task. The code becomes easier to read and refactor later on.

    At last I would suggest you to checkout this channel (Maybe you have already). It is simply one of the best for learning css tips and good pratices. You will not regret following this channel. https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw

    Marked as helpful
    1
  • Rohail Taha•355
    @rohailtahaPosted over 3 years ago

    Great work. You can resolve the space issue as Ahmed mentioned by removing all spaces from the search input before applying the filter. Here is the code I use for my project to remove spaces: str.split(' ').filter(s => s).join(' '); This handles multiple spaces before the string, after the string and different words.

    Marked as helpful
    0
  • Rohail Taha•355
    @rohailtahaPosted over 3 years ago

    Brilliant! You can set min-width:100vh to your body so that the attribution goes to the bottom of the page. It will look even nicer.

    0
  • Rohail Taha•355
    @rohailtahaPosted almost 4 years ago

    Nice one Yahya, but I think you forgot to add the marker image

    0
  • Rohail Taha•355
    @rohailtahaPosted over 4 years ago

    Awesome. If you gave the "desktop image" a small negative margin from left, the image would be cut off from the left a bit and look more like the original. But the page is cool. Keep it up.

    0