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

Tips for transferring data to the next page with JavaScript AJAX

I am working on a webpage that includes an html select element <pre> $query = mysql_query("select * from results"); echo "<select id='date' onchange='showdata()' class='form-control'>"; while ($arr = mysql_fetch_a ...

javascriptphphtmlajax

Insert code into the notes section of Pug

Need help inserting a script into a comment on Pug? I have two scripts that need to be added to my website: <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="http ...

htmlexpresspug

Is there a way to create a dropdown menu that appears to emerge from behind a button?

I am struggling with the stack order of my dropdown menu. Despite using z-index, it appears in front of the button instead of behind it. I want it to look like it is coming out from behind the button. Here is my code: .subnav-wrapper { position: relat ...

htmlcss

Optimize data storage with javascript on Otree

I've been attempting to store the timestamp from a click in an Otree database, but I've tried using various codes without success. Here's the first code snippet: function myFunction() { var n = Date.now(); document.getElementById(" ...

javascripthtmlotree

Customize PrimeNG component styles

Utilizing the PrimeNG OverlayPanel for a dropdown click feature, I am encountering an issue with moving the default left arrow to the right position. Despite trying various solutions, I have reached a dead end. Would you be able to provide me with some fr ...

htmlcssangularprimeng

Click the "Add to Cart" button to make a purchase

Recently, I've been working on modeling an add to cart feature using jQuery. However, I have encountered a small issue that I'm trying to troubleshoot. When I click the mybtn button, the model displays and functions correctly, but there seems to ...

javascripthtmljquerycssmode

Are CSS3 animations limited to working only with Webkit?

Trying to create a CSS3 animation featuring a puzzle piece on my website. Below is the code I'm using. Strangely, the animation only seems to be working on Safari and Chrome. Any tips on how to make it compatible with Firefox and Opera? Appreciate you ...

firefoxgoogle-chromecssanimationwebkit

React not displaying wrapped div

I am facing an issue with my render() function where the outer div is not rendering, but the inner ReactComponent is displaying. Here is a snippet of my code: return( <div style={{background: "black"}}> <[ReactComponent]> ...

javascripthtmlcssreactjsreact-native

Strange spacing below body element discovered while browsing website in Firefox 7

Currently, I am facing an issue on my website in Firefox 7. A margin is causing the gradient in #wrapper to shift upwards from the bottom, disrupting the layout. Despite resetting the margin to 0 on body and html, I am unable to pinpoint the root of the pr ...

htmlcssfirefox7

Creative Text Container CSS Styling

Check out this website for the container I want to replicate: container This is the specific textbox: Here's how mine currently appears: I analyzed their css file and examined their html source code. I isolated the section of html and css related t ...

htmlcsstextboxwebkit

When resizing the browser window, this single horizontal page website does not re-center

I am in the process of creating my very first one-page horizontal website using jQuery and the scrollTo plugin. This site consists of 3 screens and initially starts in the center (displaying the middle screen). To achieve this, I decided to set the width o ...

jqueryhtmlcssresize

Subsequent pages are failing to load stylesheets

My HTML is not linking my CSS properly. I am using the Prologue template from html5up.com. In my main directory where index.html is located, I created a subfolder for the different products I want to display. This folder contains several files including 12 ...

htmlcss

Any recommendations besides suggesting "g"? Let's brainstorm some other ideas for g!

Looking for some assistance with a mixin I wrote that seems to be causing a loop. Any suggestions on how to optimize the code or alternative methods to achieve the desired outcome? <div class='mh-60 pt-10'>dfgdfgsdfgsdf</div> ...

cssloopssass

Updating choices within a div in real-time by changing the select box dynamically

I need to swap out the select box that is nested inside this div <div class="models"> <select disabled="disable"> <option>Model Name</option> </select> </div> I am attempting to target the div and manipul ...

javascriptjqueryhtml

What is the best way to extract the value from an anchor element?

To retrieve the value from an input tag, we can use <id>.value like this: <input type="text" #solutionInput (keyup)="0"><br> <solutionDetail [solutionName]="solutionInput.value" > </solutionDetail> Here, 'solutionInput& ...

htmlangular

Disabling the ripple effect on the primary action in React Material lists: A Step-by-Step

I was attempting to include two action buttons at the opposite ends of a list component. https://i.stack.imgur.com/juv8F.gif When clicking on the secondary action (delete icon on the right), the ripple effect is confined to just the icon. On the othe ...

javascriptcssreactjsmaterial-uimakestyles

What could be the reason for the css problems being caused by my flash banner?

My flash banner ad is being displayed on a website as an advertisement at the bottom of the page. Whenever the banner ad is shown, the scroll bar disappears. The following CSS code appears when the flash banner is active: body {margin: 0; padding: 0; over ...

htmlcssflash

Tips for concealing a parent element while inside a span with jquery

Beginner asking for help! Take a look at what I've coded: <div class="Links"> <a href="/testthis1.html" data-id="button1"> <img class="icon" src="/test1.png" alt="test1"> <span>Test 1</span> < ...

jqueryhtmlhideparent

Creating input fields using Bootstrap HTML on a single line

Struggling with Bootstrap, I can't figure out how to display the following HTML inputs in a single line: <div class="row"> <div class="col-sm-8"> <div class="form-group"> <input class="form-control" ...

jqueryhtmlcsstwitter-bootstrap

Troubleshooting code: JavaScript not functioning properly with CSS

I am attempting to create a vertical header using JavaScript, CSS, and HTML. However, I am facing an issue with the header height not dynamically adjusting. I believe there might be an error in how I am calling JSS. Code : <style> table, tr, td, t ...

javascripthtmlcss