tame rune
Hi everyone, I've been having this constant issue with width...I'll attach screenshots below.
The header image is a background image but it seems to change in size with browser.
Secondly...how do I make the yellow image stack up beside the other box with a word in it and with same width without the yellow image having a longer width...
I attached the image of what I'm aiming to do.
storm kiln
Can you share your code with us please
tame rune
Okay I'll send the srcimba link
storm kiln
I think if you give it's parent width of 100%
and then give that image max-width: 100%; this will keep the image inside
storm kiln
This did work:
.logo-egg img {
max-width: 100%;
}
Oh wow I see now....so the "img" was just what I didn't include previously
So how about the header where if I enlarge my browser , the image adjusts
storm kiln
So how about the header where if I enlarge my browser , the image adjusts
Yea it is always trying to covers the entire container because it has background-size: cover;
tame rune
Thanks for the help once again
storm kiln
Thanks for the help once again
Happy to help
tame rune
Oh and one last thing...to resize them now to same size and align center...is that with just flex box and width?
storm kiln
Keep in mind that by default, images in HTML behave as inline elements, meaning they are displayed within the flow of text and do not take up the full width of the page. If multiple images are placed next to each other, they will appear in the same line until there is no more space.
To have more control over the styling and layout of images, it is common to apply CSS rules to modify their behavior. like so:
img {
display: block;
width: 100%;
max-width: 100%;
}
display: block;: This rule changes the display property of images to "block". This makes the images behave like block elements, taking up the full width of their containing and allow you to use padding and margins.
width: 100%;: This rule sets the width of the image to 100% of its containing element's width. With this rule, the image will expand horizontally to fill the available space.
max-width: 100%;: This rule sets the maximum width of the image to 100% of its natural size. It ensures that the image will not exceed its original dimensions if the containing element becomes narrower than the image's natural width.
storm kiln
Oh and one last thing...to resize them now to same size and align center...is th...
You can give both of the children elements 50% width
.main-second {
width: 50%;
}
``` And
```css
.logo-egg {
width: 50%;
}
Yes I did this before
storm kiln
Yes I did this before
didn't work?
tame rune
Not at all
storm kiln
That's weird for me it did work correctly, take a look:
Check again maybe you did miss spell something?
tame rune
Actually 100% worked for me although it's not centered well
storm kiln
When you give it 100%, i think both elements are trying to take the whole space, so they are fighting now in the middle 😂
tame rune
True this is it on full screen with 100%
storm kiln
Note that you have to give the width to the .logo-egg not .logo-egg img
tame rune
and this on 50%
tame rune
Note that you have to give the width to the `.logo-egg` not `.logo-egg img`
Oh I see
Why does this have an img in front and its not so from the html file
storm kiln
Oh I see
Why does this have an img in front and its not so from the html file
Can you explain more? i didn't get it
tame rune
This did work:
```css
.logo-egg img {
max-width: 100%;
}
```
I mean here you wrote ".logo-egg img"
Why is it not just ".logo-egg" since my class in html is "logo-egg"
storm kiln
Yea because at first the image was the one taking more space than what it should take, so we had to tell it to only take 100% of the parent width.
So after dealing with the image and making sure that it will always follow the width of the parent, now we can just change the width of the parent which is .logo-egg
tame rune
I think I see my mistake
I had my max width set at 50%
Now it's at 100% and it seemed to have centered
storm kiln
I hope by now you did undertand how these elements are behaving so you can control them as want
tame rune
Yes I do now