Frontend Mentor | Oladapo Jesufemi Paul's profile

@dan-ayalahdezSubmitted over 2 years ago

Very fun project, im starting to get a gold of media queries. Pretty content with the result tbh :)

Any tips to make a site responsive for all devices (mobile, tablet, laptops and desktop) easier are apprecitated. I usually only do media queries for 375px and 1440px as per the challenge requirements, but it feels odd to left out tablet users and even mobile phones with resolutions <375px, do i really need to make a media queria for each one of these?

-Daniel

Fylo Landing Page - Solution!

2

Oladapo Jesufemi Paul•1,060

@jesufemiganPosted over 2 years ago

Great work Daniel!

Regarding responsiveness, you should only use media queries if you realize the display for a particular screen size does not meet the design requirement or does not look good as the case may be. Note that by default HTML is responsive on all screens, devs are the ones that alter the responsiveness. There are some cases where you need to define media queries for all screen types but always ensure that your styling is optimal to ensure you only use media queries only when necessary.

Marked as helpful

1

Aaryn•130

@Aaryn-RobinsonSubmitted over 2 years ago

Can someone overview my code?

The images aren't popping up for some strange reason

Four Card Section Design

1

Oladapo Jesufemi Paul•1,060

@jesufemiganPosted over 2 years ago

Your Image folder was not pushed to github

0

Ola White•160

@whitesoftxSubmitted over 2 years ago

Feedbacks will be appreciated.

Profile Card Component

2

Oladapo Jesufemi Paul•1,060

@jesufemiganPosted over 2 years ago

Awesome work! You can add letter spacing to the span tag in the "stats-content" class and increase the font-size

Marked as helpful

1

Pieter•80

@PubstarSubmitted over 2 years ago

Getting the "See All" button above the images on desktop and below the images on mobile took me more time than I'd like to admit but we got it!

I do have a question about adding a border on an element on hover, this seems to move around the other elements a tad bit, atleast when using flexbox, is there any way to avoid this behaviour? For example if you hover over the socials-icons in the footer, every other icon moves a few pixels.

Mobile-first Loopstudio landing page

1

Oladapo Jesufemi Paul•1,060

@jesufemiganPosted over 2 years ago

Good work! A better way to position to "See All" button will be to use the "display: grid". To avoid the issue of other icons moving a few pixels down, I think this is because you did not add "box-sizing: border-box;" as a global style either in the body tag or create an "all" tag using *.

e.g * {box-sizing: border-box;}

1

luciferad•80

@luciferadSubmitted over 2 years ago

I am a newbie & I've learned HTML & CSS with a book. I don't have any instructor, then I have doubt about using appropriate properties for styling. Please feedback me.

Responsive Social Proof Section

1

Oladapo Jesufemi Paul•1,060

@jesufemiganPosted over 2 years ago

Great work! In your 'What you learned section' on your readme.md file, to position a block element in the center of a container, for the 'item' class you can as well do this.

.item { position: absolute; left: 0; right: 0; margin-inline: auto; }

Marked as helpful

1