I know it was supposed to be only HTML & CSS but I took the opportunity to try a bit of JS too :).
Felix Anducho
@PleopleqAll comments
- @lfanjosSubmitted almost 4 years ago@PleopleqPosted almost 4 years ago
Hey Lucas, great job.
I just noticed that in bigger screens the borders of the background dont show up. You can try to use "background-size: contain;" in larger screens to prevent that.
Have a great day!
0 - @beatrizalmeidapiresSubmitted almost 5 years ago
Hey everyone! A few struggles:
-
How can I change the "placeholder" attribute? Tried a bunch of different ways, but I think bootstrap always blocked it to grey.
-
How can I position the picture to appear at the top in mobile view? At the moment it appears at the bottom.
Thanks for your feedback I really appreciate it!
@PleopleqPosted over 4 years agoHey Beatriz! Its kinda difficult to style a project that already use bootstrap, in my opinion (I dont know, maybe im wrong haha). You can use col-sm-12 in the image (https://getbootstrap.com/docs/4.0/layout/grid/) so it takes full widht of the viewport. And also, the image div is after the description text. You maybe wanna put that div on top of the description and see if that works.
0 -
- @peaky-qpSubmitted over 4 years ago
Hi everyone! I'm a beginner, what do you think of my solution to this challenge? Any advice or feedback will be really appreciated. Thanks.
@PleopleqPosted over 4 years agoGoob job Peaky! One thing about your project is that the mobile version isnt the same as the challenge. You can experiment with "Mobile first desgin"
https://www.justinmind.com/blog/complete-guide-to-mobile-first-design/
Basically, you style the mobile version first an then scale everything from there. It work for me and i think (i think haha) is the standard.
2 - @carlosalberto05Submitted over 4 years ago
some one who tell me ¿how I can make this responsive? thanks!
@PleopleqPosted over 4 years agoYou can also search info about "Mobile first design" https://www.justinmind.com/blog/complete-guide-to-mobile-first-design/
I use it in my challenges and its more easy to translate everything from mobile to desktop using media queries.
1 - @manerotoSubmitted almost 5 years ago
I'd like to have some feedback about my solution.
@PleopleqPosted almost 5 years agoReally clean transition from desktop to mobile and vice versa. A great job overall. I dont know why the Design Comparison shows the page cutted in a half but in "Preview Site" looks pretty good.
2 - @aLe3ouLaSubmitted almost 5 years ago
Please leave your feedback 🙃
@PleopleqPosted almost 5 years agoLooks like the page is cutted in a half and, to be honest, i cant help with that :( im sorry. I hope someone can give you a solution. Also, arent using the mobile-hero in 375px screens. You can define the mobile-hero in your HTML and then change it in your CSS with "content:url("./images/hero-desktop.jpg");".
Im not entire sure if is viable but it get the job done and its less confusing.
Great job Alexandra!
1 - @beatrizalmeidapiresSubmitted almost 5 years ago
Please let me know your feedback, I really appreciate it!
@PleopleqPosted almost 5 years agoGreat job! it look nice and clean! just the background color, but that is a super small detail.
1 - @PleopleqSubmitted almost 5 years ago
It took me a loong ass time to finally finish this project. It was the most difficult i learn a lot. It not 100% accurate (I didnt know how to set up the background image). But hey, im still learning CSS. Its finally here! haha Happy New Year everyone.
@PleopleqPosted almost 5 years agoWow, thanks for all the good tips! yeah, i would say this is my worst project and i was thinking to just not finish it. But the good thing is that i didnt leave it, and i learn a lot and your feedback gives me more things to learn. Thanks again!
0 - @oscarmartinez761Submitted almost 5 years ago
Here's my second submition, please feel free to give me some feedback regardind my code.
@PleopleqPosted almost 5 years agoGood job Oscar! Maybe you want to use background-size: 100%; so you dont have problems with the background not covering the page.
You can remove a little bit of the margin in the illustration when you get to @media screen and (min-width: 768px) so you dont have that problem of the image getting inside of the text
0 - @PleopleqSubmitted almost 5 years ago
I did the toggle function with JS. I dont know if it is possible to make it with CSS. Also, i dont know why, but when i open my page from Github the background is gone. It works with live server (VSC).
@PleopleqPosted almost 5 years agoThanks for the feedback! I didnt know that @import does that to my page. I just saw other projects using it and i thought it was okay haha. Really appreciate that. My next step is trying to learn SASS, thats for sure.
0