2018-09-30 22:01:58 +00:00
---
id: 587d7791367417b2b2512ab4
title: Adjust the Width of an Element Using the width Property
challengeType: 0
videoUrl: 'https://scrimba.com/c/cvVLPtN'
2019-08-05 16:17:33 +00:00
forumTopicId: 301039
2021-01-13 02:31:00 +00:00
dashedName: adjust-the-width-of-an-element-using-the-width-property
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2021-02-01 19:56:07 +00:00
You can specify the width of an element using the `width` property in CSS. Values can be given in relative length units (such as `em` ), absolute length units (such as `px` ), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:
2019-05-14 08:11:58 +00:00
```css
img {
width: 220px;
}
```
2020-11-27 18:02:05 +00:00
# --instructions--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Add a `width` property to the entire card and set it to an absolute value of 245px. Use the `fullCard` class to select the element.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --hints--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
Your code should change the `width` property of the card to 245 pixels by using the `fullCard` class selector.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g);
assert(
fullCard & &
/width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) &&
$('.fullCard').css('maxWidth') === 'none'
);
2018-09-30 22:01:58 +00:00
```
2020-11-27 18:02:05 +00:00
# --seed--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< style >
h4 {
text-align: center;
}
p {
text-align: justify;
}
.links {
margin-right: 20px;
text-align: left;
}
.fullCard {
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
border: 1px solid #ccc ;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
< / style >
< div class = "fullCard" >
< div class = "cardContent" >
< div class = "cardText" >
< h4 > Google< / h4 >
< p > Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.< / p >
< / div >
< div class = "cardLinks" >
< a href = "https://en.wikipedia.org/wiki/Larry_Page" target = "_blank" class = "links" > Larry Page< / a >
< a href = "https://en.wikipedia.org/wiki/Sergey_Brin" target = "_blank" class = "links" > Sergey Brin< / a >
< / div >
< / div >
< / div >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2018-10-23 13:21:53 +00:00
```html
< style >
h4 {
text-align: center;
}
p {
text-align: justify;
}
.links {
margin-right: 20px;
text-align: left;
}
.fullCard {
width: 245px;
border: 1px solid #ccc ;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
< / style >
< div class = "fullCard" >
< div class = "cardContent" >
< div class = "cardText" >
< h4 > Google< / h4 >
< p > Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.< / p >
< / div >
< div class = "cardLinks" >
< a href = "https://en.wikipedia.org/wiki/Larry_Page" target = "_blank" class = "links" > Larry Page< / a >
< a href = "https://en.wikipedia.org/wiki/Sergey_Brin" target = "_blank" class = "links" > Sergey Brin< / a >
< / div >
< / div >
< / div >
2018-09-30 22:01:58 +00:00
```