Issue with CSS/SASS within a container containing multiple elements

I am experiencing an issue with an image that I have built:

box

Initially, the image appears to be a box with 4 elements inside. However, when I resize the window, the layout gets distorted. I am unsure which property I am using incorrectly, so I will provide a .gif to demonstrate the issue:

https://i.sstatic.net/1z2wC.jpg

Here is the result when I resize the window: THIS IS THE MESS WHEN I RE-SIZE THE WINDOW Below is my code:

HTML:

<div class="containerRebalance">
<div class="firstTittleRow1">
 <div class="iconwarning">
   <mat-icon  [ngStyle]="{'color':'#f06f0f'}">warning</mat-icon>
 </div>
<div class= secondTittleRow>
  <div class="textoWarning">
    Para enviar tu solicitud de modificación, es necesario
    que los porcentajes de participación por cada
    beneficiario sea mayor a cero y que la suma de las
    participaciones en cada prioridad sea igual al 100% 
  </div>
 </div>
 <div class="linetext">
 <div class="texto1">
  <p class="texto1">
    ¿Desea repartir en partes iguales el porcentaje
    de participación de la  {{prioridad}}?
  </p>
 </div>

   <div class="texto2">
    Yes
  </div>
  <div class="texto2">
   No
 </div>
 </div>
 </div>
 </div>

SASS

.texto1
  float: left
  margin-top: -1px
  margin-left: 12px
  font-size: 14px
  line-height: 21px
  font-family: "Titillium Web", sans-serif
  font-weight: 400
  color: rgb(96, 110, 125)
.texto2
  font-size: 14px
  line-height: 21px
  font-family: "Titillium Web", sans-serif
  font-weight: 400
  color: rgb(96, 110, 125)
  float: right
  padding-right: 55px

.iconwarning
  float: left
  padding-top: 24px

.firstTittleRow1
  padding-left: 10px
  height: 73px
  display: block

.linetext
  display: block

.textoWarning
  font-size: 14px
  line-height: 18px
  font-family: "Titillium Web", sans-serif
  font-weight: 400
  color: rgb(96, 110, 125)
  padding-top: 20px

.secondTittleRow
  display: flex
  padding-left: 10px
  height: 73px

.containerRebalance
    height: 113px
    background: #fdf6e9
    border: 1px solid #f9ce93
    color: #4d5966
    font-size: 0.75rem
    font-family: Roboto-Medium
    align-items: center
    padding: 0 0.9375rem
    line-height: 17px
    margin-top: 48px
    padding-bottom: 1px

How can I prevent the elements from becoming distorted while maintaining their order within the main square? I don't mind if the buttons move down, as long as the main layout stays intact. Thank you very much.

htmlcssangularbootstrap-4sass

Answer №1

Make these adjustments to the styling: Remove fixed heights from .containerRebalance, .secondTittleRow, and .firstTittleRow1. Add display:flex to .containerRebalance.

.containerRebalance
// height: 113px 'Remove This'
background: #fdf6e9
border: 1px solid #f9ce93
color: #4d5966
font-size: 0.75rem
font-family: Roboto-Medium
align-items: center
padding: 0 0.9375rem
line-height: 17px
margin-top: 48px
padding-bottom: 1px
display: flex

.firstTittleRow1
  padding-left: 10px
  // height: 73px 'Remove This'
  display: block

.secondTittleRow
  display: flex
  padding-left: 10px
  // height: 73px 'Remove This'

For a better visual representation, visit this link

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

Customize scripts dynamically in Next.js based on the current environment during runtime

I need to dynamically insert a script into the <head> of my application, with the src attribute depending on a runtime environment variable from my hosting server (OpenShift). If process.env.ENVIRONMENT === "test", I want to add <script ...

htmlreactjsopenshiftnext.jsserver-side-rendering

I need assistance in utilizing my PHP variable UserNameID to remove the specific user's row from the database

I want to give users the option to delete their account from the database with a simple button click on my php forum. See the code snippet below: <div class="btn-group"> <button style="width:200px" type="button" class="btn btn-primary"> ...

phphtmlmysql

Exploring the Depths of JSON Arrays within Typescript

I am faced with a challenge in extracting the value of the "id" from the following array of JSON data. The issue lies in the fact that the value is enclosed within double square brackets "[[" which are causing complications in retrieving the desired result ...

javascriptarraysjsonangulartypescript

Enhancing the 'UserDetails' model in ASP.NET Angular project (dotnet core 3.0) to accommodate additional user information

Currently working on an ASP.NET Web application with Angular as the front end, using the new template in VisualStudio 2019 for ASP.NET angular with Individual Authentication. This project runs on dotnet core 3.0 Preview 4. https://i.stack.imgur.com/RUKdg. ...

asp.netangularvisual-studio-2019asp.net-core-3.0

Utilizing Binding Time in Angular for Enhanced Views

