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
0
votes
0answers
6 views

How to set a transparent right border for vertical tabs in Bootstrap 4

I am trying to create vertical tabs in Bootstrap 4. I am mostly done with it already, but would like to make the right border of the active tab transparent. I have tried to do so, but it doesn't seem ...
0
votes
0answers
8 views

How to restrict in PDF If Content is crossing outside of the <td> block

I'm working on Generating PDF using package DOMPDF package in laravel Framework. Here i'm using table tags to display the content in PDF. But in one scenario i'm facing issues like display the content ...
0
votes
1answer
18 views

How to assign props values to styles

I'm using create react app and I need to assign props values to a styles of the component. In this case background image 'url' is need to pass as props to styles. index.js import React from "react"; ...
-1
votes
2answers
19 views

How to set padding between mat-icon and button title

<button mat-raised-button color="warn"> <mat-icon>delete</mat-icon> Remove Driver </button> How to add padding in between mat-icon and button title? I want to keep ...
0
votes
2answers
21 views

html css jquery modal doesn't open in browser

I am trying to create a modal window when a button is clicked for registering users.I don't know what is wrong. The button gets clicked but modal window doesn't open. My code is like this <...
1
vote
1answer
8 views

How to align item to center using Ant Design PageHeader?

I've been trying to center a bunch of buttons in a NavBar using the Ant Design framework. NavBar.tsx const NavBar: React.FC<NavBarProps> = ({ title }) => { return ( <PageHeader ...
0
votes
0answers
15 views

Unexpected “<” in if else statement PHP [duplicate]

