Episode #125 of the Stack Overflow podcast is here. We talk Tilde Club and mechanical keyboards. Listen now

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) colours, layout, fonts, and animations. It also describes how elements should be rendered on screen, on paper, in speech, or on other media.

Filter by
Sorted by
Tagged with
-1
votes
0answers
6 views

CSS position: -webkit-sticky not working on iOS 11

The -webkit-sticky position doesn't work on mobile safari. https://codepen.io/elad2412/pen/QYLEdK Should be supported based on caniuse. https://caniuse.com/#feat=css-sticky
-2
votes
0answers
11 views

Page turn for dynamic contents

I am looking to find a way to implement a page turn like Pocket. I have a look at turnjs but it doesn't suite me since the content of the page is depend on the size of the device or the size of text. ...
1
vote
3answers
41 views

Show tooltip using JavaScript

I am trying to show a tooltip by hovering the mouse on a circle inside a canvas. While the CSS is changing from hidden to visible by javaScript (saw that through chrome inspect), the tooltip is not ...
0
votes
2answers
15 views

making javascript push menu scrollable (no scrollbar)

I've got a push menu (left to right) that slides out from the left of the page sliding the page to the right. I'm trying to add a safeguard to it to where if the links exceed the page height, the ...
0
votes
0answers
15 views

Pop up modal (fixed) appearing behind header and footer on safari

Seems like a decent amount of people have had this issue but I tried everything I've read with no luck... I have a contact form pop up modal form (fixed) which works perfect on Chrome, mozilla, IE. ...
1
vote
2answers
24 views

DIV element with box-shadow appearing behind DIV element with image

I have tried for hours now -- so desperate attempt to consult this community now. I have a website I am developing and I have a div element with a box-shadow at the bottom and then an image in a ...
2
votes
2answers
41 views

Highlighting A String Based on given indices

Let's say I'm given const s = "Old Man's War" //Each indices represent the beginning and end index of the string const indices = [ [ 0, 0 ], [ 5, 5], [ 11, 11] ] The indices represent ...
0
votes
0answers
21 views

Email signature unexpectedly breaking line

I've been using this email signature for a while, but now I realize that, when on mobile, the text is breaking a line, as you can see in the image below. On desktop it shows as it should, on the side. ...
-1
votes
1answer
26 views

Is it possible to change the style of an element when a specific div/element is scrolled into view?

Specifically, I want to change colors of sticky and fixed elements on my page dynamically as the user scrolls into specific sections. I know that this is possible with the pixel height on scroll, but ...
0
votes
0answers
22 views

Bootsrap4 input text as readonly responsive

I am trying to create the input text as read-only using the bootstrap. I found from the bootstrap link we can use form-control-plaintext class <input type="text" readonly class="form-control-...
3
votes
0answers
18 views

Modifying font-title of blogdown webst

Hello guys this is my first question regarding the blog. I would like to make a basic change to the blog title. The blog is from this link: yihui This is the .toml file: baseurl = "/" languageCode ...
0
votes
0answers
10 views

ddslick not scrolling options in chrome

having issues making my ddslick options scroll. the problem is on my larger dropdown list it extends the entire page even past my page layout. if i add max-height to dd-options it shrinks it to the ...
0
votes
1answer
40 views

If else not working in Document Ready function

I am creating a page that selects a different form for running different functions when a user selects different select options. What I am having trouble with is keeping the form displayed when I ...
0
votes
1answer
28 views

EventListener function error: CSS manipulation via vanilla Javascript

I have an error that my eventlistener is not a function. I've search previous threads/ documentation but have not been able to find an answer to my specific issue. The goal is to manipulate border-...
-2
votes
0answers
20 views

Why did the Flexbox flow change from row to column unexpectedly

The flow was correct up until I added 3 separate 'container' div elements to img divs.. aptly named 'flex-pic'. Sans elements, the flex-flow works as a row. Here is the JsFiddle for reference. Code:...
2
votes
2answers
31 views

How to link url or .html page link to CSS button

I have a "migrated.html" page in root directory. How do I add that link to this CSS style button? <button onclick="#" <a href="migrated.html" class="glossy-button glossy-button--red"></a&...
0
votes
1answer
17 views