I am completely new to Angular JS. I have a simple question that I have been searching for answers on SO. My goal is to display the current time in real-time (refreshing every second as the clock ticks) on my view. Here's what I have tried so far: H ...

javascripthtmlangularjs

Organize the structure of a JSON object in AngularJS to generate a hierarchical unordered list

Greetings! I am working with a RESTful API that returns a JSON object structured like this: { data: [ { id: 4, name: "Naranja", cant_portion: 2, portion_name: "Piezas", foodgroup_name: "Frutas" } ...

htmlangularjslaravel

How can content be kept from dropping below a stationary header?

One thing I've noticed when creating a fixed header is that I often resort to using padding in order to push the content back into view if it falls below the header. Is there a way to create a fixed header without relying on padding or margin to keep ...

htmlcss

I am struggling to make the sticky-top navbar overlap with the following element in Bootstrap 4

UPDATE: see an example of the desired effect here SECOND UPDATE: The solution turned out to be quite simple. I had separated my header and footer into a different file and mistakenly placed the navbar outside the body tag. Moving it inside the body tag, s ...

bootstrap-4navbarsticky

How to access properties of objects within an array in Angular 4

Is there a method to call only the $values from each rate record in my array that I want to read? https://i.sstatic.net/MT2XK.png This is what I have done to access this array: async ngOnInit() { this.product$ = await this.reviewService.getReview(th ...

arraysangulartypescriptobject-property

Fixing the Jquery animation glitch triggered by mouseover and mouseout

In my project, I have implemented a small mouseover and mouseout functionality. The challenge I am facing is that I need to keep the mouseout function using animate() instead of css() for specific reasons. The issue arises when I quickly do a mouseover fo ...

javascriptjqueryhtmlcssanimation

Is there a way to shift this structure to the right without relying on the float property?

Here's the HTML and CSS I have - .font-size-add-class { background-color: #2f2f2f; color: #f9f7f1; } .font-sizes { text-align: right; display: table; margin-top: 15px; cursor: pointer; } .font-sizes > .small { font-size: 12px; } .font ...

css

Looking to clean up unnecessary <b></b> tags from my Wordpress website - how can I do this?

One of my sites is located at . When inspecting the source code through the browser, I noticed the presence of empty tags. Does anyone know why these empty tags are being generated and how they can be removed? I have thoroughly searched through all files ...

javascriptphphtmlcsswordpress

How can the ChangeDetectorRef be leveraged to identify and respond to changes in component state for seamless integration with the material stepper component

While working with the Angular 8 Material Stepper, I am validating form states and setting stepCompleted to true when the conditions pass. You can view a demo of this functionality on Stackblitz: https://stackblitz.com/edit/angular-mat-stepper-demo-with-f ...

javascriptangulartypescriptangular-material

Using JQuery to nest a header tag within a div element

Having trouble adding a header to a div element. The h1 tag just shows 'loading' and I'm not sure why. <div data-role="page" id="addviewtask"> <div id="header" data-role="header" data-theme="a" data-position="fixed"> ...

jqueryhtml

Error: The module 'AppModule' has encountered an unexpected value 'CalendarComponent'. To resolve this issue, please include a @Pipe/@Directive/@Component annotation

Recently, I started working with Angular 2 and wanted to incorporate the 'schedule' feature from Primeng. To do so, I installed its package and added the calendarComponent in my app.module.ts file as shown below: import { BrowserModule } from &a ...

angular

Leveraging React Native to position a view absolutely in the center of the screen without obstructing any other components

How can I center an image inside a view in the middle of the screen using position: "absolute"? The issue is that the view takes up 100% of the width and height of the screen, causing all components underneath it (such as input fields and buttons ...

javascriptcsstypescriptreact-nativeexpo

The Highcharts Range Selector feature may encounter issues when used with multiple series

Currently, I am facing an issue with my highchart/highstock where I retrieve data from a PHP file. The problem arises when I attempt to use multiple series as the RangeSelector Buttons cease to function properly. For instance, in the example provided, the ...

javascriptphphtmlchartshighcharts

Tips for organizing Jasmine unit tests to prevent them from becoming overly lengthy and cluttered

Ensuring that my unit tests are both readable and maintainable is a top priority for me. Instead of cramming all tests into one file, which seems to be the current "best practice," I believe this can actually hinder the quality of the codebase in the long ...

angularunit-testingjasminecomponents

Creating an accordion using HTML and jQuery allows for dynamic and interactive content organization

I am trying to incorporate an "ACCORDION" feature into my application using HTML and jQuery. Within this implementation, I have nested accordions. Below is a snippet of my code: <div class="row-fluid"> <div id="filtersContainer" class="span1 ...

jqueryhtml

The primary objective of utilizing margin

Just embarked on my journey to mastering HTML and CSS. Regarding the 'margin' property: Does its primary function revolve around centering elements horizontally on a webpage? I've crafted a navigation menu for a website, yet I struggle to ...

htmlcssmargin