Resize an image css

Hi, I have an image that is way too big, I am wanting to resize it using css, but when i try nothing changes. Am I doing this wrong? If so how should it be done?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
    <header>HEADER</header>
    <div id="flexbox-container">
    <div id="text">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione eveniet id provident voluptates, sed blanditiis fuga cumque aut. Laborum perspiciatis, excepturi eaque esse perferendis nulla vitae reprehenderit unde aliquid? Sed!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odio et quod explicabo libero voluptates dolorem mollitia, quia praesentium quidem quam. Itaque suscipit quae soluta expedita consequuntur, inventore cumque adipisci!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis quasi at, inventore eveniet eius eos consequatur facilis vitae obcaecati reprehenderit temporibus pariatur nemo. Commodi, iure dolorum earum error harum quam!
        <br><br>
    </div>
    <div id="text">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione eveniet id provident voluptates, sed blanditiis fuga cumque aut. Laborum perspiciatis, excepturi eaque esse perferendis nulla vitae reprehenderit unde aliquid? Sed!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odio et quod explicabo libero voluptates dolorem mollitia, quia praesentium quidem quam. Itaque suscipit quae soluta expedita consequuntur, inventore cumque adipisci!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis quasi at, inventore eveniet eius eos consequatur facilis vitae obcaecati reprehenderit temporibus pariatur nemo. Commodi, iure dolorum earum error harum quam!
        <br><br>
    </div>
    <div id="text">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione eveniet id provident voluptates, sed blanditiis fuga cumque aut. Laborum perspiciatis, excepturi eaque esse perferendis nulla vitae reprehenderit unde aliquid? Sed!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odio et quod explicabo libero voluptates dolorem mollitia, quia praesentium quidem quam. Itaque suscipit quae soluta expedita consequuntur, inventore cumque adipisci!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis quasi at, inventore eveniet eius eos consequatur facilis vitae obcaecati reprehenderit temporibus pariatur nemo. Commodi, iure dolorum earum error harum quam!
        <br><br>
    </div>
</div>
    <div id="flexbox-container-mid">
    <div id="list">
        <ul>
            <ol>Peep</ol>
            <ol>Peep</ol>
            <ol>Peep</ol>
            <ol>Peep</ol>

        </ul>
    </div>
    <div id="image">
        <img src="https://imagecolorpicker.com/imagecolorpicker.png">
    </div>
</div>


    <footer>FOOTER</footer>
</body>
</html>
footer
{
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
}

header
{
    position: relative;
    text-align: center;
    font-size: 5vh;
    font-family: 'Courier New', Courier, monospace;
}

#text
{
    position: relative;
    font-family: 'Courier New', Courier, monospace;    
}

#flexbox-container
{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

#flexbox-container-mid
{
    display: flex;
    flex-direction: row;

}

#image
{
    width: 10px; 
    height: auto;
}

We are not going to be able to view your img. “img1.png” is saved on your computer where we do not have access to that image. You will need to host the image online, and then use the url link they give you.

You also have some problems with your HTML. You have two divs with the id of “text”, that is not going to work. Id’s are unique meaning that an id of “text” can be used only on one div. If you want to select both divs the same way then you would use class instead of id

Sorry about that. I have edited the code above so that a weblink is used instead

I also added some problems with your html. Along, with my edit for the original post I noticed you have several break tags which I am assuming you are using to try to seperate the text? What you need to do is give every paragraph its own

<p> </p>

This will let the browser know where your first paragraph ends, and the next one starts. This will also start the new paragraph on a new line so you will not need the break tags

Oh I didnt realise thats how id’s worked. I will change the id to class instead.

I will try looking at the img again in a few minutes. For some reason this post disappeared for me and I couldnt find it. Unless someone else beats me to it.

So CSS has some funky rules in where the most specific selector is the one that gets styled. For example, you were selecting from the img id which was inside one of your flex divs as well. Imagine it as you had 3 layers, the outer most layer is your flex container, next is the img id, and the next is the img itself. For your issue, you are selecting the div but for you, you want to select the img itself and not the div containing the img

So, to target the img itself you would write

#img img{
height and width styles here
}

The above selector is saying that you want to target the img that is inside the #img div.
after I changed it to that, I could resize the img

Thank you for the help. I did not know that about css, so does that go for everything? For instance in the code below, would I then use ul to style rather than the id of list?

  <div id="flexbox-container-mid">
    <div id="list">
        <ul>
            <ol>Peep</ol>
            <ol>Peep</ol>
            <ol>Peep</ol>
            <ol>Peep</ol>

        </ul>
    </div>

In the example, it looks like the “list” is the only thing in your flexbox div. If you want to style every single “list” then using the “flexbox” id is fine. However, if you have more than just the list in the flexbox div, then you want to get more specific. So, it may be better to target #list

In your image example you only wanted to resize the img, and not the entire div. That is why I added the code to target the img directly.

In the same sense, if you wanted to style an ordered list directly and not all of the ordered list. You can go even further than that as well. Say, you want to only change the first ordered list item in. Then you would use something like

#list ul:first-child

this will target only the first ol in your list

I would give this a read. It breaks everything down nice and easy

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.