Questions tagged [css]
CSS (Cascading Style Sheets) is a representation style sheet language used for describing the look and formatting of HTML (HyperText Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, fonts, and animations. It also describes how elements should be rendered on screen, on paper, in speech, or on other media.
805,925
questions
0
votes
0
answers
2
views
Is it possible to mix absolute and sticky positioning?
In this example the inner grey div should be behaving like a sticky div - so it sticks to the top of the screen when you scroll down the page - but that ain't happening! What have I got wrong?
<...
- 4,971
0
votes
1
answer
6
views
MUI: center checkboxes in grid regardless of checkbox label length
I have a form with code:
<Box display="flex" flexDirection="column" alignItems="center" mt={2}>
<Grid container spacing={1}>
{playlists.map((...
-2
votes
0
answers
21
views
my website is not responsive on all devices [closed]
https://arjhunswaminathan.github.io/x.com-clone/twitter.html
when i first made this website. i had given the values of width,height,padding,margins etc. in pixels. but later i got to know that for ...
0
votes
0
answers
16
views
Chrome/Safari input field auto zoom in when clicked
i have a react application, where I'm taking a input field,
on mobile device ,
there is a auto zoom feature to highlight the zoom
one way i found was to use font size :16px
input{ font-size:16px;}
my ...
-1
votes
0
answers
19
views
Material symbols self-hosting problem in Dev server
I have a problem on Dev, which i dont have on local,
on Dev Material Symbols Outlined icons are not loading, I have a two new css files, with defined fontfaces and css classes, with one being Material ...
- 1
0
votes
1
answer
21
views
Cell in css grid overflow if align-items: end is set
When I use align-items: end in my example, the content overflows and I have no idea why. I expect the same behavior as with align-items: start. I tried setting the width but I couldn't find a solution....
- 3
-2
votes
0
answers
32
views
‘Embed’ order now button [closed]
For a separate pop-up I want to embed the order now button on the page below, it is the yellow button on the right with ‘Bestel nu!’:
https://www.scapino.nl/only-shoes-dames-dad-sneakers-met-roze-zool-...
- 1
-1
votes
1
answer
21
views
On a scrollable element, how do I apply CSS properties to parts of its children that were hidden before scrolling?
Image 1 :
Image 2:
I have this element on my site that is supposed to scroll horizontally(overflow-x: scroll) on smaller screens, the issue is, the properties I applied to its children only appear ...
0
votes
1
answer
42
views
display property, not working in firefox mozilla [duplicate]
I'm trying to creating a animation, and in this animation I'm setting a display:none and display:block, but not it working in mozilla firefox:( while working good in chrome
tested also with -moz- ...
- 1
-1
votes
0
answers
16
views
Can i use aspect-ratio in React(web)?
Hi I'm trying to resize a div by using aspect-ratio in React(web).
But all the references I found is how to deal with it in React Native.
Is it also possible in React(web)??
I tried to apply it on css ...
0
votes
0
answers
15
views
Ensuring consistent appearance of a React web app across different Windows scaling settings
I'm developing a web app using React and Tailwind CSS. I've noticed that the appearance of the app changes when viewed on different screens, particularly due to different scaling settings on operating ...
- 3
0
votes
0
answers
16
views
parallax scrolling with banner size not working
i try with background-attachment: fixed; & transform: translateZ(-300px) scale(2); it will larger my image size. i wanted to use my original banner size to do parallax scrolling
can refer to ...
0
votes
0
answers
35
views
Neumorphic design disappears when resizing window in Flutter
I have a game in which I have implemented a neumorphic design using inset shadows. Since Flutter doesnt support inset shadows out of the box, I have used flutter_inset_shadow: ^2.0.3 package to ...
-2
votes
3
answers
48
views
Change background colour of certain row
I have this code and I want to change the background colour of the fifth last row. I know I need to use nth-last-child.
Someone can tell me the code?
.grid-container {
display: grid;
grid-...
0
votes
0
answers
20
views
Sticky CSS styles not working in MudBlazor project
I am working on a Blazor project using MudBlazor components. I need to make some text boxes and a search button stick to the top of the MudGrid while scrolling. I tried using position: sticky and top: ...
0
votes
0
answers
34
views
CSS transition not working for backdrop-blur
My React/Tailwind app has a mobile menu popup for screens less than 768px wide which uses the Tailwind properties backdrop-blur to blur out everything behind the menu items. I have a transition-all ...
- 43
-3
votes
0
answers
24
views
My website looks ok in Firefox but is slightly different in Edge and Chrome [closed]
Excume me for my English, I'm native language is Italian. I'm newbie about CSS and I have a question. My website looks perfectly in Firefox, while in Edge and Chrome there is a little aligned problem. ...
0
votes
0
answers
20
views
How to add an extra class on highlightedwhich is added by highlighted props vuejs3-datepicker
I am using import Datepicker from 'vuejs3-datepicker';
and I am using highlighted props to highlight specific dates but I want to color highlighted dates with different color but 'vuejs3-datepicker' ...
- 81
-1
votes
1
answer
39
views
Margin and Padding Affecting the width of my web page [closed]
I’m working on expanding my portfolio by remaking already made websites and in this one it seems like the margin and padding I put on the div holding my footer information is causing the whole content ...
0
votes
0
answers
26
views
How to save css to persist over loading different pages or refreshing page
I am trying to implement the function of saving a post or liking a post and the css style of the like button or the save button doesn't apply when refreshing or changing page. how can I save the css ...
- 43
0
votes
0
answers
11
views
How to style a iframe scrollbar in vue when utilziing a reactive variable for contents
I am loading an email template in to my application using the following code:
<v-col class="px-10">
<div v-if="selectedEmailLoading" class="h-100 w-100 d-flex ...
- 1,423
0
votes
1
answer
21
views
Why is rounded-lg and rounded-md not working with Tailwind CSS for me?
I'm using Next.js 14.2.4 and tailwindcss 3.4.1 and for some reason rounded-lg and rounded-md are not working. They provide zero border radius whatsoever. rounded-xl and rounded and all the others are ...
- 325
0
votes
0
answers
13
views
why font size changed with a different pc with same resolution when using plotly dash?
I am using plotly dash with CSS to build my dashboard. I am using CSS to define font style. I changed to a different pc from windown 10 to windows 11 but with same screen resolution of 1600 by 900.
...
- 3,920
0
votes
0
answers
11
views
Style rules seem to not be applying to React components other than App.js
I am trying to setup a simple event list app. Using the default environment created using npx create-react-app, I setup my App.js to be a component that holds a <table> and its <thead>, ...
- 11
0
votes
1
answer
31
views
not all images visible on image slider website
I am working on an image slider website. It has two problems:
The button to slide the images forward are working but the images are not shown.
The button to slide the images backward gets unclickable ...
- 25
0
votes
1
answer
21
views
I'm trying to style my icons that are dynamicaly imported from another file.js on my react app im using react-icons
my icons are imported and stored on a separate file.js i imported the file.js on my .jsx file & i can see the svgs being rendered on my website i also can change the size but the color remains ...
- 1
0
votes
1
answer
21
views
css flex row with one element using horizontal scroll
I want to create a flex row with 2 child elements. Left and Right where:
the right side will contain a couple buttons stacked and its width will not change
the left side will have a dynamic number ...
- 4,346
0
votes
0
answers
17
views
Writing css custom code to change the background dependent on product in Shopify pipeline theme
I am trying to write custom css code to customise the existing collection brick background in my shopify store. I want the background image to change depending on the product being displayed.
i am ...
-1
votes
2
answers
39
views
Changing CSS display property with JS EventListener
I am trying to add functionality to a button on a project I'm working on...when the button is pressed I want an element to no longer show on the page. However, I can't get this process to work. Here ...
- 1
0
votes
0
answers
28
views
How to make svg and its path the exact same dimensions? [duplicate]
I have an issue with lots of my svgs where the container is bigger than the actual content. See gif below where I flick between hovering over svg and path in the Chrome inspector.
As you can see the ...
- 7,405
0
votes
2
answers
41
views
How can I get horizontal lines to appear surrounding Font Awesome icon? [duplicate]
Problem
I'm trying to create a portfolio website and I want to place a Font Awesome icon between two horizontal lines (as detailed below), but it's not working. I've looked around Stack Overflow and ...
- 70
0
votes
0
answers
32
views
Font in .otf format is not centered vertically
I have received some font from designers and faced the issue with vertical alignment
I added this font to my application by using Js
const font = {
family: `Suisse Int'l`,
...
2
votes
1
answer
37
views
Why is a surrounding a-tag smaller then a span inside? [duplicate]
I have an <a> tag surrounding a <span> tag like in this example:
a {
font-size: 18px;
line-height: 100%;
display: block;
width: 100%;
}
span {
font-size: 18px;
line-height:...
- 1,837
0
votes
0
answers
13
views
Button:hover in NetSuite saved search button
I am currently creating approval buttons in NetSuite in a saved search so that records can be approved pressing the button directly in the saved search.
The difficult part of getting the button to ...
-2
votes
0
answers
22
views
please i need video playback instructions [closed]
i need something that will play a video in html, where it plays it from start to end, then instantly starts playing the video from end to start, and repeat the cycle indefinitely.
<video autoplay ...
-2
votes
0
answers
31
views
Tailwind CSS background image not being displayed [closed]
There are two SVG images in the root directory of my project.
logo-dark-mode.svg
logo-light-mode.svg
I have correctly linked the two images in the HTML file but in the developer tools when I hover ...
0
votes
1
answer
32
views
How can I change col/row behavior based on available space?
I have a set of cards, whose have their own cards, like this (i am using TailwindCSS btw):
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-3 gap-4">...
0
votes
1
answer
24
views
how to manage ng-select in ionic angular bottom margin
Ng-select in ionic angular how to add extra spacing after dropdown panel end of the screen.
when user clicks on the select options end of the screen at that time user does not identify properly this ...
- 107
-3
votes
1
answer
29
views
I want to position a Miscellaneous Symbols in a html doc
here is the code
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">☰ open</span>
the "open" word moves when i use margin attribute ...
- 1
0
votes
0
answers
19
views
Change colour of combo box based on content with only CSS [duplicate]
Is it possible to change the colour of a combo box based on it's content using CSS only? See image below, I want to change this to a specific colour if it has the word YES inside it using only CSS?
...
1
vote
2
answers
56
views
CSS grid/flex shrink based on content but grow evenly
I am building a Navbar for my app. I would like to have my items shrink based on their content but grow based on the average size.
All I want is:
if there is enough space for all items to be max-...
- 686
-1
votes
2
answers
66
views
How to make text and img in a div the same size
I am trying to create a div that contains an img and a text over the img. The text will be with different size depending on the case, so I want to automatically adjust the width of the img to cover ...
0
votes
5
answers
41
views
Single digit align on second position (to be bellow second digit)
I have this code
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ...
- 73
1
vote
1
answer
32
views
str_wrap is ignored when using ggplotly (but not ggplot)
I want to wrap the text of the legend for the following plot, which works with ggplot:
library(tidyverse)
library(ggtext)
library(plotly)
df <- data.frame(xx = c(0, 3),
yy = c(0, ...
- 4,447
-2
votes
0
answers
29
views
Div affecting other divs? [closed]
its kinda of drop down menu and genre--box affect other sections like a refreshing web. Text decoration is present in all texts any
<!-- =====================genre box========================== --&...
- 1
0
votes
0
answers
49
views
The submenus of my drop-down menu are not displayed on any browser [closed]
I develop my site in php with the Laravel framework. Below is the source code for my drop-down menu, however the submenus are not displayed on browsers. What can be the problem ?
<div class="...
-2
votes
0
answers
15
views
applying rotate to an element changes every other transform values in getComputedStyle and matrix
I'm trying to get the transform values from my element in js using getComputedStyle and DOMMatrixReadOnly. everything is fine until I add a rotate transform to that element. then every other transform ...
0
votes
0
answers
18
views
multiple modifiers in BEM
I have component button
<button type="button" className="button button_size_large button_color_primary button_type_fill">
<Icon className="button__icon" type=...
- 524
-1
votes
1
answer
20
views
Nested navigation items that need to be displayed on desktop next to each other equally sized
I have a weird case of a deeply nested navigation items, that each level(goes up to 3) need to be displayed into equal boxes next to each other, as if they were not nested visually.
The structure ...
- 414
0
votes
0
answers
24
views
Chrome marked existing animation as invalidated when starting new animation
I found chrome will do a huge Recalculate Style and Pre-Paint for existing animations when I start a new animation wherever on the page. Is this by design or a Chromium bug? Imagine my real web page ...
- 437