https://codepen.io/freeCodeCamp/pen/MJjpwO is my pen!
-
User Story #8: The
img
element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Any feedback on my project is also recommended!
https://codepen.io/freeCodeCamp/pen/MJjpwO is my pen!
img
element should responsively resize, relative to the width of its parent element, without exceeding its original size.Any feedback on my project is also recommended!
There is no code in your pen
my html is :
Bill Gates is a business genius who growing up had interests in computers. He is one of the many billionares we have in the world today who dropped out of college and started a technology corporation called Microsoft.
"Ultimately, the PC will be a window to everything people are interested in-and everything we need to know."- Bill Gates
Some see him as an innovative visionary who sparked a computer revolution. Others see him as a modern-day robber baron whose predatory practices have stifled competition in the software industry. Regardless of what his supporters and detractors may think, few can argue that Bill Gates is one of, if not the most successful entrepreneur of the 20th century. In just 25 years, he built a two-man operation into a multibillion-dollar colossus and made himself the richest man in the world somewhere along the way. Yet he accomplished this feat not by inventing new technology, but by taking existing technology, adapting it to a specific market, and then dominating that market through innovative promotion and cunning business savvy.
My CSS:
body {
text-align: center;
background-color: #046860;
}
h1 {
font-family: sans-serif;
font-size: 2em;
}
#image {
max-width:none;
border: 2px solid red;
background: green;
text-align:center;
}
#img-caption {
height: 100%;
width: auto;
}
p {
font-family: sans-serif;
}
Firstly remove
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js.
from the js section and add this to the top of your html file
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
Also try to remove any in-line css,while it is not wrong it’s not recommend
And to fix the image issue use:
#img{
margin-left: auto;
margin-right:auto;
}
updated it but I don’t think it helped
When I said to remove the in-line css I meant to move it to the css section of the codepen. Also at mistake on my part, the code should be under the #image
id in the css section and I didn’t think you’d remove your remaining code.
#image {
max-width: 100%;
display: block;
margin-left: auto;
margin-right:auto;
}
This fixes the issues, as I just tested it.
You also have one more test to complete but I’ll allow you to try and figure that one out.
Thank you figured it out