First solution of this year. 😄😊
Malesela Kgobe
@M-KgobeAll comments
- @alexatttSubmitted almost 3 years ago@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 mutlipleeventlistener
, you could use aForEach
function to iterate through classes you click on.Marked as helpful0 - @dobi8422Submitted about 3 years ago
In phone mode, the button cannot be displayed on the top layer. if I use Pseudo-element
@M-KgobePosted about 3 years agoHi 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 - @jgreen721Submitted about 3 years ago
tried an effort with transform/rotate but didn't really cut it, be curious on suggestions
@M-KgobePosted about 3 years agoHi... nice work on this
I suggest you increase your
.app
'sheight
to a100%
, because now thebackground-image
just looks a bit ugly.and you might also wanna adjust the
.hills-img
afterwards.Marked as helpful0 - @Tirth1842Submitted about 3 years ago
Great fun!! Feedback are most welcome. Any suggestion??.....
@M-KgobePosted about 3 years agoHi...
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 lotMarked as helpful0 - @emersonvisualsSubmitted about 3 years ago
Hey everyone, just completed another coding challenge. Let me know what you think!
Thank you! 😀
@M-KgobePosted about 3 years agoHi 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 helpful0 - @Yeimy7Submitted about 3 years ago
Hi, this is my solution, feedbacks are very welcome!!
@M-KgobePosted about 3 years agoMy suggest are that:
- Try setting a
min-height:100vh
to your body element, and make all contet to fit without overflowing. - I would also suggest using landmarks in your HTML document, check-out your report for more info.
- Increase the
max-width
of the@media
to about900px
(personally this is usually my first media query then followed maybe by600px
then400px/450px/475px
), you have to use those devTools. - Explore a bit of transitions.
other than that, the layout seems pretty good. and the slider works fine
Marked as helpful1 - Try setting a
- @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
@M-KgobePosted about 3 years agoI suggest you increase the mobile
@media
to about750px
, your firstdiv
you could change it tomain
. And you might have forgotten to add a:hover
state to yourbutton
. Your#parent
should be centered, there is currently an overflow, so you must set up somewidth
to yourbody & #parent
Other than those I think you did a very good job
0 - @carlson142Submitted about 3 years ago
Any feedback! (ಥ﹏ಥ)
@M-KgobePosted about 3 years agoYour solution looks pretty good, other than the
width
of yourmain
when it goes below1080px
, yourmain
should fit the entire screen thus place awidth:100%;
in the@media screen and (max-width:1080px)
.ohh! and place the
overflowX:hidden
in thebody
, to remove the bottom(horizontal) scroll barMarked as helpful2 - @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.
@M-KgobePosted about 3 years agotry 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 helpful0 - @quocbao19982009Submitted over 3 years ago
I have some questions regarding the basics of CSS:
- 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?
- 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?
- 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!
@M-KgobePosted over 3 years agoIf 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 thetable
seemed to be the best solution for me. Before that I had an idea of using 2divs
's, one for icons and the other for locations, then flex them next to each other, and probably set amax-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 - @log-baitSubmitted over 3 years ago
any feedback or errors or correction or mistakes are please let me know thank you guys
@M-KgobePosted over 3 years agoHi... There are couple of issues with the mobile responsiveness behavior.
- 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 yourbody
will help here and yoursection
'swidth:100%
or any suitable % according to design. - Your
.navbar
items still display in mobile view, without even pressing the hamburger, and also they display even after pressing the hamburger. - 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 amediaquery
of about700px
- 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 helpful0 - 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
- @Aditya798-createSubmitted over 3 years ago
Any feedback is welcomed
@M-KgobePosted over 3 years agoHi...
The
background-image
are not displaying, I used to encounter the same problem when I used a link asurl("images/bg-stars.svg")
, but then when Iurl("../images/bg-stars.svg")
they seem to not give me a problem at all.great job on this.
0