Steps for creating a rubber compound with reduced elements

Sample Image Looking for a way to reduce the size of elements on a webpage without adapting them? I want the elements to shrink and align in a single column, and I will handle the adaptation myself.

HTML:

<!-- Trading -->
<div class="main-container-trading">
    <div class="container-modal-row">
        <div class="modal-row-text">lofthaus model range</div>
        <div class="container-btn-params">
            <div class="btn-params-text">Home Selection
                <div class="container-svg-icon-params">
                </div>
            </div>
        </div>
    </div>
    <div class="showcase-houses">
        <div class="container-item">
            <div class="item-1"></div>
            <div class="container-details">
                <div class="model-house">Lofthaus R70</div>
                <div class="price-house">4.465.000 ₽
                    <div class="size-house">70m2</div>
                </div>
                <div class="container-buttons">
                    <div class="btn-more-detailed">
                        <div class="btn-style-more-detailed">More Details</div>
                    </div>
                    <div class="btn-presentation">
                        <div class="btn-style-presentation">Presentation
                            <div class="container-svg-icon-pdf">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-item">
            <div class="item-2"></div>
            <div class="container-details">
                <div class="model-house">Lofthaus R70</div>
                <div class="price-house">4.465.000 ₽
                    <div class="size-house">70m2</div>
                </div>
                <div class="container-buttons">
                    <div class="btn-more-detailed">
                        <div class="btn-style-more-detailed">More Details</div>
                    </div>
                    <div class="btn-presentation">
                        <div class="btn-style-presentation">Presentation
                            <div class="container-svg-icon-pdf">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-item">
            <div class="item-3"></div>
            <div class="container-details">
                <div class="model-house">Lofthaus R70</div>
                <div class="price-house">4.465.000 ₽
                    <div class="size-house">70m2</div>
                </div>
                <div class="container-buttons">
                    <div class="btn-more-detailed">
                        <div class="btn-style-more-detailed">More Details</div>
                    </div>
                    <div class="btn-presentation">
                        <div class="btn-style-presentation">Presentation
                            <div class="container-svg-icon-pdf">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.main-container-trading {
    background-color: #6a6a6a;
    padding-left: 145px;
}

/* MODAL ROW HEADER */
.container-modal-row {
    display: flex;
    justify-content: space-between;

    border-left: 1px solid #b0b0b0;
    border-right: 1px solid #b0b0b0;

    margin-right: 145px;
    padding: 80px 40px 50px 150px;
}

.modal-row-text {
    color: white;
    font-size: 40px;
    font-weight: 400;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 83px;
}

.container-btn-params {
    display: flex;
    align-self: center;
    height: 40px;
    width: 220px;

    border: 1px solid #c8b197;
    border-radius: 50px;
}

.btn-params-text {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;

    color: white;
    font-size: 20px;
    font-weight: 400;
    font-family: sans-serif;
    line-height: 29px;
}

.container-svg-icon-params {
    display: flex;
    height: 100%;
    align-items: center;
}

/* SHOWCASE HOUSES */
.showcase-houses {
    display: flex;
    width: 100%;


    border-left: 1px solid #b0b0b0;
}

.item-1 {
    width: 536px;
    height: 340px;
    background: url("../images/item-1.jpg") no-repeat;
    background-size: cover;

    border-right: 1px solid #b0b0b0;
}

.item-2 {
    width: 536px;
    height: 340px;
    background: url("../images/item-2.jpg") no-repeat;
    background-size: cover;

    border-right: 1px solid #b0b0b0;
}

.item-3 {
    width: 537px;
    height: 340px;
    background: url("../images/item-3.jpg") no-repeat;
    background-size: cover;

    border-right: 1px solid #b0b0b0;
}

.container-details {
    padding: 35px 40px 40px 40px;
}

.model-house {
    display: flex;
    width: fit-content;

    font-size: 36px;
    line-height: 49px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: white;
    font-weight: 400;
    font-family: sans-serif;
}

.price-house {
    display: flex;
    justify-content: space-between;

    color: white;
    font-weight: 700;
    font-family: sans-serif;
    line-height: 75px;
    font-size: 36px;
}

.size-house {
    color: #DE0D0D;
    font-weight: 700;
    line-height: 78px;
}

.container-buttons {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-top: 10px;
}

.btn-more-detailed {
    width: 150px;
    height: 55px;
    border: 3px solid #c8b197;
}

.btn-style-more-detailed {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    font-family: sans-serif;
    line-height: 18px;
    text-transform: uppercase;
}

.btn-presentation {
    width: 205px;
    height: 60px;

    background-color: #c8b197;
}

.btn-style-presentation {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 10px;

    color: #000000;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 18px;
}

.container-svg-icon-pdf {
    display: flex;
}

Additional Info:

This section has been left blank intentionally.

htmlcss

Answer №1

If you're looking to style elements responsively, check out the power of Flexbox. With various options available, you can use properties like flex-direction: column; and/or flex-wrap: wrap; based on your needs.

To ensure that elements resize properly, explore responsive CSS Values and Units found in CSS Values and Units, such as %, vw, and vh (as opposed to fixed values like px).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HTML elements are replaced by codes on the screen

