@log-bait
Latest solutions
Latest comments
- @rohailtaha
I think you want smooth transition upon clicking the left right buttons?
- @TScorpz@rohailtaha
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";
- @rayansailani@rohailtaha
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 - @alessandro-giuzio@rohailtaha
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 - @Tuason066@rohailtaha
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 - @yvsminvs@rohailtaha
Great Effort! I would like to give some suggestions:
- 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.
- 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.
- 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
