What is causing the extra space on the right side of the box?

I've been struggling to align text next to an image inside a box.

Desired outcome

CSS:

#roundedBox {
    border-radius: 25px;
    background: #363636;
    width: auto;
    height: auto;
    margin: 10%;
    display: flex;
    position: relative;
    
  }

#aboutUsImage {
    max-height: 480px;
    margin-right: 3%;
    margin-left: 4%;
    margin-top: 2%;
    margin-bottom: 2%;
    border-radius: 5%;
    
}

#aboutUsTitle {
    font-size: 20px;
    padding-top: 10%;
    text-align: left;
    
}

#aboutUsText {
    font-size: 14px;
    font-weight: 300;
    line-height: normal; 
    width: 30%;
    text-align: left;
    
}


#aboutUsText2 {
    font-size: 14px;
    font-weight: 300;
    line-height: normal; 
    width: 30%;
    margin-top: 10px;
    padding-top: 30px;
    text-align: left;
    
}

Javascript:

 <Grid id="roundedBox">
  
  <Image id= "aboutUsImage" src={aboutUs} />

  <Box>
  <Heading id = "aboutUsTitle"> About us</Heading>
  
  <Text id = "aboutUsText"> Founded in 2021, Coded Solution aims to create a secure underlying infrastructure platform for blockchain databases through consensus algorithms of the innovative supernode PoS consensus mechanism.</Text>
  
  <Text id = "aboutUsText2"> This creates solutions for everything including smart contract, wallet, explorer, app, frontend and backend, which is unique in the current market.</Text>

  </Box>
  </Grid>

Result: Huge space on the right side of the code

The outcome shown above is not ideal as there is excessive spacing next to the title and its corresponding paragraph.

javascriptcsstextnext.jstheme-ui

Answer №1

Modify the following...

#aboutUsText {
    font-size: 14px;
    font-weight: 300;
    line-height: normal; 
    width: 30%;
    text-align: left; 
}


#aboutUsText2 {
    font-size: 14px;
    font-weight: 300;
    line-height: normal; 
    width: 30%;
    margin-top: 10px;
    padding-top: 30px;
    text-align: left;
}

...to this.

#aboutUsText {
    font-size: 14px;
    font-weight: 300;
    line-height: normal; 
    width: auto;
    text-align: left;
}


#aboutUsText2 {
    font-size: 14px;
    font-weight: 300;
    line-height: normal; 
    width: auto;
    margin-top: 10px;
    padding-top: 30px;
    text-align: left;
}

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

How can I delete an item from an array when I click on a selected element using Material React Select Multiple?

