Tips for creating a responsive floating page div

Hey there, I'm still fairly new to web development and have a question regarding a registration page that is displayed as a floating div above the main page. How can I ensure that this div is centered in a responsive way?

The pages are separated and included in the header.

<?php 
include ('includes/login.php');
include ('includes/register.php');
?>

Here is the CSS for my registration page:

#regScreen {
    padding: 5 5 40px 5px;
    margin: 0 auto;
    position: fixed;
    top: 5%;
    left: 33%;
    z-index: 10;
    display: none;
    background: #ebebeb;
}

#regScreen:target, #regScreen:target+#cover {
    display: block;
    opacity: 2;
}

#reghead {
    background-color: #e2e1e1;
    text-align: center;
    display: block;
    padding: 0px 0px 10px 0px;
}

I attempted to use a media query for my #regScreen:

@media (max-width: 300px) {
  #regScreen {
    width: 100%;
    left:0%;
  }
}

However, using media queries doesn't seem to recognize the page as responsive since it is already small. Please correct me if I am mistaken in my understanding.

htmlcss

Answer №1

Providing a precise solution without additional information can be challenging (If you include more HTML markup, it would greatly assist); nevertheless...

If you're facing an issue where the floating div isn't resizing correctly for different screen sizes (and since you're new to web development...welcome!), here are a few suggestions:

1) You might be overcomplicating things by attempting to use the @media (max-width:300px) media query. Simply adding the following styles should ensure the registration form resizes appropriately:

#regScreen {

  /* Your other styles here */

  width:90%;
  max-width:600px; /* Using em or rem values might be better than px... for example, 37.5 em */

}

This approach will make sure the form's width is always either 90% of the screen width OR 600px, whichever is smaller.

2) If you suspect a problem with the media query not activating, a straightforward way to test it is to create a noticeable change at that breakpoint, like so:

@media (max-width: 300px) {

  /* Test Style */
  /* Change background to red below 300px */
  body{
    background-color:red !important;
  }

  /* Your initial styles */
  #regScreen {
    width: 100%;
    left:0%;
  }

}

By doing this, you can start debugging whether it's an issue with your media query syntax or another factor; perhaps the media query styles are correctly applied (confirming the syntax is correct), but later CSS rules override them or due to the specificity of certain rules.

If you provide more details in your question, feel free to reach out, and I'll gladly take another look. In the meantime, this should set you on the right path.

Answer №2

Although I am unsure which element is being targeted by these selectors, I have prepared a sample HTML and CSS guide to help resolve your problem. Click on this link to view it: jsfiddle.net/8Pw32L3e/

Answer №3

Upon initial inspection, I have identified an error.

@media and (max-width: 300px) {
#regScreen {
 width: 100%;
 left:0%;
}
}

One oversight is the absence of 'and' before '(max-width: 300px)'

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

Implementing Event Handlers for Multiple Textareas Using Jquery on a Webpage

The functionality of my script is exactly how I want it to be, but I am facing an issue when trying to replicate it on a page. The jQuery code manipulates textarea boxes based on button clicks, however, I now need each textarea box to have its own set of b ...

javascriptjqueryhtmlbindingtextarea

Building HTML tables with JQuery for handling large datasets of over 4,000 rows and beyond

My goal is to create a table with 4000+ rows and 18 columns displaying parsed pages from my site. I need it all on one page for the following reasons: I require the use of filters in the table I need to be able to sort by more than 5 columns Every cell ...

jqueryhtmlajaxperformancehtml-table

Tips for preventing elements from wrapping in a lengthy list and using scrollbars in Firefox

When dealing with a lengthy flex list, the items (buttons) should wrap when there is not enough space available (using flex-wrap). However, an issue arises in Firefox where the items are wrapped once a scrollbar appears, even if there is ample space. In c ...

htmlcssfirefox

Received a notification after submitting an HTML form

<html> <body> <form action="" method="GET> Name: <input type="text" name="name" /> Age: <input type="text" name="age" /> <input type="submit" /> </form> </body> </html> <?php if( $ ...

phphtml

Next.js Image staying at the forefront

Currently, I am utilizing Tailwind CSS to style my Next.js website and incorporating the Next.js Image element for an image on the page. My goal is to display a modal over the existing page without completely blacking out the background; instead, I want i ...

htmlnext.jsjsxtailwind-cssnextjs-image

