Customizing the layout based on the device's screen size

I have been working on my personal website, and everything is almost complete except for one nagging issue. Whenever I shrink the screen size to less than 992px, the formatting of the skills section gets messed up, making everything unreadable. I can't figure out why this problem is specific to this section only. You can check out the website on vanshbajaj.me

.skills-section {
  background-color: #1a1e23;
  color: #fff;
}

// Rest of the CSS code goes here...

<section id="skills" class="skills-section section-padding">
  <div class="container">
    <h2 class="section-title wow">Skills</h2>

    // More HTML code for skill charts and progress bars

  </div>
</section>

The expected result is that when the screen size is reduced, all the skills should be displayed in a single column rather than two.

Answer №1

Include media query for smaller screens

@media only screen and (max-width: 990px) {
  /*adjust font size for elements that appear small*/ 

}

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

Embed an event into an HTML div that is not editable

How can I bind the paste event on a div to grab an image from the clipboard and assign it to an Angular scope variable? This solution works in Chrome, but not in IE 11 without adding the contenteditable=true attribute. However, using content editable break ...

"click on the delete button and then hit the addButton

I have created a website where users can save and delete work hours. I am facing an issue where I can save the hours at the beginning, but once I delete them, I cannot save anything anymore. Additionally, when I reload the page, the deleted data reappears. ...

Master the ins and outs of working with Angular and Webpack on

Encountering issues with the webpack-angular tutorial from egghead.io during the "ES6 with Babel" step. Requesting assistance in resolving the problem. Stuck at this specific step while following the tutorial: Error message in Chrome devTools: ........ ...

The issue appears to be that the placeholder for the VueJS select element is not being displayed when

Here is the code I am working with: <b-field style="display:inline-block;width:calc(90% / 4);" label="Par Filiale"> <b-select placeholder="Choix de la filiale" v-model="searchFiliale"> <option :value="null" disabled>S ...

There are an abundance of comment tags scattered throughout the rendered HTML file in Blazor

Has anyone else noticed the abundance of empty comment tags <!--!--> in Blazor rendered HTML files? I've come across multiple projects where these comments are scattered throughout. It's puzzling. https://i.sstatic.net/IyaQt.png ...

Is there a way to fade just the div element without affecting the text?

Is there a way to apply fade in/out effect only to the background of the div, without affecting the text inside? You can view my code snippet here: https://jsfiddle.net/tc6fq235/3/ <div class="fade">Hover over me.</div> .fade { background- ...

New line displaying pagination for Bootstrap datatable

I am currently utilizing the datatable feature with bootstrap version 4.3.1. The necessary CSS and JS files have been integrated as shown below: <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script ...

Launching the forEach function within an ng-repeat loop was it can be done by

I need to implement a function within the ng-repeat that will convert the value of Qprogress object in my JSON into a percentage. I already have the function written, but I am struggling with how to trigger it. I attempted to use a forEach loop inside the ...

How to retrieve Checkbox label text using Selenium and C#

Trying to extract the text value of a checkbox label. Check out this HTML code snippet <div id="content" class="large-12 columns"> <div class="example"> <h3>Checkboxes</h3> <form id='checkboxes'> &l ...

What is the proper way to retrieve an array in the render method using React?

As someone who is still fairly new to React, I encountered a coding issue and stumbled upon this particular code snippet from a previous question (I attempted to reach out to those who had previously answered, but unfortunately, received no response as the ...

Filtering out duplicate names from an array of objects and then grouping them with separator IDs can be achieved using JavaScript

Imagine we have an array [ {id: 1, label: "Apple"}, {id: 2, label: "Orange"}, {id: 3, label: "Apple"}, {id: 4, label: "Banana"}, {id: 5, label: "Apple"} ] We want the output to be like this [ {id: 1~3~5, l ...

Issue with setTimeout function when used in conjunction with an ajax call

Currently, I am developing a quiz portal where questions are organized in modules. Each module consists of 5 questions: the first 4 are text-based, and the 5th is an image-based question. Upon registering through register.php, users are directed to index. ...

Display the user's username on the navigation bar once they have successfully

I am having trouble displaying the username after logging in on the navbar. After logging in with the correct credentials, I am redirected to the page, but the navbar doesn't update with the username. Can someone provide some tips on what I should do ...

Enhance your website with jQuery scripts for dynamically loaded content without relying on $(document).on

Currently, I am utilizing an infinite scroll plugin in conjunction with ajax. The issue arises when the 'next page' is loaded using ajax, causing all other scripts related to ajax on that subsequent page to malfunction. Suggestions have been mad ...

Using AJAX to post button values

I have encountered an issue while attempting to post a value to a PHP script using the POST method in AJAX. The error message is as follows: Notice: Undefined index: gamekey Here is the JavaScript code I am working with: function adminchat(row) { ...

Tips for dynamically modifying style mode in Vue.js

I am looking to implement a feature where the style can be changed upon clicking a button. In my scenario, I am using Sass/SCSS for styling. For example, I have three different styles: default.scss, dark.scss, and system.scss. The code for dark.scss look ...

Transform CSS into JavaFx CSS

Currently, I am working on migrating a web application to JavaFX and need to style it in the same way as the original CSS. However, when attempting to load the CSS from the web project into JavaFX, I realized that the styles were not being reflected. Upon ...

create a JavaScript array variable for posting items

My goal is to use this javascript to make four posts for the 'var msg' array. However, it currently posts 'encodeURIComponent(msg[i])' four times instead. How can I resolve this issue? var msg = ['one', 'two& ...

Issue with text wrapping in Bootstrap 4 navigation bar items

https://i.sstatic.net/MJdCD.png I would like the words in the link to stay on the same line without wrapping down like this. This is the code I have implemented. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">< ...

What is the best way to manage the "open link in a new tab" action?

I am currently working on a project that involves displaying a series of resources on a web page. Each resource is stored as a record in a database with two fields: "url" and "visited." One issue I have encountered is that when a user clicks on a resource ...