$redData = $row['red_data']; $amberData = $row['amber_data']; $greenData = $row['green_data']; if( $currentValue < $amberData ) { ...
1
vote
0answers
18 views

How to reverse a @keyframe animation on mouse off?

I need to reverse the wipe animation when the mouse moves off the button. Is there a way to do this in only CSS? I know I can reverse the animation, but I'm not sure where to put in the CSS file in ...
0
votes
1answer
17 views

How to create progress steps in CSS

I have a list of items that I want to turn into a progress steps in CSS. ol { width: 800px; } li { display: inline-block; color: transparent; height: 25px; width: 25px; ...
0
votes
0answers
11 views

HTML block element moves (changes margins) upon refresh

I have two block elements inside an inline-block div, one of which is a vertical line as shown in the picture here. Here's the code for reference HTML <div class="corner" style="display: ...
0
votes
0answers
8 views

Rows shrinking in IE(all) however looks great in chrome and other browsers

OK I am slamming my head against this one, I have a row designed for a menu and when I view the menu tabs in chrome or another browser they look great and expand and shrink properly. In IE they all ...
0
votes
0answers
14 views

wordpress website, using cloudflare as CDN, CSS on the live site keeps disappearing and sometime css classes does not work when i inspect the element

I am working on a wordpress website, using cloudflare CDN. I have dev, staging and live site, where dev and staging works perfectly fine but live site works very weird, CSS on the site keeps ...
0
votes
0answers
3 views

How to setup materializecss javascript in Phoenix elixir webapp

I'm trying to use materizecss javascript jquery features, but I'm getting below error message In the browser. Error message: Uncaught TypeError: $(...).carousel is not a function Any idea how to ...
-1
votes
1answer
22 views

Parent CSS hierarchy needed

div#foo { body { background-color: white; font-size: 20px; } } Above is what I want. This is a css file. Basically my app div in react has an id foo and I want the css to ...
0
votes
1answer
19 views

Align Divs on Same Line

I have two div elements, and I want to align them on the same line. I've tried more or less everything, and they are still under eachother. My code is as follows <style> body { ...
0
votes
0answers
17 views

Gif over an html link image

I am creating a profile, and want to add a gif over the html link image and place it where i want. When i do it just goes on top of the image? <img src="https://i.ibb.co/s1zKHdw/c.gif" alt="...
0
votes
0answers
7 views

How to load template that it has own css like bs3 to another page?

I have a form that it has Bootstrap 4 CSS classes. I want add jquery image upload code in my form but this codes have Bootstrap 3 CSS classes. I put my jquery block to image_block.html with {% load '...
0
votes
0answers
17 views

Horizontal slider navigation with arrow navigation

I am trying to create a horizontal navigation slider in a fixed header. I am a little lost on how to create the the fixed header with slider arrows. The below code shows a left and right arrow codes ...
2
votes
1answer
30 views

Vertical align carousel indicators in Bootstrap 4

I'm trying to vertically align the non-active indicators but unable to do so. Could someone help out? The output should be as shown in the screenshot. JSFiddle: https://jsfiddle.net/6zobr8fh/ HTML: ...
0
votes
0answers
34 views

Showing all <div> with a certain class and hiding other <divs> with Jquery

So I am creating a twitter clone, and I am having trouble hiding all elements with a specific class. The action is done when the user clicks a username, and I am trying to hide all of the clicked 's ...
0
votes
1answer
13 views

Adding a photo to the left and 3 to the side on the right

I am having trouble aligning my photo to the way I want it I am trying to build a code where I can have a big photo to the left, and then three small pictures at the right(while both of them are ...
0
votes
1answer
27 views

Is it possible to make these changes with one reflow? [duplicate]

I've been reading some guides and results that google throws at me but I am still not sure how to go about to reduce the following changes to one single reflow. var el1 = document.getElementById("one"...
0
votes
1answer
16 views

link from div class=“overlay” to another page with on-Clickfun

i am new to coding and i want to ask, how can I link from my heading to pages, one word should bring me to my 2nd page and the other to the third page.this is my main page
0
votes
0answers
7 views

WTForms Label Position / Hiding Label

I've build a form using HTML / CSS with Bootstrap and I'm trying to integrate WTForms into it - everything was working fine and formatting perfectly until I started formatting the fields using wtf....
0
votes
0answers
23 views

Google Chrome display

We have a page that displays 'awards' for users where the display is a graphical image for the award. These are normally displayed vertically stacked for users with more than one award - i.e: Award ...
0
votes
0answers
22 views

Why isnt my image rendering or translating as expected?

I'm trying to place an image over a background, where it is translated around the background based on the value of this.pitchWidth. The property of this.playerRef seems to update correctly inside ...
0
votes
1answer
27 views

CSS will not appear with HTML and Node

CSS styling will not appear with my HTML when running in Node. Directory: Login_Page_V2.html Login_Page_V1.js public     -css         -...
0
votes
2answers
27 views

How to exclude an element in an ordered list in HTML

I want to skip an li element in an ordered list. This is my code: <ol style="list-style-type: upper-alpha;"> <li>ALICI; mal satışına ilişkin mesafeli sözleşmelerde, ürünün ...
0
votes
1answer
18 views

Is there a way to order two divs: image, and text on bootstrap 3 as you are changing the screen resolutions?

I know that on bootstrap 4, you could simply write "order-#" in each div, but my project is based on bootstrap 3 so it would create problems if I change the versions now. Please note that on a mobile ...
0
votes
0answers
10 views

Croppie.js Image cropper adding rotate function

I am using croppie.js library for cropping the images. But some of the image when selected appears inverted. I want to add an onclick rotate function which would rotate the image when the button is ...
0
votes
0answers
19 views

Error in webpack encore build error: Module build failed: Unclosed block

I get an error when building my webpack using encore in symfony I've tried various time removing node_modules. and reinstall with yarn install. But can't find the solution. It has been working before,...
-3
votes
0answers
19 views

element style in browsers make images displayed

I found that the image in my site beeing display: none !important without any styling .. so I inspect the page I found that (element.style) default of browser make display none
-1
votes
0answers
15 views

Position Fixed Bug in iPad OS 13.1.3 Safari

position: fixed appears to be broken on iPad Pros running iPadOS 13.1.3 (and possibly other versions, I only have the one iPad to test with). This does not seem to be a problem on iPhones running iOS ...
0
votes
1answer
33 views

Change CSS style dynamically

I'm trying to change the bootstrap CSS style (I'll call it theme) of an HTML page. I want to switch between rows and cards style, which I have managed to do with some JavaScript and DOM manipulation. ...
0
votes
0answers
18 views

how do i make my image cards responsive using images from my database and using bootstrap 4?

Trying to make my image cards or whatever you call them responsive. I need 4 cards to be next to each other and then its just gonna start over again under. I can only get it to work if i use images ...
0
votes
1answer
14 views

Why is ThemeProvider (Material UI) not working for me here?

I've used Material UI quite a lot, so this is baffling. I've looked through the docs, I've checked my code, I can't see the issue. I want my H2 tag in the nested component to use Arial. However, it's ...
0
votes
1answer
37 views

How to make 2 images responsive at the same time

I have an html and css code to display 2 images. I'm using bootstrap to make them responsive but only the background is responsive. Could someone tell me why and how to fix it please? html code: <...
1
vote
2answers
30 views

How to display one html element over common boundary between other two html elements?

I want to display one HTML element (in my case it's the swap-button with a paired arrows) over the common border between the other two elements (in my case these are input boxes). But my swap-button ...
0
votes
1answer
23 views

Creating CSS background image that ends at the bottom of initial page height and is no longer visible after scroll

I have a div with a background image with an animation effect. It doesn't seem to work in Codepen so I hope my explanation is clear enough. Here is the Codepen anyways: https://codepen.io/amandathedev/...
0
votes
2answers
27 views

footer position wrong because of height:100%

I found quite a lot of people asking similar question, but mine seems to be a different problem. This is the arrangement of my div. <div class="container-fluid px-0"> <header> </...
0
votes
0answers
26 views

Is there a better way to do complex animations with start and end animations that are randomized?

In this question there is an accepted answer How to create an animation with rarity of it to appear together with animations that always appear? It contains this https://jsfiddle.net/d25kx6cj/5/ &...
2
votes
3answers
30 views

javascript - SVG circle style untidy

I have a concentric circle in SVG in HTML but I would like the bottom half to look like the top half. The bottom has the circles are misaligned. const svgNs = "http://www.w3.org/2000/svg"; let ...
-2
votes
1answer
21 views

Creating a subscript of a subscript

I want to write an expression so that the is the main item, R, followed by a subscript, say 2, followed by a subscript of that 2, say 3. I can do the first two bits, R<sub>2</sub>, but I ...
0
votes
1answer
20 views

How to import website completely source with iFrame

In the iframe source code page i see just this code how can import all source original webpage css and js <iframe src="https://morocco.blsspainvisa.com/book_appointment.php"height="1500" width=...
2
votes
1answer
22 views

Shiny Plot Height behaving different on different desktop

I am trying to make a custom UI in which i have to plot 4 plots inside each tab, but i am getting scroll on plot rendering and when i add height as 240 scrollbar disappear and it works for the same ...
0
votes
1answer
24 views

Making a rectangle within another rectangle and positioning elements

I am trying to code a resume template just to learn the basics about HTML and CSS. However I have a problem when it comes to positioning a rectangle inside another one. I have been searching for hours ...
0
votes
1answer
12 views

How to synchronize multiple animated PNG images on HTML webpage?

Two animated PNG images are loaded as background-images in CSS on a HTML webpage, see code below. Each image animates one frame per second, and loops. The trouble is, both animated PNG images load at ...
1
vote
3answers
30 views

Can't center the div element when the screen width changes

Hello everyone i was finishing the last touches on my simple math function plotter then when i used developer tools to see how it looks on mobiles i realized that the header text isn't centered like ...
0
votes
2answers
40 views

Why does my code not show up with the font and positioning I chose? I refresh & it shows up for a sec

I am creating my first personal web page but I am having issues with it showing correctly on chrome. What am I doing wrong with my inline html/css code? When I open it from my laptop as the .html ...
1
vote
1answer
11 views

Different max width to different pages in Ionic 4

I am using Ionic 4 to build a small web app. I use the following on global.scss to limit the page width, so it will have a similar look on both desktop and mobile: .ion-page { max-width: 700px; ...