how to add an input and remove it if existed with javascript

Hello I have a form and I want to add New input in that and if this input existed remove that or Prevent from being added. in my code just added one input and when I try to add another different input ...
0
votes
0answers
15 views

Scroll down then scroll right then scroll down again

I have 3 separate divs. First one 100vw and 100vh. Second one has 100vw and 100vh and it has a div(".move") inside of 400vw and 100vh - which will be moving later on to the left and to the right. ...
0
votes
0answers
15 views

select 2 dropdown list showing up behind other html control

Are there any know issues with select 2 4.0.10? On my asp.net page, it is showing up behind the other html control.
2
votes
1answer
22 views

Change overlapping pixels in css

On some websites, the cursor is some shape, which is easy enough to do, make a div with some css that follows the mouse. But on some other sites, I see that when the cursor moves, it filters on a ...
1
vote
2answers
24 views

How can we trim on the left side of the image

When I'm trying to apply trim to the image, the image is only trimmed on the right side, not on the left side. How can we trim on the left side of the image? I'm using this CSS: .media { padding: ...
0
votes
3answers
34 views

CSS - a tag with space in content but possible to href

is possible to make content of <a href="">bla</a> empty (just space <a href=""></a>) with CSS and have an empty a object possible to click on it? If yes, how can I achieve this?...
-4
votes
2answers
20 views

Flexbox -how to get first child 50% widht and 100% height while stacking remaining children?

I can't do much with the markup, if I could I'd just add 2 containers side by side. Basically it is a UL that looks like this: <ul> <li>one</li> <li>two</li> &...
1
vote
1answer
20 views

How to have multiple dropdown buttons in a navbar?

I'm building a new website and want to have mobile accessable dropdowns. Instead of having hover dropdowns, I'm trying to build clickable dropdowns. I've tried looking at what other people have done ...
0
votes
1answer
26 views

Modify a CSS class depending on Angular condition

This div block displays a list inside of a square with a specific height div1 blueSquare div2 for div3 if My blueSquare Div is a wrap for a list and it's set as a none display. I need the ...
0
votes
0answers
19 views

I am trying to create filters and when i click on the button to filter the elements it does not work

I am trying to create filters in an HTML webpage using HTML, CSS, and javascript. When I click on the button to filter the elements it doesn't work. Although it changes color. You can test out the ...
0
votes
1answer
16 views

bootstrap carousel slider ID of items appears in URL

bootstrap carousel slider id appears in URL . like It shows in the following pictures it changes sliders but it shows the ID of Each slide item in the URL. I changed the version of Jquery for newer ...
-2
votes
1answer
32 views

How to display the browser's cursor image in a div?

Is it possible to display the cursor images on something else than the cursor? For example as the background of a div: div{ background:pointer; } If yes, how do you do this?
1
vote
2answers
42 views

Need help replacing large icon with smaller icon - CSS?

I have a wordpress site that changes shopping cart icons when you scroll. In its original state, a very large icon is displayed. Upon scroll, a smaller, more desirable icon is displayed. I am wanting ...
0
votes
1answer
40 views

How to change the visibility of an element inside a PHP echo?

I am creating a page that has multiple forms that are hidden then shown when that particular function is selected from a select. What I need to figure out is how I would keep that particular form ...
1
vote
1answer
53 views

How to get comments to display under thread

Im trying to create a forum where users can create threads by filling out form with name and message and people can comment on each thread post by clicking the comments button (more) which opens up ...
0
votes
1answer
20 views

Can't get rotated text aligned in Bootstrap 4 Grid

I have a grid using Bootstrap 4's Grid that I want to look like the following: I have almost 100% of it complete, the issue I have is the alignment of the vertically rotated text overlaps the color ...
0
votes
0answers
9 views

How to correct overflow of a div based table in flexbox?

I am trying to create a responsive based table. It's based on this https://codepen.io/vasansr/pen/PZOJXr At the moment it's stacking correctly, but when the page is displayed on a mobile device, the ...
1
vote
1answer
41 views

how do I overlap html <div> over another <div> correctly?

I am working on the UI of a details page. The page is getting its content from a data base which updates the content dynamically. So far the UI looks like the image that I have linked Current UI of ...
0
votes
0answers
6 views

D3 ForeignObject ContentEditable remove border

I am unable to remove the blue default border in my content editable, it looks like: As you can see, I can change the text color and font size in the foreignObject, but I couldn't remove the border, ...
0
votes
1answer
29 views

How to find position to insert draggable item at when inserting in a new block

I am trying to create a page where I have a list of items to the left and a dashboard on the right. I want to be able to drag an item from the right and drop it in the dashboard view. Using Blazor, ...
0
votes
1answer
26 views

Mouseover is messing with the table head, how to fix this?

I've got a mouseover and mouseout on my table rows to show links as I hover over. For some reason it when I hover over the rows it shrinks my thead and the links freakout. I cannot figure it out for ...
-1
votes
1answer
16 views

How Bootstrap are minifying their CSS?

I need to minify my css files and I was wondering if anyone knows how Bootstrap are minifying their CSS? What tools are they using and etc.
0
votes
0answers
10 views

responsive step bar, vertical for desktop, horizontal for mobile. How?

in desktop version we have left column (with vertical steps), and right column. in the mobile version the left column ends up above. That being said, I would like the mobile version to show the 4 ...
-1
votes
1answer
31 views

how to find the CSS/HTML rule that determine the color of specific pixel

Using chrome, my website has some strange rectangle with light blue color. I have no idea where does this rectangle coming from as my DOM is very complex and not entirely in my control. My question ...
-2
votes
1answer
23 views

Change <li> list vertically to horozontally with 4 lines interval [duplicate]

I have a list with ul li like this Item line 1 Item line 2 Item line 3 Item line 4 Item line 5 Item line 6 Item line 7 Item line 8 Item line 9 Item line 10 Item line 11 Item line 12 And I need to ...
0
votes
1answer
56 views

Add CSS style to a specific class via javascript

I got these lines of code and want to add them only to a specific div class. So if the background is dark it should be filter: invert(1); and when the background is brighter filter: invert(0);. How ...
-3
votes
1answer
13 views

How to inline logo and navigation links in the same line?? I also keep getting weird looking lines and squares in chrome when testing the website [on hold]

I am a beginner web developer and I am sitting here for 3 hours ad can't seem to find an answer on how to display logo image and navigation links in the same line?? No matter what I do, chrome decides ...
0
votes
0answers
10 views

CSS for module size (similar to @media)?

I have a Joomla Module that I'm trying to keep responsive for different screen sizes but displaying and hiding columns. This works well on full page displays. @media (max-width: 800px) { ....
0
votes
1answer
34 views

Reusable web page elements

I am creating a simple web page that will be a kind of "App Store" which will show users a list of software they have available to download. I am limited in what I can use since this will be a ...
-1
votes
1answer
26 views

How do I make nine equally-sized tiles on HTML/CSS? [on hold]

I am editing a website where there are six square tiles, in two rows and three columns. However, I'd like to add three more square tiles, so that there will be three rows and three columns total. I ...
-1
votes
0answers
20 views

How to insert spaces between grid's row

I have to make a grid like the one in the image: https://imgur.com/MbR8qHw I have tried on this way, but doesn't work: <div class="container" style=" padding-right: 0;"> <div class="...
0
votes
1answer
20 views

Bootstrap dropdown menu disappears after clicking toggler-icon

I have copy pasted a navbar from bootstrap: https://getbootstrap.com/docs/4.3/components/navbar/ When i paste this code into my project, the navbar works except when I shrink the browser to mobile ...
1
vote
0answers
35 views

How to remove focus on button after menu opens up with onFocus event

I have a menu implemented following Material UI's Menu with an icon. The goal is to allow users to hover with mouse or keyboard tab focus on the 3 dots, not click, to open up the menu. The menu closes ...
0
votes
1answer
22 views

My media queries for small screen are not stacking as they should

I am trying to get two coloumns to stack but it is not working. I am a beginner. The media queries I have in my CSS is <meta name="viewport" content="width=device-width,initial-scale=1,maximum-...