Frontend Mentor | Petabyte's profile

@dknydSubmitted almost 2 years ago

Hey Peeps,

I finished another project, I think compared to my skill the end result is not that bad, I would have 2 questions which I couldnt figure out on my own:

How can I make the text on the top of middle column to flow beyond the edges of the column? - as seen in the design picture, the left and right edges of the text is further away from the middle than the left and right edges of red and orange container.

Also, why is the screenshot in the solution so weird? The original design to which it compares seems like its super zoomed in, did I miss something? - other projects' previews did not look like this for me.

Many thanks in advance as usual! :)

Daniel

Gird-Layout excercise

1

Petabyte•190

@peta-8-bitPosted almost 2 years ago

Hey! good work with the challenge.

I was reading your comment for this challenge, I am not sure if the middle column actually has text occupy more width than the other columns. It looks same to me. However you can adjust it with padding-left and padding-right with a class name like .middlecolumn or whatever.
The Screenshot is zoomed in to match the aspect ratio (to make side by side comparison)of your page which is more than 100vh so your webpage is zoomed out and the comparison is zoomed in(instead of the normal landscape view + lot of white space). I suggest you make the page height to be at-most 100vh

Overall i would suggest that you try to stick to the given design(height, heading width is way too narrow on desktop view). Otherwise it is a well done challenge.

Happy Coding ╰(°▽°)╯

edit:Changed margin-left and margin-right to padding-left and padding-right.

Marked as helpful

1

Valerie Schdmidling•20

@valerietonsorSubmitted almost 2 years ago

My spacing is a bit off. I struggle with spacing in CSS the most. Any spacing / placement advice is helpful. :)

Product Preview - Perfume Ad

2

Petabyte•190

@peta-8-bitPosted almost 2 years ago

@valerietonsor congratulations on Completing the challenge 🎉

Regarding positioning and spacing, learn Flex-box and Grid which are absolute essentials for CSS and there is no way around it. This will help you center div and even create basically any layout possible.I suggest this youtube channel for all things CSS.
After you have learnt flex-box and grid, I would suggest you learn semantic tags such as main, nav,section,etc in html. This would take maybe 20 minutes to learn.
In this challenge for the mobile layout we have to replace the image with another image which can be done with picture HTML tag.

Hope this helps. Happy coding.╰(°▽°)╯

Marked as helpful

1

AnthonyLeDu•60

@AnthonyLeDuSubmitted almost 2 years ago

First JS challenge

1

Petabyte•190

@peta-8-bitPosted almost 2 years ago

@AnthonyLeDu Congratulations on completing the challenge 🎉

I was also doing the same challenge today and I have only one suggestion. We can use width and max-width on the same element style them for different viewports without using media queries. For example in this challenge I used width:80% and max-width:450px so that on wider screens, the card looks just a little bit bigger since users are sitting further away from the screen, than on a mobile device.

Happy coding╰(°▽°)╯

Marked as helpful

1

Abieb_Guardian•200

@AbibGuardian50Submitted about 2 years ago

Any feedback and critics is welcomed!

News Homepage with CSS Grid and @media

1

Petabyte•190

@peta-8-bitPosted about 2 years ago

Congratulations @AbibGuardian50 for completing you first Junior level challenge 🎉🎉

I am also fairly new to web development, but here are my two cents:

I would recommend having the logo and navbar out of the main grid since they go on one line only.
The responsive layout works alright, however the navigation items cant be seen, the main picture can be replaced with the square picture.The layout needs to be centered in both desktop and mobile version.
Kudos on incorporating semantic tags like main and section. My only recommendation is the right-content and bottom-content can be wrapped in the section tag and the individual articles inside article tag.

I know it sounds like so much work, but when i did this challenge i took 1 full day just trying to figure out the navbar. I don't even want to talk about the entire challenge, but it gets waaayyy easier after doing it right one time.

Happy Coding╰(°▽°)╯

Marked as helpful

0

Abu Kesh•20

@AbuKeshSubmitted about 2 years ago

Feedback Welcome Find difficult to make the two containers equal? Don't know a lot about CSS Grid?

Product preview card compoent using only Html and CSS

2

Petabyte•190

@peta-8-bitPosted about 2 years ago

@AbuKesh Congratulations on completing you first Challenge🎉🎉.

Regarding the alignment and sizing, your current approach is not wrong, however when you set the outlines for all the elements, you can see the image is contained in a bigger portion and thus the entire layout is not actually present in the center even after using align items. Setting display:inline-block on the .image class would be better rather than setting it on con1.

Regarding the width of the two section, Since one half is image which has a fixed proportion on height when you set width, and the other half is text only which can change proportions according to the length of content, it is hard to get the same width and height on both.

You mentioned you are yet to learn grid, I would highly suggest, you learn the basics of flexbox and grid before doing any challenge. Also start with the QR-code component challenge which is very similar to this but less complex. Also the QR-code challenge does not really need a mobile design unlike this challenge.

0