What are the best techniques for creating a responsive UI design that adapts to all screen widths?

I created a UI by following some tutorials, but I'm facing an issue with responsiveness. When I resize the window, the UI doesn't look good or adjust properly.

Here is the link to my fiddle: http://jsfiddle.net/X8HV9/1/show/ I am encountering two main issues:

  1. The "up level" button looks fine in full-screen mode, but its position shifts when I reduce the window size. However, the next and previous buttons maintain their appearance.
  2. When I click on the "add" button, a pop-up screen appears in full-screen mode, but it gets hidden in smaller screens.

Is it possible to set the width in percentage?

<div data-role="page" id="home">

    <div class="main_cont">

        <div class="cb"></div>

        <section>

            <div class="contentbox">
                <div class="actionbar">
                    <a href="#" class="home" id="home_h"></a><a href="#" class="previous" id="previous_h"><i
                    class="iconprev"></i>Previous</a><a href="#" class="next" id="next_h"><i
                    class="iconnext"></i>Next</a>
                    <a style="position: relative;top: 6px;left: 89px;cursor: pointer;" id="oneLevelUp">Up level ^</a>
                    <div class="cb"></div>
                </div>

            </div>

        </section>

        <footer id="firstPageFooter">
            <button class="addtestbtn" id="addTestCase" data-theme="a" style="color: #ffffff!important;">Add Test Case</button>

        </footer>


        <div data-role="popup" id="testCaseId" data-theme="b" data-arrow="b">
            <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
            <div data-role="fieldcontain">
                <label for="testCaseIDValue">Test Case ID:</label>
                <input type="text" name="testCaseIDValue" id="testCaseIDValue" value=""  class="inputTextTestCase"/>
            </div>
            <a href="#" data-role="button" id="donePopUp">Done</a>
        </div>

    </div>

Thank you

javascriptjquerycssjquery-mobile

Answer №1

A great feature of using % scaling is that it allows you to adjust width, height, top, left, and margins dynamically.

For instance, in your CSS:

#next_h{
   position:absolute;
   width:10%;
}

This code snippet will set the width to 10% of the window's width.

If you want to scale elements when the window size goes below a certain level, you can achieve this with JavaScript:

if($(window).outerWidth() < 500){
  $('#next_h').css({
    'position':'absolute',
    'width':'80%',
    'height':'10px'
  });
}

You can implement something similar to this for your specific requirements.

Additionally, you may find this post on Stack Overflow interesting as well.

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

Resetting the form and validation in AngularJS post form submission

I need help resetting a form and all validation messages after submission. Check out my code on plunker: http://plnkr.co/edit/992RP8gemIjgc3KxzLvQ?p=preview Here is the code snippet: Controller: app.controller('MainCtrl', function($scope) { ...

javascriptangularjsvalidation

Obtain array buffer from NodeJS to capture frames from a video file

My current goal is to extract frames from a video in node without relying on a video tag. I am utilizing openvg-canvas for this task, which allows me to print images and use the canvas API functionalities successfully. The challenge lies in the fact that ...

javascripthtmlnode.jsvideocanvas

Issue with base64 in Discord.js captcha channel system

Greetings everyone, and a special welcome to those willing to assist me. I am currently working on a project that involves verifying users through a hash decryption challenge system (base64). However, I've encountered an issue where the verification p ...

javascriptdiscorddiscord.js

How can I make $.when trigger when a JSON request fails?

I am currently using the code below to retrieve JSON data from multiple URLs. However, I have noticed that if one of the URLs fails or returns a 404 response, the function does not execute as expected. According to the jQuery documentation, the "then" fu ...

javascriptjqueryhtmljson

Searching for a point within a specified range using Sequelize

I have a model called Location with a field named coordinates of type geometry. I'm looking to create a function that takes in latitude, longitude, and radius as parameters, and returns all locations within that radius (in meters). I attempted to foll ...

javascriptnode.jspostgresqlsequelize.js

Using AngularJS to filter an array using the $filter function