Create a Bootstrap layout with three columns and three rows, where the third column has a height

I am trying to achieve a specific layout using the col-lg-4 class. My main goal is to make the third column span across all three rows without creating excessive white space between them. The current layout looks like this: Is it possible to do this in B ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to align an equal number of divs in each row?

I need help arranging my divs in rows, with 3 divs in each row. Can someone assist me with this? Here is the code I have written so far: .container { display: flex; flex-wrap: wrap; } .item { border: 2px solid black; width: 100px; height: 10 ...

htmlcss

jQuery plugin stops functioning properly following the use of the jQuery display block method

In my project, I am exploring the use of divs as tabs with jQuery. Within these divs, I also want to incorporate another jQuery plugin. Currently, I have manually created these div tabs using jQuery and set the default style for second and subsequent divs ...

javascriptjqueryhtmlcss

Managing the height of a hero section with TailwindCSS and React.js

Embarking on my first website project using React and Tailwind has been an exciting learning experience. My vision is to showcase a Hero Section prominently at the top, with a Nav bar situated elegantly at the bottom of the screen. To bring this concept ...

htmlcsstailwind-css

After closing, the position of the qtip2 is being altered

I've successfully integrated the qtip2 with fullcalendar jQuery plugin, which are both amazing tools. However, I'm encountering an issue with the positioning of the qtip. Here's the code snippet I'm using: $(window).load(function() { ...

javascriptjquerycssqtip2

Using JQuery to trigger CSS3 animations on one element when clicking on another

My Rails app has a feature similar to reddit where users can upvote or downvote content. I'm currently working on creating a CSS3 animation that triggers when a user clicks the downvote button. Here's how I'm using JQuery: <div class="a ...

jqueryruby-on-railscss

What's the best way to loop through each touch event property within the TouchList of a touch event using JavaScript?

I'm struggling to grasp touch events, as nothing seems to be working for me. For testing purposes, I've created a very basic page: HTML: <div id="TOUCHME"> TOUCH ME </div> <div id="OUTPUT"></div> Jav ...

javascripthtmltouch-event

Strategies for avoiding unused style tags in React components

Expanding beyond React, I'm unsure if React itself is the culprit of this issue. In a React environment with TypeScript, I utilize CSS imports in component files to have specific stylesheets for each component. I assumed these styles would only be ad ...

javascriptcssreactjstypescript

Working with ASP.NET to toggle the visibility of several div elements

Is the current method I'm using the best practice, or could it be more resource-efficient? On my website, I show and hide divs based on user actions and permissions. Currently, I declare my divs as follows: <div id="NormalView" runat="server" vis ...

htmlasp.net

Removing the gap between the clicked point and the draw point in Html5 canvas

To better understand my issue, please refer to the image linked below: In the image, you can see that when I scroll down and click on the canvas to point a position, it creates space between the clicked point and where the line is drawn. Below is the cod ...

javascriptjqueryhtmlcanvas

Adding substantial sections of HTML without any adjustments

While I am working on DOM manipulation, I have encountered the need to insert large blocks of HTML. I am looking for a more efficient way to do this rather than relying on concatenation or creating a messy code structure. Consider the simple code snippet b ...

javascriptjqueryhtmlstring

Track how far visitors scroll into the inner content area using Google Tag Manager

Our website features a left-side vertical navigation menu. In order to measure scroll depth, we incorporated Tag Manager code. However, the Tag Manager code triggers on every page load due to us fixing the body scroll and implementing a custom scroll for t ...

htmlgoogle-analyticsgoogle-tag-manager

Conceal information from view without hiding pseudo content visually

Here's a method I'm using to incorporate icons through the use of :before or :after pseudo content: <span class="icon icon__example is-content-visually-hidden">assistive text</span> Is there a way to hide the assistive text visually ...

css

SVGs appear at the forefront of all other elements

is where this issue is arising.... specifically in the date selection feature on the left side of the options panel. When using both Google Charts and Material Icons with the date picker component from https://github.com/nickeljew/react-month-picker, we a ...

htmlreactjssvggoogle-visualizationmaterial-ui

A white background emerges when I select md-dropdown

Lately, I've been experiencing an issue on my website where a white background pops up whenever I click on a dropdown (md-select) in my form. Initially, it only happened with forms inside a modal, but now it's affecting dropdowns across the entir ...

javascriptcssangularjshtmlangular-material