The extra interactivity I added.
What challenges did you encounter, and how did you overcome them?The way to make sections responsive in mobile layout, I solved using absolute positioning.
What specific areas of your project would you like help with?Any help would be appreciated but I would really like some advice on the way I did the mobile design.
Hi Grego14,
Good implementation!
Regarding the mobile design, it seems position absolute is not a good choice, as some content is hidden behind the image. I tried, removed your absolute and just used the flex with direction: column-reverse, it works.
.form:not(.success) {
flex-direction: column-reverse;
min-width: 100vw;
min-height: 100vh;
border-radius: 0;
align-items: stretch;
}
.form__right-section {
padding: 0;
/* position: absolute; */
/* z-index: 2; */
min-width: 100%;
min-height: auto;
top: 0;
}
.form__left-section {
padding: 0 2rem 3rem;
min-height: max-content;
/* position: absolute; */
/* z-index: 1; */
min-width: 100%;
bottom: 8rem;
}
It seems you implemented the desktop design first then the mobile, from the learning path, I learned it would be better to implement the mobile design first.
Hope it helps , happy coding !
I have a quite usable template for card layouts by now, which I can reuse.
What challenges did you encounter, and how did you overcome them?I realized that positioning items absolute brings quite some issues with padding, you have to keep in mind, that padding influences the position.
What specific areas of your project would you like help with?Positioning. I would like to see an expert solution
Hi There~ Good implementation! I get some inspiration from your code, like to separate some div out ( the author info, to the bottom, only by itself), so that it the mobile banner will be easier displayed.
Some suggestions: 1- when using dev tool of Chrome(F12), i always see the mobile version, not the desktop version, even my responsive screen was set as '1208px' wide, that's caused by this code: @media screen and (min-width: 1440px) {}, seems it's to large to display the desktop view,
Laptops and Desktops 1280x800: Small laptops (e.g., some netbooks). 1366x768: Common laptop resolution. 1440x900: Some laptops and monitors. 1920x1080: Full HD resolution, very common for desktops and larger laptops. 2560x1440: Higher resolution monitors (QHD). 3840x2160: 4K resolution monitors and TVs.
2- In the mobile view, this title: 'shift the overall look and feel ..' has no paddings, so it starts from the left and shows a different layout than others.
3- On mobile view, in the share banner, there's a share icon, it's not aligned with other icons. - This can be solved by changing the layout, and using flex.
4- On desktop view, the share banner's position is not quite right.
Regarding on the position part, I'd like to have a voice chat so that we can share the screen and discuss on it. : ) please let me know if you are interested.
(PS: English is not my mother tongue, could please kindly point out if any comments mislead you, thank you!)
Using the DOM to manipulate the interaction
What challenges did you encounter, and how did you overcome them?I had difficulty making the share-container disappear when clicked in the mobile version but i was able to let know JS that there is a mobile version when you click on the button.
What specific areas of your project would you like help with?none i think the more and more i build the more and more i will improve
Goode job! I really like the box-shadow you used, I will update mine to use the box shadow as well. I got a question, is there a way we can see the box shadow design from figma? or how did come up with it, it's very cool!
I also noticed you used BEM a little, BEM recommends to use double underscore to present the element , for example share-container--element can be share__element , here's a good article, hope it helps : https://sparkbox.com/foundry/bem_by_example.
Anther one, i don't know if it's my browser issue or not, when set as 1004*762 screen, i have to scroll horizontally to see the whole main div, I struggle with the scroll bar too. so I don't have suggestion on this, please kindly share any solution you get, thank you : )
I used the mobile-first approach to make this layout.
What challenges did you encounter, and how did you overcome them?I created another div for the desktop Hero section. I wanted to apply the KISS principle, and I tried to avoid complicated CSS, so there are two different hero sections.
What specific areas of your project would you like help with?I Cheated on BEM naming because I didn't want an extra long CSS class name, I welcome any opinion.
HI There,
Greet solution!
All in all , it's a excellent solution! Better than mine, good work~
Hi Sardor, Thank you for sharing the git code , i was learning from you. And for the header_info 'Group Chat for everyone', I have the same font-size,font-wight, font-family and line-height as yours, but we have a different layout .
My was like: 'Group Chat for everyone'
Your is like (yours matches the design): 'Group Chat for everyone'
When I took a closer look, seems you are using padding for left and right for the paragraph, is it a common strategy to use for present a paragraph ? how did you come up with this idea~ it's brilliant!!!
This is the First Responsive Design & I will do more next time.
What challenges did you encounter, and how did you overcome them?Responsive Design, Flexbox & Grid but once you understand clearly you will overcome the mistake but be very patient.
What specific areas of your project would you like help with?Understand the Responsive Design to see the different screen sizes. In the project, the Flexbox and Grid are very helpful for beginners like me.
Good work! I see from the code, flex was used. A good choice for responsive design, and you can give it a try with a grid. For this specific solution., i feel grid is much more powerful : )
This was a great exercise in using CSS Grid. I'm getting more comfortable having this technology in my toolbox when the situation warrants it. I enjoyed how much simplier grid-template-areas makes making media queries.
What challenges did you encounter, and how did you overcome them?It took a bit of tinkering to get the responsiveness just right but I managed it.
Note- I did not include an H1 tag for this challenge because I don't think it's appropriate for this challenge semantically. All the cards and their respective headings are of equal weight to each other.
What specific areas of your project would you like help with?I'm open to all suggestions.
Hi Arnold,
I hope you have a good day! I tried to view your code on git , but the index.html appears like a css file, could you please help take a look? Thanks. https://github.com/CreativeLogic/FrontEnd-Mentor-Projects/blob/main/Testimonials%20Grid%20Section/index.html
This was a great exercise in using CSS Grid. I'm getting more comfortable having this technology in my toolbox when the situation warrants it. I enjoyed how much simplier grid-template-areas makes making media queries.
What challenges did you encounter, and how did you overcome them?It took a bit of tinkering to get the responsiveness just right but I managed it.
Note- I did not include an H1 tag for this challenge because I don't think it's appropriate for this challenge semantically. All the cards and their respective headings are of equal weight to each other.
What specific areas of your project would you like help with?I'm open to all suggestions.
Great job! The responsive from mobile to desktop is really impressive! Also, I noticed on the purple section, the 'comma' is under the words, I was struggle on implementing this, will definitely check on your code , and learn. Thank you for the inspiration.
I am proud of my improvement.
What challenges did you encounter, and how did you overcome them?Nil
What specific areas of your project would you like help with?Nil
Hi there, Good solution! It's very close to the design, keep up the good work! : )
Only one suggestion: it would be better rem/em to replace the fixed px, so it will be more responsive.
your little effort will help me to learn new things so do not forget to make a feedback
In the responsive design, it's better to avoid using the fixed px, like width =700px, padding=30px;
Instead to use rem, em for them. Here's a very good resource of Kevin on responsive design, hope it helps you: https://courses.kevinpowell.co/view/courses/conquering-responsive-layouts/233002-introduction/1007801-my-editor-and-a-useful-extension
All in all, I learned a lot from this solution
