Responsive Image?

Responsive Image?
0.0 0

#1

Hi,
I am trying to get the image to adjust according to the size of the screen but I can see it keeps getting out of the div when resizing the browser! even the text is not adjusting properly…

Does anyone also know what is overriding the pics description which should be bold?

I already spent a couple of hours on search and try but got stuck!

Thanks to anyone willing to help


#2

Have you tried max-width: 100% ?

It is easier to help if you include a couple of lines of code


#3

sorry, you have been very quick!..I was looking for the url…here it is (https://codepen.io/belride/pen/mwdpKy/)


#4

this will fix it without changing your html

.image img {
  max-width: 100%;
}

but it looks like the parent divs, .image and .image-container were causing you some problems with targeting the image with your css


#5

Damn! you did it!..I guess there’s too much CSS probably…

what’s the difference between the 2 then?

.image img {
max-width: 100%;
}
.image {
max-width: 100%;


#6

.image img is targeting the actual < img > tag inside the .image div

but .image is only targeting the div


#7

Gotcha! I also tried to create multiple divs for the text below…the initial idea was to have the text alignment on the left but centering the div rather than having full left…couldn’t manage that therefore I worked it around using padding on the sides!

I also put the image description as bold:
.picsDescription {
font-weight: bold;
font-style: italic;
text-align: center;
}

but it doesn’t seems to change to bold? is there any other parameter overriding it?


#8

Hey it’s actually a similar problem you had with the image, as your targeting the div that’s holding the h2, rather than the h2 itself

this will fix it

.picsDescription h2 {
  font-weight: bold;
  font-style: italic;
  text-align: center;
}

Your code above would usually work - but without looking too much into your code, I think there are some other styles set for it elsewhere that is causing issues

edit - i think it’s bootstrap with font-weight:500 for h1-h6


#9

You are right, i thought about it myself and that’s the reason why I chose different heading sizes, but supposing a text with same heading size I should be able to target it by the div class if i understood well.

That’s why I thought something else was overriding it.
Thanks for your help, the changes work smoothly! I will have an other look anyway to try to catch the mistake myself to avoid repeating it next time!