React js web application facing excessive content problem

I am encountering an overflow issue with the styles sheet I'm using on mobile and tablet views, but it works fine on desktop view. Can anyone provide a solution to this problem? I am developing a ReactJS web app hosted on Firebase. When I include fewer tech languages, there are no errors displayed. However, adding more languages causes an overflow issue that makes the content horizontally scrollable.

const AboutPageStyles = styled.div`
  // Styles defined here...
`;

<div className="about__info__item">
          <h1 className="about__info__heading">My Skills</h1>
          <AboutInfoItem
            title="FrontEnd"
            items={[
              'HTML',
              'CSS',
              'JavaScript',
              'C#',
              'ReactJS',
              'Blazor',
              'MAUI',
              'XAML',
            ]}
          />
    </div>

https://i.stack.imgur.com/Nwnzo.png

javascriptcssreactjsoverflow

Answer №1

Make sure to include the CSS property box-sizing:border-box;

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

Is there a way to incorporate a fade-in effect when I trigger the expand function in this script?

I recently came across a jQuery plugin for expanding and collapsing content. I am interested in adding a fade-in effect to this plugin specifically when the EXPAND button is clicked. How can I accomplish this? $(document).ready(function () { var maxlines ...

javascriptjquery

"Using the selected option from a dropdown list to pass to a PHP file for autocomplete functionality

Although there is no error in the code, I am facing an issue where, after selecting an option from the brands dropdown, when I type in the product field, it passes "%" instead of the brand id (1, 2, or 3). Is there a way to modify the code so that it passe ...

javascriptajaxjquery-autocomplete

Looking for a solution to the error message: "X is not able to be assigned to the type 'IntrinsicAttributes & Props'"

Greetings everyone! I need some assistance in setting up single sign-on authentication using React, Azure AD, and TypeScript. I'm encountering a type error in my render file and I'm unsure of how to resolve it. Below is the specific error message ...

reactjstypescriptazure-active-directory

Authenticate with Google using the Javascript API without causing a pop-up to appear

Here is the code I'm using to allow users to log in with their Google account via the Javascript API. HTML <a id="gp_login" href="javascript:void(0)" onclick="javascript:googleAuth()">Login using Google</a> Javascript function gPOnLoad ...

javascriptjquerygoogle-apigoogle-plusgoogle-oauth

Testing Angular 2: Ensuring Component Properly Calls Router with Accurate Arguments

I'm facing an issue with a child component that includes a button element with 'routerlink' attribute for navigation upon clicking. The button does not have a '(click)' handler, only the routerlink. Currently, I am writing a unit ...

javascriptangularjasmineangular2-routing

Set the variable after catching it

Within my AngularJS application, I am utilizing a $watchCollection function to call the getBalance(address) function within the listener. $scope.$watchCollection('settings', function() { for (i = 0; i < $scope.settings['accounts&ap ...

javascriptangularjsweb3js

Tips on utilizing React and Node to upload text as a file to Google Drive

Are you wondering how to incorporate React.js as the frontend and Node.js as the backend for uploading/reading files from Google Drive? In my attempts, I've tried writing a string as a text file and then uploading it to Google Drive by following this ...

javascriptnode.jsreactjs

Discover content within nested arrays - angularJS

I have a function written in angularJS that utilizes find to verify the presence of an item in an array; function checkCartItem(item) { return $scope.cart[0].cart_items.find(function(itm) { return itm.item_id === item.item_id }); } The fu ...

javascriptarraysangularjs

press a cURL PHP ajax button to trigger an action

Hello everyone, I could really use some help here. I've been looking at similar questions but none of the answers seem to apply to my situation. I extracted a page using curl, however, there's a button on that page that I am unable to interact w ...

javascriptphpajaxcurl

Probability of an event occurring when represented as whole numbers in percentage form

Currently, I'm developing a unique job system within a Discord bot that allows users to mine various types of ores. The probability of receiving specific ores is based on the user's mining skill level, which is stored in a database and can vary a ...

javascripttypescriptdiscord.js

How come the cubic bezier timing function works flawlessly just on the first try when staggered transitioning element opacity over time with CSS and a touch of JS?

I'm currently working on a menu overlay that expands to fill the screen when a user clicks a button in the corner. I'd like the menu items to fade in one by one, similar to the effect used on this website: Most of the functionality is there, but ...

htmlcsscss-transitionsopacitycubic-bezier

What are some techniques for reducing the number of pages in my Carousel?

I need help figuring out how to set a limit of noOfPages for the number of pages per carousel. The functions in my code below don't implement this and I'm unsure how to do it. const itemsPerPage = 6; const [page, setPage] = React.useState(1); ...

javascriptreactjsmaterial-ui

Displaying an array within a method using Vue.js

As a complete newcomer to Vue, I wanted to experiment with methods a bit. Specifically, I attempted to print out an array of strings using the following method: printStringArray(objectWithArray) { i = 0; s = ''; while(i < ob ...

javascriptarraysstringvue.jswhile-loop

Creating custom tags using React JSX is a simple process that involves defining a new

<If check={true}><div> Only show when the check is true</div></If> <If check={false}><div> Do not display if the check is false</div></If> Instructions for developing a personalized tag in React and implemen ...

reactjscomponentsjsx

At what point should I expect a promise in Protractor to be resolved?

Despite there being similar inquiries on this topic, I am struggling to comprehend them. Allow me to illustrate with an example, where my task is to click a button and verify the URL. Initially, I thought it should be coded as: element(by.id('butto ...

javascriptselenium-webdriverpromiseprotractorangularjs-e2e

Ever since implementing a new section class, the CSS first-of-type selector has ceased to function

After referencing a previous response, I utilized first-of-type to specifically target the initial menuSection with this code snippet... .menuSection:first-of-type { background: red; } <div id="container"> <section class="menuSection"> ...

csscss-selectorsfirst-of-type

Tips for adjusting the width of a div when printing

Imagine I have two container elements named container1 and container2. First, I assign a width of 30% to container1 and 60% to container2. Then add a border between the two containers. However, when I attempt to print, container1 takes up the full 100% o ...

htmlcssprintingbootstrap-4

Focus on the second input field component in ReactJS after setting the value of the first input field component

Hello, I am new to ReactJS and have a question. I am working on setting focus to the "Emergency Service" input field after setting the current location in the "Location Lookup" field. The challenge is that these fields are in separate components. I have ...

reactjsmaterial-ui

"Interactive feature allowing users to edit and view the most recently inserted HTML

My approach involves using a contenteditable div as an input field for entering text and inserting icons through a button that adds small HTML pictures within the text. Everything works fine when the text is narrower than the contenteditable field. Howev ...

jqueryhtmlcsscontenteditable

What could be the issue with trying to bind an event handler in this manner?

I'm having some trouble binding an event handler with jQuery: $(document).ready(function () { var newsScrollerForPage = new NewsScroller(); newsScrollerForPage.init(); $('#scroller-left-a').bind('on ...

javascriptjquery