Responsive 3 Columns Layout Done With Flex

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted over 1 year ago

  Hi, @KoliaK.

  That's a good solution. Keep coding.

  I know that units of measurement can be a bit confusing at first. There are so many types of units and they all work differently. I prefer to use px and rem first to keep everything simple. And you don't need to give any height values for your elements.

  In fact, elements take their width and height values from their content. They can be font-size, line-height, font-weight and padding&margin values etc. You can assign a max-width value for the container element and its child elements will grow and shrink depending on this value. Because the HTML itself is responsive. We can break its function if we give some width and height values from CSS.

  This concept might be difficult at first glance. But step by step, everything will make sense. I highly recommend Kevin Powell's course. I have learned a lot from this, it's free and easy to follow.

  https://courses.kevinpowell.co/conquering-responsive-layouts

  Unfortunately, there is no magic way to learn everything at once. You need to spend some time in the course to understand the fundamentals of the responsive design. However, it will be worth it.

  I hope this will help you. Keep coding and have a wonderful day.

  Marked as helpful

  0

  ---

  

  KoliaK•160

  @KoliaKPosted over 1 year ago

  @adonmez04 I was really wondering if putting % was necessary on div sizes. Ty for all the info, I'll definitely have a look in this responsive layout material. It drives me nuts not being able to make the design good looking in different screens like my phone and notebook. By the way, would you recommend any simple tool to deploy my index.html on my android without having to upload the live URL? I use vscode with live server extension for desktop design, but I haven't seen anything android related to run the code "live". Would help me a lot.

  0

  

  P

  Alper•1,010

  @adonmez04Posted over 1 year ago

  @KoliaK Yes, we can use the % unit for very different scenarios. For example, if you want a flex-item to fill half of its container, set its width value to 50%. Or for the three flex-items, you can set

  .flex-items {
    width: 33.33%
  }
  

  And we can use the % unit to limit the content inside the container like this:

  p {
  max-width: 500px;
  width: 90%;
  }
  

  Or we can overflow the content like this using the percentage unit:

  p {
  max-width: 500px;
  width: 110%;
  }
  

  As for your other question, that's a good one, I hadn't thought of that. There are some cross-browser testing tools on the web, but most of them are paid. I don't think you just want screen sizes, you want to test your design on the OS. Maybe you can send your code to your mobile phone and you can run index.html on your Android with your browser like Chrome. Or you can create an Android OS on your main OS like using a virtual machine and you can run your code there. If I had a good computer, I would try it. Unfortunately, my computer is very old (it's 16, almost an adult) and I thank God every day that it works lol.

  You can use bluestacks on Windows to simulate the Android. And Genymotion is another good software to simulate the Android. I hope you can solve your problems.

  Marked as helpful

  0
• 

  P

  Alper•1,010

  @adonmez04Posted over 1 year ago

  And maybe this resource can help you to use devtools for mobile devices more efficiently: https://developer.chrome.com/docs/devtools/device-mode/

  0

  ---

  

  KoliaK•160

  @KoliaKPosted over 1 year ago

  @adonmez04 ohh, definitely. I found the devtools for screen sizes on firefox browser. Definitely I need this to see if my design is correct in 375px or 1440px. https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/

  1