Skip to content

Commit

Permalink
Functional Responsive Design!!
Browse files Browse the repository at this point in the history
  • Loading branch information
jakechood committed Nov 20, 2023
1 parent df38337 commit d3e7fad
Showing 1 changed file with 18 additions and 14 deletions.
32 changes: 18 additions & 14 deletions CSS/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,34 @@ h1 {
}

.container {
display: flex;
margin: 1rem;
}

.item {
position: relative;
border: 2px solid black;
padding: 0 0 .25rem .25rem;
background: rgb(151, 151, 151);
margin: .25rem;
float: left;

}
.itemdescr {
position: relative;
padding: .5rem;
}
.itemtitle {
margin-left: 52%;
padding: .25rem;
margin-left: 60%;
padding: 5px;
border-left: 2px solid black;
border-bottom: 2px solid black;
width: auto;
position: center;
}

.col-lg-3 {
position: relative;
border: 2px solid black;
padding: 0 0 .25rem .25rem;
background: rgb(151, 151, 151);
margin: .25rem;
}

#itemtitle1 {
background: salmon;
}
Expand All @@ -46,26 +50,26 @@ h1 {

/********** Large devices only **********/
@media (min-width: 992px) {
.col-lg-3 {
.item {
width: 33.333%;
}
}


/********** Medium devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
.col-lg-3 {
width: 48%;
.item {
width: 50%;
}
#item3 {
width: 98%;
width: 100%;
}
}

/********** Small devices only **********/
@media (max-width: 767px) {
.col-lg-3 {
width: 98%;
.item {
width: 100%;
height: auto;
}
}

0 comments on commit d3e7fad

Please sign in to comment.