Hello,
please check my code pen. I am building tribute page. Can you tell me how to align the text equally to the left side of the list’s dots?
So far I’ve used
h3 {
text-align: center;
}
ul {
display: inline-block;
display: center;
}
You used display: center;
instead of text-align: center;
. You must delete display: inline-block
1 Like
But when I do that, that happens:
ul {
text-align: center;
}
Umm… Isn’t that what you wanted?
I’d like each line to be lined equally vertically like this:
Ah sorry… I didn’t read the whole message… just change text-align: center;
to text-align: left;
.
1 Like
Ah, it is always so simple… lol
Thank you sir
One more thing. How to make the img element resize responsivey to the browser window’s size?
I’ve tried:
img {
height: 700px;
width: 550px;
display: inline-block;
max-width: 100%;
}
but I still get error:
1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Use the “display” style property with a value of “block” for responsive images.: expected ‘inline-block’ to equal ‘block’ AssertionError: Use the “display” style property with a value of “block” for responsive images.: expected ‘inline-block’ to equal ‘block’
Just add the class img-responsive
to your img
.
Still got passed 9 of 10 tasks
<img id="image" class="img-responsive" src="https://scontent-waw1-1.xx.fbcdn.net/v/t1.6435-9/105983605_3267490073475187_4585763948474051614_n.jpg?_nc_cat=111&ccb=1-5&_nc_sid=730e14&_nc_ohc=1Sjk4shMFCgAX9ViyfM&_nc_ht=scontent-waw1-1.xx&oh=00_AT_Gi7vyhEA6oCmUTryldn73KN8ZfBE_YAv_1g74C2kEDw&oe=6215A50C" alt="Chris Bumstead photo"></img>
Also funny thing: when I launch tribute page in full size (not in editor) the unordered list’s lines are not aligned to the left of those dots…
look please:
In the editor all looks fine in the preview
No problem Stefan, let me know later
Hello,
I’m stuck at 9/10 points in tribute page test.
I’m getting error about responsive img resize.
This is my codepen
and full size: https://codepen.io/bartosz-spychaa/full/VwrYqzw
How do I repair the
- The element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Use the “display” style property with a value of “block” for responsive images.: expected ‘inline-block’ to equal ‘block’ AssertionError: Use the “display” style property with a value of “block” for responsive images.: expected ‘inline-block’ to equal ‘block’ error?
Umm… I can see that you have passed 5/10 tests but…
For image: delete the width: auto\9; /* ie8 */
. Then, add display: block
and margin-
(left
/ right
) and set them to auto
.
did you choose tribute page test?
I think the pen didn’t autosave, check now please.
So right now it is:
img {
height: 50%;
width: 50%;
max-width: 100%;
display: block;
margin-right: auto;
margin-left: auto;
}
and still 9/10 points
Ok, I added:
}
.img-responsive {
width: 100%;
height: auto;
}
and got 10/10
Last thing, because now the picture is wayyyy to big. How to make it smaller without losing responsive resize value?
Your code should look like that:
img {
height: auto;
width: 400px;
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
Try to copy+paste that⏫ and delete .img-responsive
. (img-responsive
is a bootstrap class that makes the images responsive…)