Is there anything I can modify in either the HTML or CSS code to achieve the desktop layout I envisioned?

Question

Is there anything I can modify in either the HTML or CSS code to achieve the desktop layout I envisioned?

I have been striving to replicate this https://i.sstatic.net/B0Qkb.jpg desktop design.

The mobile version has already been crafted, but when I attempt to adapt it for desktop, I'm utilizing a specific flex property called row-reverse. However, the outcome turns out like this: https://i.sstatic.net/xTN9B.jpg

I am currently puzzled about how to adjust the positioning to match the desktop design and have been grappling with this issue for the past few days.

Could someone kindly enlighten me on what I might be doing wrong and provide guidance on resolving this problem?

@import url('css-reset.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap');

:root {
    --color-main-background: hsl(233, 47%, 7%);
    --color-card-background: hsl(244, 38%, 16%);
    --color-soft-voilet: hsl(277, 64%, 61%);
    --color-white-main: hsl(0, 0%, 100%);
    --color-white-paragraph: hsla(0, 0%, 100%, 0.75);
    --color-white-stats: hsla(0, 0%, 100%, 0.6);
    --font-weight-four: 400;
    --font-weight-seven: 700;
}

body {
    background-color: var(--color-main-background);
    font-weight: var(--font-weight-four);
    color: var(--color-white-main);
    margin: 0;
}

.container {
    display: grid;
    grid-auto-flow: row;
    border-radius: 10px;
    justify-content: center;
    text-align: center;
    align-self: center;
    max-width: 350px;
    min-height: 750px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
  
    background-color: var(--color-card-background);
    overflow: hidden;
}


picture>* {
    width: 100%;
    max-height: 100%;
    object-fit: cover;

...
</body></html>

html css flexbox

Answer 1

Answer №1

Hopefully, this guide will assist you in restructuring your section.

I attempted to recreate your design by taking a slightly different approach:

To begin with the main div (container), I divided it into two child divs by applying d-flex to the container for alignment purposes. Within the left div, I created two additional divs: one containing the header and paragraph, and the other housing the three stats and heading. My recommendation would be to wrap each stat and heading in its own div, allowing for proper alignment across desktop and mobile devices using d-flex and related flex-direction properties.

    html,
        body {

            height: 100%;
        }

        div {
            border: 2px solid red
        }

        .container {
            display: flex;
            align-items: center;
        }

        .box-left {
            width: 50%;
            background-color: blueviolet;
            height: 500px;
            display: flex;
            flex-direction: column;
            justify-content: center;


        }

        .box-right {
            width: 50%;
            background-color: brown;
            height: 500px;
            width: 50%;
            background-image: url(https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
            background-size: cover;

        }

        .box-bottom {
            display: flex;
            justify-content: space-between;
        }

        .text-wrapper {
            padding: 50px;
        }


        @media (max-width:768px) {
            .container {
                flex-direction: column-reverse;

            }

            .box-left,
            .box-right {
                width: 100%;
            }

            .box-left {
                text-align: center;
            }

            .box-bottom {
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }

<body>
    <div class="container">
        <div class="box-left">
            <div class="text-wrapper">
                <div>
                    <h1>Your title here</h1>
                    <p>It is a long established fact that a reader will be distracted by the readable content of a page
                        when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
                        distribution of letters, as opposed to using 'Content here, content here', making it look like
                        readable English.</p>
                </div>
                <div class="box-bottom">
                    <div>
                        <h2>10k</h2>
                        <p>SOMETHING</p>
                    </div>
                    <div>
                        <h2>10k</h2>
                        <p>SOMETHING</p>
                    </div>
                    <div>
                        <h2>10k</h2>
                        <p>SOMETHING</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-right">

        </div>
    </div>
</body>

Answer 2

Hopefully, this guide will assist you in restructuring your section.

I attempted to recreate your design by taking a slightly different approach:

To begin with the main div (container), I divided it into two child divs by applying d-flex to the container for alignment purposes. Within the left div, I created two additional divs: one containing the header and paragraph, and the other housing the three stats and heading. My recommendation would be to wrap each stat and heading in its own div, allowing for proper alignment across desktop and mobile devices using d-flex and related flex-direction properties.

    html,
        body {

            height: 100%;
        }

        div {
            border: 2px solid red
        }

        .container {
            display: flex;
            align-items: center;
        }

        .box-left {
            width: 50%;
            background-color: blueviolet;
            height: 500px;
            display: flex;
            flex-direction: column;
            justify-content: center;


        }

        .box-right {
            width: 50%;
            background-color: brown;
            height: 500px;
            width: 50%;
            background-image: url(https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
            background-size: cover;

        }

        .box-bottom {
            display: flex;
            justify-content: space-between;
        }

        .text-wrapper {
            padding: 50px;
        }


        @media (max-width:768px) {
            .container {
                flex-direction: column-reverse;

            }

            .box-left,
            .box-right {
                width: 100%;
            }

            .box-left {
                text-align: center;
            }

            .box-bottom {
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }

<body>
    <div class="container">
        <div class="box-left">
            <div class="text-wrapper">
                <div>
                    <h1>Your title here</h1>
                    <p>It is a long established fact that a reader will be distracted by the readable content of a page
                        when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
                        distribution of letters, as opposed to using 'Content here, content here', making it look like
                        readable English.</p>
                </div>
                <div class="box-bottom">
                    <div>
                        <h2>10k</h2>
                        <p>SOMETHING</p>
                    </div>
                    <div>
                        <h2>10k</h2>
                        <p>SOMETHING</p>
                    </div>
                    <div>
                        <h2>10k</h2>
                        <p>SOMETHING</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-right">

        </div>
    </div>
</body>

Is there anything I can modify in either the HTML or CSS code to achieve the desktop layout I envisioned?

Answer №1

Similar questions

Tips for configuring a file using javascript and angular.js

Expand the div to fit one side of the browser

How can I use XPATH and Python Selenium to select the text node that is outside of an <a> element?

The seamless integration of React.js with HTML

Choose the first element of its type and disregard any elements nested within it

What are the steps for incorporating validation in bootstrap 4 css?

Utilize Jquery to toggle text input forms based on radio button selections

Tips for aligning buttons in the center of a card both vertically and horizontally

What is the best way to connect a CSS file with multiple pages located within a specific folder in HTML/CSS?

Is there a way to dynamically set the width in CSS based on the width of characters used?

Hide the div once it goes off screen, ensuring that the user stays in the same position on the page

Chrome does not recognize the 'position: fixed' style attribute

What is the most efficient way to define the font properties for all H1-H6 headings in a single declaration

Steps for dynamically adjusting form fields depending on radio button selection

What is the best way to incorporate modal window parameters into this code snippet?

How to use a loop to alternate CSS classes in HTML?

Adjust the position of the remaining li elements to accommodate the increased height of a single li element

Issue with white spaces in footer content in Chrome browser

Display information from Node.js on an HTML page

The header that sticks on scroll is annoyingly blocking the content