b/intro-to-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

amended styles

Browse Source
This commit is contained in:
Adam Jahr 2020-05-21 22:42:14 -04:00
parent 0e485e3ee9
commit 142346579f
2 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/styles.css
View File

@ -40,11 +40,6 @@ body {
border-radius: 50%; border-radius: 50%;
} }
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.disabledButton { .disabledButton {
background-color: #d8d8d8; background-color: #d8d8d8;
@ -97,12 +92,18 @@ p {
font-size: 22px; font-size: 22px;
} }
.product { .product-display {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1rem; padding: 1rem;
} }
.product-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.product-image, .product-image,
.product-info { .product-info {
width: 50%; width: 50%;

6
components/ProductDisplay.js
View File

@ -8,9 +8,9 @@ app.component('product-display', {
template: template:
/*html*/ /*html*/
` `
<div class="product"> <div class="product-display">
<div class="container"> <div class="product-container">
<div class="product-image"> <div class="product-image">
<img :src="image" /> <img :src="image" />
</div> </div>
@ -39,7 +39,7 @@ app.component('product-display', {
> >
Add to cart Add to cart
</button> </button>
</div>
</div> </div>
<review-list :reviews="reviews"></review-list> <review-list :reviews="reviews"></review-list>