@maciejkrol18
Posted
You placed the background images in a correct way 👍 In order to make the background images responsive, you need to create a media query in your .css file - a media query is a set of rules that apply while certain criteria is met, like the devices screen width. Media queries are a core element when it comes to making a site responsive. In order to apply different styling to different screen sizes, create a media query like so (by typing this stuff in at the end of your .css file, preferrably):
@media screen and (max-width:810px) {
/* things go here, in your case... */
.tlc {
background-position:top /*value*/ left /*value*/, right /*value*/ bottom /*value*/;
}
}
Making it like so will apply the specified rules to the .tlc class when the screen width gets lower than 810px, which will be fine for mobile devices (change the value if you want). Tweak the background-position values so that the background looks like on the provided mobile design.
One more suggestion, work on your file readability. Pay more attention to things like tabbing, spaces etc. Also some of your classes are empty with no rules set (for example the .child2 class) - do not use empty rulesets, you can remove those.
There's lot of things to learn, definitely not bad for your first project here, good luck.
Read more about media queries here if you want: https://www.w3schools.com/css/css_rwd_mediaqueries.asp You can learn tons of other things on w3schools, from the basics to advanced stuff as well
