Pure Html and CSS

Community feedback

• 

  Abdullah Nassif•405

  @AbNassifPosted over 3 years ago

  Hey man, A problem I'm seeing is that the container isn't being aligned perfectly in the center, and it's being pushed out of the screen( I have to scroll horizontally then go down vertically to view the cards).

  And after some inspection, I've found out that both your HTML and body tags have a fixed height of about 37px. Now usually the container shouldn't be overflowing from the content, But you gave it a fixed height and width along with some fixed margin inside it which forced the parent elements to remain small while the child(.container) has to be bigger which caused it to leave it's parent's confines to abide by the fixed properties.

  Adding fixed pixels isn't always optimal as it wouldn't be responsive across all devices like you hope it would.

  Things you can change to align the items perfectly:

  Add html, body,.container,.wrap{ margin:0; padding:0; width:100%; height:100%; }

  then add align-items: center to the div with the class of wrap.(Since you're using flexbox, you don't need to use margin: auto as you can already use align-items to align the elements vertically).

  now the cards will somewhat work on all devices with big screens, but as it reaches around 900 px, the items will stretch to the whole width( You can then fix it with media queries by either giving the wrap a percentage width, or some padding).

  Important: Most coders usually include this default code in their projects . *(star means select all tags){ margin:0;(will remove the margin as some elements have them by default like the body for example) padding:0;(same reason as the margin); box-sizing:border-box;(people prefer this as it makes adding padding easier, look up how it helps on w3schools, their explanation is better) }

  Ps. next time just use one container for the cards (No need for the .wrap element)as that would be enough to manipulate the cards using Flexbox or CSSGrid.

  Great work, keep it up and you'll be doing amazingly in no time.

  Marked as helpful

  1
• 

  Karl Matthews•115

  @karmattPosted over 3 years ago

  So if I understand you correctly no want no white-space around the cards on mobile? You could add:

  • { padding: 0; margin: 0; }

  That selects all the elements and removes any default padding or margin that is on certain elements by default.

  0

  ---

  

  Marko Stanojevic•10

  @greardrearPosted over 3 years ago

  @karmatt It doesn't work, i made a bad design i put it all in a box when i shouldn't, margin is already 0 and i never added any padding to it, so when using @media i guess i will always have those white spaces, even if the width of the cards is 100%.... i put a div container and a div wrap to help me center everything easier and thats the problem now in smaller screens, i mean you can check out the code on my github :)

  0

  

  Karl Matthews•115

  @karmattPosted over 3 years ago

  @greardrear you and I have a similar layout in our html. I guess i'm just not understanding what whitespace you want to get rid of. Unfortunately I don't know how to send screenshots. You're more than welcome to take a look at my solution.

  0