I found this helpful CodeSandBox demonstration that walks through how to implement a multiple material select feature. Here is an array containing all the available options: const permissionsGroupList = [ { name: 'Sellers' }, { name: &a ...

javascriptreactjsmaterial-ui

The custom tab component in React is currently not accepting the "disabledTabs" prop

I have designed a tab component as shown below: tab/index.jsx import React from 'react'; import TabHeader from './header'; import TabBody from './body'; import TabHeaderList from './header/list'; import TabBodyList ...

javascriptreactjs

What is the best method to activate a button only when the appropriate radio buttons have been chosen?

Just dipping my toes into the world of javascript. I've created a form with a set of "Yes/No" radio buttons, and I attempted to create a function that will disable the "Submit Form" button if any of the following conditions are met: If one or more r ...

javascripthtmlformsbuttonradio-button

Issues encountered when attempting to send Jquery Ajax due to UTF-8 conflicts

I created a JavaScript script to send form data to my PHP backend. However, the text field was receiving it with incorrect encoding. Here is the meta tag on my website: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Here&apo ...

javascriptphpjqueryajaxutf-8

What is the reason behind React deciding to skip the final question, even though it has been accurately saved to the

A simple web application was developed to calculate risk scores by asking five questions, with additional points awarded if a checkbox is checked. Despite extensive hours spent debugging, a persistent bug remains: the final question does not appear on the ...

javascriptreactjs

Parent's hover element

I am currently working with the following loop: <?php if( have_rows('modules') ): $counter = 0; while ( have_rows('modules') ) : the_row(); ?> <div class="col span_4_of_12 <?php if($counter == 0) { ?>firs ...

javascriptphpjquery

Is it the same item in one situation, but a completely different item in another?

I am currently investigating the behavior of objects in JavaScript, particularly when it comes to copying one object onto another. It seems that sometimes they behave as if they are the same object, where modifying one also modifies the other. Many resourc ...

javascriptvue.jsvue-component

Retrieving data from a <span> element within a webpage created using ReactJS

I am completely new to the world of web design and development, so there may be some mistakes in my request. Essentially, I have a webpage that contains numerous span tags like the following example: These span tags are part of a significantly large DOM t ...

javascripthtmldomreactjs

Obtain asynchronous state in VueJS without the need for intricate v-if conditions

I am working on an application that heavily relies on Vue-Router and Vuex for state management. Within the Dashboard component, important user information is displayed. This data is fetched asynchronously from a database by Vue and then stored in Vuex. T ...

javascriptvue.jsvuexvue-router

Issue: Failed to retrieve configuration settings due to the inability to connect with the query-engine-node-api library in Prisma and nextjs framework

In my setup, I am using a fresh project in Next.js with Prisma and a Supabase database on Ubuntu. When running the Prisma push and generate commands in my project, I encounter the same error with both npm and yarn even though I have run all Prisma commands ...

postgresqlnext.jsprismasupabasesupabase-database

What impact does adding 'ng' in unit tests have on how promises are handled?

Here is an example of a service that utilizes $q.when to wrap a promise from a third-party library: // myService.js angular.module('myApp', []) .service('myService', function($q, $window) { var api = new $window.MyAPI(); this ...

javascriptangularjsunit-testing

HTML5 video player with secondary playlist

Looking for a videoplayer setup where there are two playlists, but only one can play at a time. When choosing a video from the first list initially, nothing happens. However, after selecting a video from the second list, the first list starts working. HTM ...

javascripthtmljqueryvideo

The Ajax post function successfully executes on the first attempt, but on subsequent tries it does

My goal is to send data from a forum asynchronously to a PHP page and display the response in a specific ID without refreshing the page. The first time I submit, everything works perfectly. The text is successfully sent to append.php and the new list of i ...

javascriptphpjqueryajaxpost

Utilizing Adjacent Sibling Selectors within the context of a specific enclosing class

I have a question regarding the following HTML structure: <div class="a"> <div class="b"></div> <div class="c"></div> </div> My goal is to apply a specific CSS rule only within the a class: .b + .c { margin-le ...

csscss-selectors

Building websites similar to Medium using ReactJS with emphasis on server-side rendering

I am in the process of creating a project similar to Medium.com using ReactJS. However, I am facing issues with meta tags and SEO. It is known that modifying meta tags on the client side (e.g. using react-helmet) is not recommended due to web crawlers not ...

reactjsfrontendnext.jsgatsbyserver-side-rendering

reducing the dimensions of the expanding panel in Material UI

I am facing a challenge which requires me to reduce the size of the expansion panel when it is open or expanded. I checked the elements and styles tab, but it seems that we need to override the styles. Has anyone dealt with this scenario before? Here is a ...

javascriptreactjsmaterial-ui

How to correctly serialize nested maps in JQuery ajax data for sending?

var locationData = { "location" : { "name" : $("#user_loc_name").val(), "street_address" : $("#user_loc_street_address").val(), "city" : $("#user_loc_city").val(), "province" : ...

javascriptjqueryruby-on-railsajax

Executing a function from an external .js file using Node.js

Hey there! I have a Nodejs application running on Heroku and I am looking to utilize functions from an external file. However, I'm not quite sure how to go about it. The contents of my external tool.js file are as follows: var Tool = {}; //tool name ...

javascriptnode.jsheroku

Receiving JSON information from a web address using Javascript

I'm currently faced with a challenge in extracting JSON data from a web server. Despite the absence of errors in my code, I encounter difficulties displaying any output. Below is a snippet of the issue: <!DOCTYPE HTML> <html> <head ...

javascriptjsonhtml

Transmit information using jQuery to an MVC controller

I am developing an ASP.NET MVC3 application and need to send three pieces of data to a specific action when the user clicks on an anchor tag: <a onclick='sendData(<#= Data1,Data2,Data3 #>)'></a> Here is the javascript function ...

javascriptc#jqueryasp.netasp.net-mvc