I'm trying to make my button take up 90% of the width of the screen.
After testing my HTML code, I noticed that the button is only occupying around 10% of the screen. However, when I specify the width using pixels, it adjusts correctly.
What could be causing this issue?
.quiz {
/*top: 240px;*/
position: fixed;
z-index: -1;
}
.quiz button {
width: 90%;
border-radius: 8px;
display: block;
}<div class="quiz">
<button>Option 1</button>
</div>For a percentage height to be established, the parent element must have a defined height.
In this scenario, the most effective approach is to include width: 100% within .poll
By looking at your example, it appears that you are referencing the width of an element's parent. To make this work, ensure that the parent container holding the button takes up 100% of the screen width. Then, enclose all other elements within a distinct container nested inside the quiz section.
When setting the button's width to 90%, it will be based on the width of the div.quiz element as its maximum limit. To make the button occupy 90% of the screen, you can either place it directly inside the body element or adjust the width of div.quiz to 100% and ensure it is within the body or another element with the same width.
.quiz {
top: 240px;
width: 100%; /* assuming the parent element has the same width as the body */
position: fixed;
z-index: -1;
}
.quiz button {
width: 90%;
border-radius: 8px;
display: block;
}
Your quiz div is currently sized to fit the button within it, with the button taking up 90% of the div's size.
If you want the button to occupy 90% of the screen, then you need to set your div to be 100% of the screen.
.quiz {
top: 240px;
position: fixed;
z-index: -1;
width: 100%;
}
.quiz button {
width: 90%;
border-radius: 8px;
display: block;
}<div class="quiz">
<button>Option 1</button>
</div>This adjustment should resolve the issue and work as intended :)
I'm having trouble aligning items in a list to the right and adjusting their width based on content length. Unfortunately, I haven't been able to make it work despite multiple attempts. Take a look at my code snippet below: .messages { over ...
Have you ever wondered how this website creates the customization effect in its gallery? When you adjust the color, stones, or other attributes of the ring, it appears as though a new image is being generated. (click Customize) Do you believe they have a ...
After successfully mastering movement of an image in 2D using CSS3, I'm now faced with the challenge of translating this into 3D movement. While I've researched transforms, they primarily focus on flipping and rotating, and I am more interested i ...
Hey everyone, I'm feeling really frustrated right now because I'm facing a file upload error in my PHP code. The issue is that the file is not getting uploaded to my folder and no error messages are being displayed. I've been working on cr ...
My question is about the behavior of the href attribute in a fade-style animation. Even when different containers are visible, the href value remains constant. Below is the HTML code: <div id="teaserslider"> <ul> <li> ...
My goal is to apply a unique background color to each menu li element when hovered over, and I want to accomplish this using CSS2. <ul> <li> <li> <li> <li> </ul> I managed to add a background color to t ...
Encountering an unusual problem - I have styled a div element using CSS to be initially hidden: .thediv { width: 100%; height: 87%; position: fixed; overflow: hidden; background-image: url(pics/FrameWithBG1280.png); background-attachment: fixe ...
In my search for answers, I have come across many general responses to this common question. However, none of them address the specific constraints that I am facing with this version. The task at hand is to implement the holy grail layout, but with a key ...
import c from '../Profile.module.css'; import { useState } from 'react'; import { createPortal } from 'react-dom'; import Modal from '../Modal/Modal'; const TransactionItem = (props) => { const modalRoot = ...
I have a Flexbox set up where I need the contents to display in reverse order. Everything is working well, but the list has many items and the newest ones are appearing at the top. Currently, the Flexbox automatically scrolls to the bottom, but I want it t ...
Here is the code snippet I am working with: <button class="btn">New York</button> <button class="btn">Amsterdam</button> <button class="btn">New Jersey</button> <button class="btn&qu ...
I have a JSON object that I need to use to retrieve images from a remote URL and display them in the img tag using API calls. The API link can be found at <div class="emoji"> <ul id="emojiz"></ul> <span style= ...
Struggling to create a CSS component where the first and last points don't align properly with the ends of the line. This component should be able to handle any number of points (between 1 and 4) without relying on flexbox. I have a React component ...
Is there a way to make a hidden p element appear when hovering over the first visible element in a tree structure? I found some help on Stack Overflow suggesting the use of adjacent sibling selectors, and while it works well with a simple example, it fails ...
Below is the code snippet: <table border="1" cellpadding="2" cellspacing="2" height="250"> <tbody> <tr> <td> <div style="background: url('path to image'); width: 300px; height: 250px; position: ...
Understanding the rules of constructing selectors that consist of more than one selector can be quite challenging. It seems that sometimes it is possible to create such selectors, which may contain instances of other selectors made up of multiple parts. H ...
Struggling with something seemingly simple... All I need is for my span tag to take on a class called "store" from a variable in my .ts file: <span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span> I&apos ...
Below are some input fields: <input type="text" name="date_1" class="dataList" value="2009-12-30" /> <input type="text" name="date_2" class="dataList" value="2007-06-12" /> <input type="text" name="date_3" class="dataList" value="2009-10-23 ...
Here's the HTML code I'm struggling with, which is inside an ASP.NET Repeater: <div class="team_member"> <a class="teamMemberLink" href='<%# "Profile.aspx?uID=" + Eval("ID") %>' target="_blank"><%# Eval("Name") ...
My nextjs project is running on the following versions: "@mdx-js/loader": "^2.1.5", "@mdx-js/react": "^2.1.5", "@next/mdx": "^12.1.6", "next": "^12.1.6", Within my project, I ...