Tell us what’s happening:
Describe your issue in detail here.
The part that is not passing "X " Your img element should have a display of block .
I have tried inputting.
img { display: block; }
I have actually fixed the issue with nesting an attribute into the image like this !
styles=“display: block;”
This fixes the “X " Your img element should have a display of block
However, when I nest the attribute into the image it then makes it so i get a new” X "on a previously check marked part of my test run. The new “X” Your #image should be centered within its parent.
I have tried to add a new <div
I have used text-align: center; in my Css
There must be something that i am not seeing??? in order to fix both.
The "# " to corresponding element selectors. Am i supposed to use s different selector. am i not targeting the right element selector.
I am not sure if i am describing my problem so i can get a hint that will give me a solution here.
Not sure how to show the code for an issue that goes back and forth. Fix it one way and a new problem pops up! I’m not understanding how a fix can affect a part that has already been check marked as correct.
Your code so far
<!-- file: index.html -->
<body>
<style display: block;>
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<main id="main"
<title> Tribute Page BCI Brain Computer Interface </tilte>
<h1 id="title"> Brain Computer Interface </h1>
<figure> <div type="#img-div" id="img-div"> </figure>
<selection id="img-div">
<img id="image" src="https://www.opensourceimaging.org/wp-content/uploads/Open-Source-Imaging-OpenBCI-Featured-Headset.png"
alt="computer device,with multiple straps around computer generated mannequin head" class="responsive" rel="stylesheets" href="style-css" >
<div style="display: block;" style="display: block;"
<div id="img-div"
<div id="image-caption">
<div
id="title">
<div id="tribute-info"> Open Source Info
</div>
</div>
</div>
</div>
</div>
<figcaption id="img-caption"> Research in brain computer interface technology will change how people interact with technology.
</figcaption>
<h2> Brain Computer Interface Biotechnology </h2> <div id="tribute-info"> </div>
<p> Brain computer interface biotechnology has many potential implications in a varity of ecosystems! </p>
<section id=""
<h3> Potential ecosystems that may be impacted by BCI </h3>
<ul>
<li>
Medical biotechnology
</li>
<li>
Educational Technology
</li>
<li> Information technology
</li>
<li>
Virtual reality
</li>
<li> Law Enforcement
</li>
<li>
The applications
have Limitless potential
</li>
</ul>
<a href="https://en.wikipedia.org/wiki/Brain%E2%80%93computer_interface"id="tribute-link" target="_blank"> </a>
</selection>
</main>
</body>
/* file: styles.css */
#main {
margin: auto;
padding: 20px;
border-radius:
}
h1 {
text-align: auto;
display: block;
max-width: 100%;
}
h2 {
text-align: auto;
display: block;
max-width: 100%;
}
h3 {
text-align: center;
display: block;
max-width: 100%;
}
selection {
text-align: center;
display: block;
max-width: 100%;
}
#title {
display: color;
background: blue;
height: auto;
text-align: auto;
}
img {
display: block;
max-width: 100%;
display: block;
height: auto;
margin: 0 auto;
}
#image {
dispaly: block;
max-width: 100%;
}
#img-div {
background: blue;
padding: 20px;
margin: 0;
display: block;
}
img-caption {
display: block;
text-align: center;
}
body {
text-align: center;
display: block;
}
@media { (max-width: 459)
{
img-caption
{
font-size: 1.4rem;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 Edg/122.0.0.0
Challenge Information:
Tribute Page - Build a Tribute Page