After setting up an ajax request to run at regular intervals, I encountered a problem when trying to navigate back. Instead of displaying the expected HTML elements, the browser showed all of my HTML code. <script> window.setInterval(function () ...

htmlajaxlaravel

Ways to incorporate gentle page breaks into an HTML document

My task involves creating an XSL script to analyze various XML files that share a similar structure. The aim is to parse these XMLs and transform them into HTML pages. For longer XML documents, I want the resulting HTML page to be paginated (meaning the pa ...

htmlcssxslt

The inefficiency of invoking Jquery on elements that do not exist for the purpose of caching

What is the impact if JQuery attempts to access elements that do not exist? Will there be any significant CPU overhead other than script loading? Does it matter if this is done for a class or an id? For optimization purposes and to minimize simultaneous c ...

javascriptjqueryhtml

Tips for modifying button styles with CSS

I am facing an issue with a submit button on my form. The button currently has an image, which is unnecessary as the same image is used elsewhere on the page. I believe there might be a parent-child element problem preventing me from making the necessary c ...

htmlcssforms

What is the role of the .connect() method in Web Audio nodes?

Following the instructions found here, which is essentially a copy and paste from this I think I've managed to grasp most of it, except for all the node.connect()'s As far as I can tell, this code sequence is necessary to supply the audio anal ...

javascripthtmlweb-audio-api

What is the best way to design a Global Navigation menu for websites?

For example, I am looking to integrate a Navigation menu into my website using just one file. I have considered using PHP or creating an HTML frame, but I am wondering what the current industry standard is for professionals. Any insights? ...

javascriptjqueryhtmlcssnode.js

Expand the image to fill the entirety of the viewing area

Check out my development website. Whenever you click on an image, a photo slider (using photoswipe) pops up. Is there any way to have the image fill the entire viewport? I attempted using height: 100vh, width: auto, but it didn't work. ...

javascriptcssvue.jssassviewport

I'm looking for recommendations on the best technologies to implement in a location-based mobile app. Any suggestions

Currently working on a server-side website tailored for mobile devices. My main objective is to create a member system where users can log in and share their geolocation data. Once logged in, the user's geolocation information will be stored in my dat ...

phpmysqlhtmlgeolocation

Initiating a Page with Dynamic Modal Window according to Backend Exigencies

Dear experts, can you help me with a problem? I want to implement a modal window on an vb.aspx page if a specific condition from the codebehind query is true. How can I achieve this? Thank you! ...

javascripthtmlasp.netvb.netvisual-studio

Bootstrap4 lacks responsiveness

html, body { background-color: #E3E3E3; width: 100%; height: 100%; margin: 0; padding: 0; } /* Custom Styling */ .section1 { background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed; -webkit-background-size: cover ...

htmlcssbootstrap-4

Incorporate my personalized CSS file into the Bootstrap 4 development tools

Is it possible to customize Bootstrap 4 variables with build tools as outlined in this guide? I am wondering how I can create a separate CSS file named MyCustomStyles.css at the end of the build process by running npm build dist. I have created a _MyCusto ...

cssnpmbootstrap-4

Combine the elements within the HEAD tag into a group

I am currently developing a dynamic page system using AJAX. Whenever a link is clicked, an AJAX call is made to retrieve data from the requested page. However, I have encountered an issue where certain data in the page file needs to be placed within the h ...

javascriptphpjqueryhtmlajax

Creating a notification for specific choices in a dropdown menu

I am working on a form that includes a select element with multiple options. Depending on the option selected, a different form will be displayed. My concern is if a user starts filling out one form and then decides to select another option, I want to add ...

javascriptjqueryhtmlcssforms

Moving the mouse over a div will alter the heading of another div

Trying to find a solution for a unique problem. I have 5 boxes and need to style one box with a different heading color. As I hover over the other 4 boxes, I want the active box heading to change to a new color. The color should remain even after moving th ...

jquerycssmouseoverjquery-hover

Can you explain the meaning of this compound CSS selector?

.btnBlue.btnLtBlue Is this referring to an element that has both the classes btnBlue and btnLtBlue applied? ...

csscss-selectors

Embedding PHP code within the value attribute of an HTML element is

Hey there! I'm looking to perform a database search and then display the results in a pre-populated HTML form for the user. I've pinpointed the issue in my code where PHP is not being recognized by the server. I'm currently using UwAMP. To ...

phphtmlmysqlmysqliserver-side-validation

Tips for generating an input element using JavaScript without the need for it to have the ":valid" attribute for styling with CSS

My simple input in HTML/CSS works perfectly, but when I tried to automate the process by writing a JavaScript function to create multiple inputs, I encountered an issue. The input created with JavaScript is already considered valid (from a CSS ":valid" sta ...

javascripthtmlcss

JavaScript failing to accurately measure the length

Currently experiencing a Javascript issue where the length of an element is not displayed correctly when using .length, even though it shows up in Chrome console. Here is what it looks like in Chrome console <html xmlns="http://www.w3.o ...

javascripthtmlcssconsole.logvariable-length

What is the most effective method for developing and hosting a Python web application that can securely collect user input and store it in SQL databases?

Currently, I am embarking on a project to streamline data entry for myself. I have SQL tables set up in an Azure database, and I can effortlessly write Python code to add data to them. However, my next endeavor is to develop a web application that allows ...

pythonhtmlsqlflaskweb-applications

Error: Unable to assign value to property 'src' because it is null

Currently, I am attempting to display a .docx file preview using react-file-viewer <FileViewer fileType={'docx'} filePath={this.state.file} //the path of the url data is stored in this.state.file id="output-frame-id" ...

javascripthtmljqueryreactjs