Click here to Skip to main content
15,908,776 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i'm taking a beginner javascript/css/html course on Coursera and have my first project completed except for a margins problem. it's my first "responsive design" page:

Assignment Solution for Module 2[^]

the page can be re-sized horizontally to change the layout of the categories, and this version is completed apart from the lack of spacing, i'm trying to add 10px of horizontal space between the boxes that end up on the same line (in the md and lg classes)

What I have tried:

adding
margin-left: 10px;
to the classes that need it, but it ends up breaking both versions, shown here:

Assignment Solution for Module 2 - v2[^]
Posted
Updated 29-Sep-22 22:31pm
v2

1 solution

The width of an element excludes its margin:
box-sizing - CSS: Cascading Style Sheets | MDN[^]

You have three elements set to a width of 33.33%, which would completely fill the width of the container. When you add a margin between them, that takes the total width to 100% + 30px, which obviously won't fit on a single line.

One option would be to use calc to calculate the width of the elements:
calc() - CSS: Cascading Style Sheets | MDN[^]
CSS
.col-lg-4 {
    width: calc(33.33% - 10px);
}

A more robust approach would be to use flexbox - but that's probably not been covered by your course yet.
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN[^]
A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900