Skip to content
Submitted over 1 year ago

Mobile first Responsive Result Summary Component

Finney•3,030
@Finney06
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello community, please help me out with the white section part of the design, I've been trying to make the blue section flow into the white section. Anyway I could go about it...?

Community feedback

  • 22Theresecodes•80
    @22TheresecodesPosted over 1 year ago

    I haven't tried this challenge but I know the Z-index property is used for overlapping, you can try it and see if the blue section will "flow" into the white section.

    Marked as helpful
    1
  • Jeff Baldwin•30
    @jbaldwin406Posted over 1 year ago

    One way to get it to 'flow' is to create a container div that will hold the blue section and the white section. So your code would have a container div and then inside that div you have one for the blue and one for the white. The white div doesn't has the same background color as the container div, so it looks like it is part of it, while the left side (blue one) has a background color so it looks like it is flowing over top the white. Hopefully that made sense, if not I am happy to explain more in detail.

    0
    Finney•3,030
    @Finney06Posted over 1 year ago

    @jbaldwin406 I kind of get you but explain in more details please.

    0
    Jeff Baldwin•30
    @jbaldwin406Posted over 1 year ago

    @Finney06 sure thing!

    For this challenge I thought of it as there are three main sections. The main container: this will be the overall 'card' that we see. The left container: This will hold the content we see on the left side. And is inside the main container. The right container: This will hold the content we see on the right side. And is inside the main container.

    We are using the main-content div as the parent flex box and the left and right containers are the children.

    Hopefully below example will better show what I am saying. I included a dashed border around the right-content div to show the area it is taking up. Without that border, it just looks like part of the main-content div.

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main-content">
	<div class="left-content">
    	<p>Your content goes here</p>
    </div>
    <div class="right-content">
    	<p>Some more content here</p>
    </div>
</div>
</body>
</html>
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord