807,035 questions
0
votes
0
answers
13
views
How to change the color of the white navigation bar to match the website color?
I'm trying to change the color of the navigation bar on mobile devices to match my website's theme color, but it's not working as expected. The navigation bar remains white despite using several ...
- 11
-1
votes
0
answers
19
views
Why is this Overflow: hidden; does not work in safari? And what is the way to fix it without loosing the scroll position?
On mobile, I have a search bar and when it open, it adds a class "opensearchpanel". On which I am using overflow: hidden; and it is working as expected in chrome and android by fixing the ...
0
votes
1
answer
31
views
Why text is not moving to the top-right of the image?
My understanding is that both img and span are inline elements and should be moved next to each other.
However, I don't see that happening in below example.
My HTML Body looks as below:
<body>
...
- 15.5k
1
vote
0
answers
32
views
white-space: nowrap resizes parent but does not respect scrollbar
I have a sidebar with some text that must not wrap. If the text is too big for the container, I want the container (i.e. the sidebar) to expand. Here is an MVP of the problem:
<html>
<body>...
- 83
0
votes
0
answers
25
views
Does Any Inline Button Always Behave as Inline-Block?
I'm trying to understand this behavior where an inline button behaves like an inline-block, in that its background extends to fill the entire line height:
html {
padding: 1em;
font-size: 20px;
...
- 359
1
vote
1
answer
22
views
Horizontal Stack effect while scrolling vertically with css, js
I have been trying to acheive this effect but, have failed to do so.
Effect: https://imgur.com/a/dBvwa3e
Can anyone help me out? This is as much as I have been able to achieve:
Tried Approach:
I have ...
- 11
-3
votes
3
answers
42
views
Center absolute text under image
I have a row of four images displayed next to each other, and I want to show text beneath each image when hovered over. The text should remain hidden until hover and should not affect the content's ...
- 11
0
votes
4
answers
62
views
Css using display style with fade-in animation togather
I developed an HTML code and I intend to display the text related to each link with a fade-in animation when the link is clicked.
In this code, I have a card with two columns. The first column ...
- 17.2k
0
votes
1
answer
45
views
JavaScript popup calling different images onclick
I have created an image popup which uses javaScript to call different images onClick.
HTML Code snippet for the same as below.
<img onmouseover="imgload();" src="11.jpg">
<...
- 15.7k
0
votes
1
answer
15
views
How to add inset border on image in Elementor?
enter image description hereI’m using an Image Widget inside a Container in Elementor, and I want to add an inset border with 24px of padding around border. I don't want to use the image as a ...
1
vote
0
answers
32
views
Change input text color when auto filled is not working
when i auto fill the input data the input text color is black, i want to change it because it looks horrible on dark background, i traced the color properties on input and found one color property ...
0
votes
1
answer
12
views
NuxtUI custom styling of <URadioGroup> component
I would like to style my Radio component like this -
But Nuxt UI default styling gives me this. Without much ability to customize -
I achieved the first styling in a very hacky way. I saw the DOM of ...
- 94
-1
votes
0
answers
16
views
Issue with YouTube Video Embed: Black Bars on Desktop, Correct Aspect Ratio on Mobile
I'm working on an email campaign that includes a CTA (Call to Action) directing users to a cloud page where I've embedded a YouTube video. The video displays correctly on mobile devices, maintaining ...
-1
votes
4
answers
53
views
Text displayed by a span tag followed by font awesome i tag is all displayed in UPPERCASE where as I need them in lowercase. How to fix this?
I'm trying to display the e-mail address followed by an envelop icon placed from font awesome. However, the e-mail address is displayed all in UPPERCASE letters while I have not given such specific ...
0
votes
3
answers
46
views
how to draw such gradient background using css?
I take a photo of sunset and I like such gredient effects from sky to highlight sunset, is there any way to simulate such effect using css? I want to erase those buildings then use it as my webpage ...
- 331
-2
votes
0
answers
23
views
Scrolling Glitch [closed]
hi i am creating a website and i am experiencing a scrolling glinch. I cant seem to pin-point the problem and I was hoping someone could help me. Currently its taking me 2 scrolls to get to the bottom ...
0
votes
2
answers
43
views
Slanted stripes on a page
I would like some full sized slanted stripes on the page; that's all.
This is what I did so far:
html, body {
overflow-x: hidden;
margin: 0;
padding: 0;
}
body {
display: flex;
...
-4
votes
0
answers
42
views
loading content thru PHP to simplify or is there a way to load it in a div? [closed]
I have my header/css and part of the body including the <div tag for the cell the content is in as one file and then the footer with the and and segment as another file and then have the ...
0
votes
0
answers
18
views
Move grid element to the empty space [duplicate]
I want to move the third div using css into the upper empty space. Every element has it is own height. How can I do it?
<div class="grid">
<div style="height: fit-content;&...
- 62
-1
votes
2
answers
60
views
The dropdown menu is not expanding. CSS and JS are connected correctly [closed]
I am a beginner in web development. I need some help. The dropdown menu is not expanding. CSS and JS are connected correctly. What could be the reason?
I checked the CSS/JS classes and connected files....
- 5
-2
votes
2
answers
113
views
How can I change my code to obtain simpler form and brighter blinking dots
I want to obtain blinking dots one after one in one direction and then blinking have to go back, and all have to happen in the loop. I have created CSS code with Javascript according to first five ...
0
votes
3
answers
50
views
How to make table cell height equal without image on one cell overgrow the table?
So I have a <table> that has 1 row with 2 columns, one row containing an extraordinarily large image, the other row just contains your usual table cell content - a few <p>s.
Here's a ...
- 386
-3
votes
0
answers
22
views
How to change "Choose File" and "No file is chosen" [duplicate]
I need to change two text in the input, the project uses bootstrap 5, I also need to save all bootstrap styles when changing the texts, how can this be done (I found how to change the choose file, but ...
0
votes
1
answer
50
views
Need help floating an element with CSS
I'm trying to design this webpage for this class I'm taking but having some trouble. I've only ever posted code to this site, but I'm going to try and include screenshots this time so if it doesn't ...
0
votes
2
answers
44
views
Animation cuts when i stop pressing :active css
i've been designing a button, then you press, then appears an ::after with content "copied!"
Ok, while ::after appears there is an animation, that animation triggers with :active property, ...
0
votes
1
answer
23
views
React Native with Tailwind CSS
How can we setup for react-native project on windows using CLI(I don't want to create any EXPO project)and how can we integrate it with Tailwind CSS without any error?
Also can a NPM can be converted ...
1
vote
1
answer
17
views
How to stop page theme FLASH in Next.JS 15 using Tailwind CSS and prevent hydration mismatch
Is it possible to implement a successful page theme initialisation without the common flash issue, and whilst also avoiding any hydration mismatch errors?
My solution so far has been to execute ...
- 114
1
vote
0
answers
37
views
card flip with backface-visibilty: hidden
I'll appreciate suggestions on how to achieve this flip functionality in my angular application. I currently have it partially working (please see sample on stackblitz (click to review sample). I am ...
- 52
0
votes
1
answer
44
views
Why won't the boxes display? [closed]
I'm creating a website which will have several boxes people can click on to get to articles, right now I have two but the borders won't display.
Here is my HTML code
.box{
border-style: solid;
...
0
votes
0
answers
22
views
Problems with some glowing style on safari
Im having trouble with safari, that makes me that square effect, I don't remember how to fix it!
const getGlowingStyles = (theme: Theme) => {
const glowing = keyframes`
0% { background-...
0
votes
1
answer
21
views
CSS looking like table with fixed header and left column
I need to create something looking like table, so we have cells.
The problem is, i need to first "column" and first "row" will be fixed, so when i scroll vertically or horizontally ...
- 51
1
vote
0
answers
35
views
getComputedStyle wrong for placeholder on some mobile devices
This seems like a browser bug to me but I couldn't find anyone else seeing the same problem. It seems like getComputedStyle isn't getting the right font-size for an input placeholder for some mobile ...
- 21
0
votes
0
answers
27
views
Chart.js barplot keeps getting bigger without stopping [closed]
Just like the title says. I have a chart that when I open the page it keeps getting bigger and bigger and bigger. I genuinely don't understand why because I have another plot pretty similar with the ...
- 43
-1
votes
0
answers
41
views
Issue with CSS for overflow for dropdown
I have created this dummy top nav bar, where i have multiple drop-down which can be scrollable on x axis via buttons if multiple . But when i open the dropdown it is being opened in scroll view for y ...
- 80
-1
votes
1
answer
36
views
Putting span below the H3
Hi I'm trying to get the tan paragraphs below the h3's. Here is a photo of what it looks like currently:
Also want to make sure it stays in two rows as currently pictured. I tried multiple version of ...
1
vote
1
answer
31
views
Change font of Quarto 'term' when rendering to HTML using custom .css
I'm building a template .css for my brand which will be used by Quarto to render HTML docs. This page shows how to insert a term (scroll down to the bottom of Lists). In the rendered HTML, the term ...
- 2,085
-1
votes
1
answer
19
views
Large floating element next to automatically sized elements
In HTML, an element is in flow or out of flow.
float: right can be used to take elements out of flow.
In-flow and out-of-flow elements can be combined, i.e. some elements can be in flow while others ...
- 2,360
-2
votes
0
answers
37
views
CSS: target p only in parent divs with columns?
I have an Elementor/Wordpress site with some articles in columns. I need to target only paragraphs in text with columns.
In Elementor the P is child to a div that is child to a div with the column ...
- 27
0
votes
0
answers
16
views
Navigation menu items visibility in Bulma CSS on mobile
I'm using Bulma css without any Javascript or other styles, directly imported in my html.
I am trying to change the display options for the navigation menu to show my call-to-action buttons in the ...
-3
votes
0
answers
21
views
How to do an animation based on scroll with Elementor? [closed]
I am making a website for my portfolio on wordpress by using Elementor and i want to make a page where on scrolling down, the content moves horizontally. I have taken some inspiration from this ...
0
votes
0
answers
23
views
Safari font loading fails with 404 error - MyriadArabic-Regular.woff2 workaround needed
I'm experiencing issues with font loading in Safari, specifically with Myriad Arabic font and similar problem applies to other fonts in the same project. The browser developer tools show a 404 error ...
- 31
1
vote
2
answers
31
views
backdrop-filter blur not working when combined with mix-blend-mode
I'm trying to create a flex layout where each of the flex items "cut through" the flex box, revealing the image that's beneath the flex box. I've managed to achieve this by using mix-blend-...
- 2,609
-1
votes
0
answers
12
views
Gallery Items Do Not Stack Properly When Using Different Widths [duplicate]
There are many options to create galleries of pictures where items stack neatly on top of each other - most of them are quite old, such as isotope.js or masonry, an old jquery library:
They achieve ...
- 377
0
votes
2
answers
62
views
Text wrap does not respect aspect ratio
I am trying to create a testimonial. There is a testimonial container that contains three direct child divs: profile-image, name, and feedback. The testimonial div is flexbox, and its direction is ...
- 518
-1
votes
0
answers
38
views
How can i stop increasing the box of UL tag
I am trying to create a TODO list app on web but there is a problem that makes me drain. The problem is that when I add the task it shows below in a box of UL tag, the task shows well when the text is ...
0
votes
0
answers
16
views
FGC Character select Layout in REACT
I’m a beginner at React and have designed a custom FGC (Fighting Game Community) layout in Figma. I want to implement it as a React app. This is the design:Character Layout
What are some approaches i ...
-1
votes
0
answers
10
views
Position a submenu correctly with Tailwind CSS when parent has overflow-y-auto
I'm using Tailwind css to create a multilevel menu (menu with submenu)
Here's what I did
I set overflow-x to auto on the main menu because it contains many items
I set position to relative on each ...
- 179
0
votes
0
answers
21
views
Prevent zooming "out of bounds" in mobile browsers
When the user pinch-zooms (i.e. changes the visual viewport) on pages whose content is initially smaller than the screen, they can scroll to empty areas where there's nothing, not even <body>, ...
- 2,360
0
votes
0
answers
15
views
Can the height of the scorll bar be set vertically? [duplicate]
I am trying to create a custom vertical scrollbar using the following LESS code.
The goal is to style the scrollbar such that:
The scrollbar's height dynamically occupies 80% of the container's ...
- 13
0
votes
3
answers
43
views
How to update background image height based on dynamic content
I have a background image with dynamic content inside it. Sometimes the content is less, while other times it can be more. When the content is more, it tends to overflow outside the container. I want ...
