Adjust styling of web elements according to device screen dimensions

On my page "create.php," everything looks great on desktop computers with normal width and height: https://i.sstatic.net/XJBwA.png

However, when I resize the page to its smallest width:

https://i.sstatic.net/YlISM.png

When viewed on a Mobile device(samsung galaxy S9): https://i.sstatic.net/inda5.jpg

Here is some of my CSS code:

            img {
              margin-left: 30px;
              margin-top: 15px;
            }

            .input {
              margin-bottom: 50;
              position: absolute;
              top: 160%;
              left: 50%;
              transform: translate(-50%, -50%);
              border: 1px solid grey;
              border-radius: 35px;
              padding-left: 25px;
              padding-right: 25px;
              padding-top: 35px;
              padding-bottom: 25px;
            }

This is the input div

<div class="input">
        <h1>Create a quiz game!</h1>
        <form action="create.php" method="post">
<!-- A big form -->
</form>
</div>

I am looking for suggestions on how to adjust the CSS to eliminate these gaps. Any ideas?

I've attempted modifying the form layout, but it still moves up occasionally...

While media queries can help, manually adjusting for various screen sizes is time-consuming. Is there a CSS framework like bootstrap that could simplify this process? Perhaps utilizing container divs could be a solution?

Answer №1

Developing code for mobile devices can be quite challenging due to the various scales and resolutions, but one approach is to refer to this resource . If that solution does not meet your needs, consider directing phone users to a separate page optimized for mobile viewing.

For more insights on redirecting mobile devices, check out this link: https://css-tricks.com/snippets/javascript/redirect-mobile-devices/

Answer №2

For responsive design, it is essential to incorporate Media Queries. Find a detailed explanation on this resource.

Answer №3

Consider utilizing the vw viewport unit in css3 for responsive design. You may find this resource helpful.

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

The color of the Bootstrap navbar toggler icon will stay the same

Here is my code snippet for a Bootstrap 5 navbar: <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar& ...

Tips for applying various CSS properties to a single element using styled-components

Is there a way to style similar elements differently using different CSS properties in styled components? For example: <div></div> <div></div> With the knowledge I have, I can do: export const StyledDiv = styled.div` color: red; ` ...

A flex container containing two divs each with a white-space:nowrap element set at 50% width

How can I create a parent div that contains two child divs, each with a width of 50% that adjusts based on content? The issue arises when one of the child divs has an h3 element with white-space:nowrap;, causing it to exceed the 50% width. I attempted to ...

Converting text from Hindi (written in the Devanagari script) into the English alphabet

I am currently encountering a problem with converting Hindi text written in the Devanagari script into English/Latin letters. I have a list of names that include entries like field=सचिन, but I need it to be displayed as Sachin in the frontend. I o ...

Is there a way to position the profile image input on the right side of the label, using "choose image" instead of "choose file"?

In the process of creating a teacher form, I am looking to allow users to select images from a gallery for their profile. The goal is to reposition and relabel the "choose image" button on the right side with the label "Choose Image," while having the la ...

Obtain information from a dataTable by utilizing ajax

I've been attempting to showcase dataTable data using ajax, but unfortunately, it's not working as expected. Below is my jquery code snippet: $('#example').DataTable({ ajax: { type: 'GET', ...

Strategies for reducing the amount of space between cards in Bootstrap 4

After creating 4 cards using Bootstrap version 4.5, I noticed that the spacing is not right. I'm struggling to reduce the spacing between the cards. Have a look at the image below if you're still confused: https://i.sstatic.net/RrJLL.jpg .car ...

Is it possible to customize the appearance of ordered list numbers using javascript?

Is it possible to change the color of a specific line number in an ordered list using JavaScript? I am familiar with CSS styling such as li::marker, but curious about altering individual list item markers dynamically through JavaScript. How can this be ach ...

Switching from a top to bottom position can be quite the challenge for many

If there's a more efficient method for accomplishing what I'm about to inquire about, please inform me. So far, this is the best solution I could devise. I am looking to have a series of divs that enclose a sliding div within them. The sliding d ...

Steps to create an iframe that opens in a new window

I'm facing an issue with the iframe sourced from flickr. My website includes an embedded flickr iframe to showcase a gallery without the hassle of creating a slider, resizing images, and extracting thumbnails. Given that this site belongs to a frien ...

Access menu options by hovering over the image

I am looking to create a hidden menu that only appears when I hover over an image. I attempted to follow a solution on Stackoverflow, but it did not work for me. Is there a way to achieve this using just CSS? Html: <nav class="navbar navbar-inverse na ...

How can I determine if there is text contained within an HTML tag?

Imagine a scenario where I want to retrieve all text from a specific HTML tag: Here is the example HTML: <div id="container"> <div id="subject"> <span><a></a></span> </div> </div> var ...

The candy stripes on a loading bar zebra assist in creating a unique and

I'm in the process of creating my portfolio and I'd like to incorporate unique animated loading bars, such as vertical or horizontal candy stripes, to showcase my coding skills. Can anyone suggest a specific programming language or tool that woul ...

Utilizing Selenium to automatically scroll through a Flickr page in order to capture and retrieve all the

Hey there! I'm currently working on a project to retrieve Flickr public images from a specific group. So far, I've been able to successfully parse the HTML and extract the image hrefs. However, I'm facing a challenge when it comes to retriev ...

Adjusting the size of DIVs according to images retrieved dynamically from a database

I am currently in the process of building my online portfolio, and while I am new to JQuery and PHP, I am working through any challenges that come my way. However, I am facing a roadblock that has left me puzzled. My goal is to create a seamless iframe to ...

Troubleshooting a CSS layout issue: Creating a list with images, text, and animated image scaling

I am looking to create a two-column list that consists of an image on the left and a headline and text on the right. The images have a CSS scale transformation set on onMouseEnter in ReactJS code. The issue arises when using float:left for the images to a ...

Displaying data on View is not working after navigation

I'm facing an issue where the data is not displaying on the view after routing, even though it appears in the console. Surprisingly, if I don't change the view, the data shows up. Additionally, if I call the service directly from the view, I can ...

Content Misaligned in Angular Material Button

Within this Angular component, I am attempting to utilize a mat-button to showcase various categories for the search filter. However, upon expanding the options, they do not appear below the mat-button as intended; instead, they are displayed on the left s ...

Using JavaScript to ensure that a background image is only displayed once in an HTML document

I am currently working with two cells, where I have set background images for these cells using Javascript from an array of images. The images available are: image1= 150*150 referred to as image1 once image2=150*150 referred to as image2 once However, ...

Configuring a Custom Color for the Bootstrap Datetimepicker

Problem I encountered an issue with my projects that are both using the bootstrap-datetimepicker. While one project displays the correct color, as seen here, the other project shows a wrong color, shown here. Below is the HTML code snippet I am working wi ...