Looking for a more elegant way to achieve the following task: myList.forEach(function(element){ if (!['state1', 'state2'].contains(element.state)){ myFilteredList.push(element) } }) I was thinking of using $filter('fi ...

javascriptangularjs

Exploring Elasticsearch with Ajax Query Syntax

Attempting to send a post request via AJAX to my Elasticsearch index but encountering some issues. Here's the cURL result: [~]$ curl -XGET 'http://localhost:9200/firebase/_search?q=song:i%20am%20in' {"took":172,"timed_out":false,"_shards": ...

javascriptjqueryajaxcurlelasticsearch

Accessing the 'comment' property within the .then() function is not possible if it is undefined

Why does obj[i] become undefined inside the .then() function? obj = [{'id': 1, 'name': 'john', 'age': '22', 'group': 'grA'}, {'id': 2, 'name': 'mike', &apo ...

javascriptangulartypescriptangular6

The labels displayed on ChartJs are inaccurate

As a student who has been learning programming for about a month, I must admit that there may be many mistakes in my code. In developing a website, I have incorporated a chart from the ChartJs library. The chart consists of an outer circle representing ho ...

javascripthtmlchartschart.js

What is the best way to retrieve app.state in a Remix project when running a Cypress test?

One way Cypress can expose an app's state to the test runner is by using the following approach in React: class MyComponent extends React.Component { constructor (props) { super(props) // only expose the app during E2E tests if (window.C ...

javascripttypescriptstatecypressremix.run

The coloring feature in Excel Add-in's React component fails to populate cells after the "await" statement

Currently, I am developing a Microsoft Excel Add-in using React. My goal is to assign colors to specific cells based on the value in each cell, indicated by a color code (refer to the Board Color column in the image below). To achieve this, I retrieve the ...

javascriptreactjsexcelasync-awaitstyling

Error: The object 'exports' is not defined in geotiff.js at line 3

Looking to integrate the geotiff library with Angular 6.1.0 and TypeScript 2.9.2. Installed it using npm i geotiff Encountering the following error in the browser console: Uncaught ReferenceError: exports is not defined at geotiff.js:3 After r ...

javascriptangulartypescript

Firebase scheduled function continues to encounter a persistent issue with an "UNAUTHENTICATED" error being consistently thrown

I have created a firebase-function that is scheduled to retrieve data from an external API source and save it in Firestore. const functions = require("firebase-functions"); const admin = require("firebase-admin"); const { default: Axios ...

javascriptnode.jsfirebasegoogle-cloud-platformgoogle-cloud-functions

A guide to adding a picture to AWS S3 with the help of GraphQL

When trying to upload a base64 string via GraphQL, I encountered an issue. It seems that if the string exceeds 50,000 characters, GraphQL fails to reach the resolve function without giving any error messages. However, when the string is less than 50,000 ...

javascriptreactjsamazon-s3graphqlaws-appsync

Protractor: Command Line Tips for Providing URLs

When running a Protractor test, the URL is usually specified in the spec file. However, it is possible to also include it directly in the spec.js file: browser.get('www.google.com'); To run the test, the command would be: protractor conf.js I ...

javascriptangularjsselenium-webdrivercommand-lineprotractor

Communicating JSON data through AJAX with a WCF web service

Hey everyone, I could really use some assistance with my current coding issue. My goal is to pass the value 2767994111 to my WCF web service using jQuery AJAX. var parameter = { value: "2767994111" }; $('#btSubmit').click(function () { $ ...

javascriptjqueryajaxvb.netwcf

Tips for defining types for specific CSS properties in TypeScript, such as variables

Perhaps there are already solutions out there, and I appreciate it if you can share a link to an existing thread. Nevertheless... In React, when I use the style prop, I receive good autocompletion and validation features like this example: https://i.sstat ...

csstypescript

Preventing mouse clicks on checkboxes and triggering events using JavaScript - a complete guide

We have a Table grid with multiple columns, one of which is a Select Box (CheckBox). The expected behavior is that when a row is clicked, the respective CheckBox should get checked, and clicking on the CheckBox itself should update it. I tried implementin ...

javascriptjquerycss

Retrieve recently appended DOM elements following the invocation of createComponent on a ViewContainerRef

I have a current function in my code that dynamically creates components and then generates a table of contents once the components are added to the DOM. This service retrieves all h3 elements from the DOM to include in the table of contents: generateDy ...

javascriptangulartypescriptdom

How to request permissions from a bot user in Discord.js version 14?

I need to verify my bot's permissions before it carries out a command. Previously, everything was functioning perfectly with this code: // Discord.js v13 if (interaction.guild.me.permissions.has(Permissions.FLAGS.MANAGE_MESSAGES)) { interaction.re ...

javascriptnode.jsdiscord.js