search

Media-Ed-Online / intro-web-dev-2017aut

Site for course "Introduction to Web Design and Development."
https://media-ed-online.github.io/intro-web-dev-2017aut/
MIT License
12 stars 3 forks source link

@media #114

Open CatOrfanos opened 6 years ago

CatOrfanos commented 6 years ago

Could someone help with the @media function?

So far my page is working great! I am just trying to have my picture on the right "shrink" when the page gets smaller before it moves below my left content... I am not sure how to do that! I was able to make the text "shrink" but I would like the picture to also.

(hopefully what I am describing makes sense!) :)

screen shot 2017-12-05 at 10 57 03 am screen shot 2017-12-05 at 11 16 13 am screen shot 2017-12-05 at 11 16 28 am screen shot 2017-12-05 at 11 16 44 am
JonSwallow commented 6 years ago

@CatOrfanos Hey I am not sure but don't you have the picture set to the same size in both max and min width? Would something like this work? @media .rightcontent img (max-width: 400px) and (min-width: 200px){}

CatOrfanos commented 6 years ago

@JonSwallow Thanks for your help I was able to figure it out just by including:

img { max-width: 100% }

in my style page. I took out the other stuff and this alone worked!