Profile card component - css flexbox

Community feedback

• 

  AbdulKareem•170

  @seniorteckPosted over 3 years ago

  I tried it out, I toggle the 2box which stands for (device toggle bar) and I have it set to 375px in width, is this how I will be checking for the min-width for mobile device

  1

  ---

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @seniorteck that's what the design is made to - but it's just a guide to give you an idea of sizes and positioning of elements. Mobile devices come in a range of sizes as you're probably aware :D for me the larger ones are not a problem usually, but the ones smaller than 375px can be tricky. You can see what devices you can emulate and add or remove as needed

  0

  

  AbdulKareem•170

  @seniorteckPosted over 3 years ago

  @AgataLiberska okay thanks a lot, I get your point now.. they are indeed very tricky, and that exactly what I have been confused about...you just made it very clear to me... am very grateful here is my email: [email protected], can I pls also have yours so I can send you a preview of it or how do I attached a preview here

  0

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @seniorteck best to join the Slack channel below, you'll be more likely to get feedback from people with a lot more experience, too

  0

  

  AbdulKareem•170

  @seniorteckPosted over 3 years ago

  @AgataLiberska am a member already but will start using it now. thanks

  0
• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi @seniorteck, I would suggest trying a different way of sizing your card, and maybe modifying your media queries. Now you've got margin set to 15% on screens wider than 375px, the card is really wide on desktop, but below that (on smaller mobile screens), your max-width: 1440px media query kicks in which sets max-width to 30%, so the white container is really narrow and the content overflows the card. Do you know how to check how your work looks on different screen sizes in your browsers? Because that helps a lot.

  If you have any questions, let me know, I'll do my best to help :)

  0

  ---

  

  AbdulKareem•170

  @seniorteckPosted over 3 years ago

  @AgataLiberska Wow 🥰🥰thanks for your feedback will work on it.....for the media queries , I am having issue with this part, I do turn on google chrome developer mode and I move it to the side so this way I can resize my window to check the width of my design..pls 🙏 is the above way the way to check if not pls how can I check ..

  0

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @seniorteck in the top left corner of the developer tools thing, there are two icons - one is an arrow and that will allow you to select the element on the page and see the markup and styles for it, and the other one is like two rectangles, and that toggles the device toolbar. the toolbar displays on the top of the viewport and you can have it set to either responsive which allows you to resize the viewport as you want, or you can select a device you particularly want to see.

  If you can't find it, just google chrome device toolbar :)

  0

  

  AbdulKareem•170

  @seniorteckPosted over 3 years ago

  @AgataLiberska thanks a lot will check it out right away. solving another challenge of the testimonial-grid-section... pls how do you start your media queries for the device below 375px as stated you set the browser viewport to 375px and code for that above...

  0

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @seniorteck it's easiest to start working from the mobile design, make sure it works, and only then use media queries to figure out tablet and desktop.

  0

  

  AbdulKareem•170

  @seniorteckPosted over 3 years ago

  @AgataLiberska okay, that means I have to guess the best width to give my code for 375px....I do appreciate and thank you for giving out the time to review my projects...

  0

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @seniorteck you don't need to set a width at all a lot of times, you could just set margin and let the content determine the width :)

  0