Blogr landing page with HTML, CSS Grid/ Flex, JavaScript

@grizhlieCodes -thanks! solved!

@Duyen-codes For the background issue:

/*This works for me, tested on desktop. I moved the image to the front, linear to the back, not colour accurate to the design btw, I just threw in some numbers so I could see the gradient properly hehe*/

header {
     background: url(./images/bg-pattern-intro-desktop.svg), linear-gradient(to  bottom right, hsl(13, 100%, 72%), hsl(360, 100%, 72%))

}

@Duyen-codes I can't spot what the issue with phone-image is. Perhaps I don't understand the problem?

@grizhlieCodes This bg issue been solved! Thanks a lot!

@grizhlieCodes In the design:

• on desktop, the phone on the right has a bit of bottom being outside of the dark purple background -on mobile, both phones half stay inside of the purple background, half is outside.

@Duyen-codes Ohhhh. I sort of ignored the design like an idiot :)

Ok gotcha. Well there's multiple solutions for this.

The important thing to understand is how your .art-container is settings its height. At the moment the one thing setting this height is the img basically. So our goal here is to potentially set a max-height on .art-container so it doesn't grow beyond a certain point.

This goes back to what I was talking about yesterday. Don't set height if you can avoid it. But min-height and max-height will be tremendously useful as it can help us follow designs a bit more closely if you know that the text contained won't overflow etc.

Because this change is for desktop size we can be sure that us setting a max-height won't mess anything up.

Set max-height: 400px; for your .art-container.

Then remove position: relative; top: -80px; from the img.

This should work. The 400px is a random amount I chose, choose whatever is closest to the design, I just eye-balled it.

So now our container wants to grow because of the image but it can't beyond the max-height we set. Our image will be its' original size in pixels because we haven't set any width/height for it. And it will overflow nicely.

This could be further improved but it's A WAY you can achieve this with very little work for the desktop view. If you need a more robust solution I'd recommend using display: grid; on your .art-container and just making a grid that contains everything. In fact I would personally use grid.

@grizhlieCodes Right, I tried the first approach you suggested. Setting max-height of 400px for desktop view seemed to solve the problem in desktop. On mobile, it does not. I'll try to use grid as you suggested. But tbh, I am not really sure how to make the phones position as design with grid either.

@Duyen-codes Don't worry. Try the grid approach and I'll build one as well when I get a moment during my free time. You can compare etc. Might make it into a video in the end since it's a common problem to solve and perhaps just share my process/thinking as I build it. Will reply here once I build the codepen.

@grizhlieCodes Thanks a lot! I am looking forward to your finished project. I'll try to complete on my own meanwhile as much as I possibly can. If only you were my mentor :)

@Duyen-codes Not the worst idea. Could be a good way of me knowing what I don't know (explaining something well = knowing, not being able to explain it = not knowing).

Feel free to add me on discord if you have it:

Grizhlie#4547

@Duyen-codes https://codepen.io/grizhlie/pen/poWENeB?editors=1100

Quick demo of grid for that mobile image and some text. Firefox is the best browser when it comes to understanding CSS btw, I highly recommend it.

@grizhlieCodes Thanks! I'm reading the codes and trying to understand them. You're awesome!

@Duyen-codes All good. Take your time with grid, it's an amazing tool.

@grizhlieCodes Yeah I cant agree with you more on that! I'll take my time with it. Thanks again.